We have just released a new, free K-12 template in the store which uses the calendar widget and a couple of effects to create a bold presentation: https://store.risevision.com/product/207/k12-welcome-and-events?cid=f114ad26-949d-44b4-87e9-8528afc7...
In this post we will take you through how to customize the two main effects in the presentation, the text and icon effects, so that you can set it up with your branding for your school.
The Shadow Effect
The first effect you may notice is the shadow under the placeholders. This is achieved by adding the box-shadow CSS effect to the placeholder style. To do this, go into the HTML view and look for the placeholder information. We named ours ‘main-placeholder’ to make it easier to find. When you find this, look for the ‘style’ attribute which sets out the styles for the placeholder, such as size, position and background colour. We want to add in the box shadow property here, so right after the first “ we want to add in ‘box-shadow:0 10px 20px rgba(0,0,0,0.5);’
Breaking these values down, the first 0 means that the shadow is not offset to the left or right of the placeholder, the 10px means that the shadow is offset down from the text by 10 pixels and the 20px means that the blur radius of the shadow is 20 pixels.
The Text Effect
For this presentation we have added a custom font to the text widget for the ‘WELCOME’ text as we wanted this to be in an extra bold size. To do this we went to google fonts and downloaded the .ttf file for the Open Sans font in extra-bold, but feel free to experiment with any other fonts you find. There are some other sites where you can get fonts that are 100% free for commercial use, such as Font Squirrel, but we like Google Fonts as the fonts there are curated to ensure that they are of suitable quality for digital display.
In order to have this available in our text widget, we first need to upload the .ttf file to your storage, just like you would for any other file, and grab the link to this file. Once this is done, please open up the text widget and select the ‘add custom font’ option at the top. You can then paste in the link to the .ttf file here and you will see the new font name appear as the second option in the font list.
The next thing to do is to set the size of the font. The widget allows a maximum size of 96px, but if we dive into the HTML view, we can increase this size to fit with whatever we need. What we need to look for is where the text widget appears in the HTML. This is why it is a good idea to give your widgets and placeholders unique names as you add them to your presentation - in our case we called it ‘Header Text’. Once you have found your widget, you will see a long line of code which contains all of the setting for the size, colour, positioning etc. What we are looking for is the part of the code that says that starts with “additionalParams”. When you find this line, scroll along until you find the ‘font-size’ value.
Now all you need to do is change the 96px (or whatever value your text was set to) to the size you need. Check it out using the preview button and then make adjustments until you are happy with the result.
To add the shadow effect, we want to add the text-shadow property to the text widget. To do this we can amend the same “additionalParams” code to include the text-shadow property. In our example we want to add text-shadow:0 20px 50px rgba(0,0,0,0.5). As this is a new value, we can add it to the start of the style list, right after ‘p style=\\\’ and before ‘margin’.
TIP: You may want to expand the size of the placeholder containing the text widget so that this blur is not cut off.
The rgba(0,0,0,0.5) gives us a colour value, in this case it is black with an opacity of 0.5. You can experiment with these values to get the effect you want, and also check out this really helpful article from Mat Meiers for more information on shadow effects.
The Logo Effect
The logo effect is achieved by using two placeholders with image widgets containing a semi-transparent png logo. The larger of the placeholders is positioned so that it overlaps the foreground (blue) square, and the smaller is aligned in the bottom right corner of the foreground square, and the top left corner of the larger placeholder.
For best results, the image used should be a semi-transparent .png file. This allows the background to be fully transparent and the semi-transparent outline will take on a different colour as it traverses the two backgrounds of white and blue. The use of two logos will give a cool, slight offset effect, which adds to the effect of depth in the presentation.
In order to align the two images correctly, we have set them to be aligned to the top left corner within the image widget settings by selecting Top Left from the dropdown menu. Also, as we want the foreground image widget to only show part of the image, we have deselected the Scale to Fit setting for this and the larger widget. Our settings now look like this:
For our example, we sized our .png image to be around 500px wide so that it was large enough to not need the scaling of the widget.
If you need to follow rules for keeping white space around your logo, we have set up an alternative version of the template with a placeholder for the logo: https://apps.risevision.com/editor/workspace/38dc84c6-99ba-420b-9756-e9aa0f9f2f69/?cid=f114ad26-949d-44b4-87e9-8528afc76ce4
In this version, we have removed the foreground placeholder for the logo, as well as added a background colour to the placeholder with the logo. You can now position your logo in the center of the placeholder by using the same drop down menu as above, this time selecting “Middle Center”. We can also ensure that the placeholder is visible above all of the other elements by changing its z-index value to 10. Finally, to add some interest to the placeholder, we added some more box-shadow using the same method as above. This time we added a greater spread radius to give the impression that the placeholder is floating above everything else.
Thanks for Reading!
Hopefully you find this template useful for displaying your events, and that you have fun customizing it for your style. It would be great if you share what you come up with in the Community.