Free New K-12 Calendar Template

  • 4
  • Article
  • Updated 2 years ago


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.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb

Posted 3 years ago

  • 4
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I think foreground-logo image was cropped to short; it is not overlapping properly. 
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Darius, thanks for your comment. Could you clarify what you mean by it not overlapping properly? Does it look different to you from the screenshot at the start of the article? Thanks!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
you do not see it? 
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Darius, you have great eyes catching that! Thank you - it looks like it was an interaction with the edges of the placeholders rather than the image itself, so I have moved both the foreground and background image placeholders down 3px on the template and so it now looks like this, without the slight blue border:

The idea was to have the foreground image slightly offset from the background so that it gives the impression of being projected on to the raised blue card as well as the background at different levels. Hopefully this now looks better. Thanks again!

Peter
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Looks right now to me :) Although, I do not see the change when I open the preview of this template. Perhaps you have not published it yet? Also, just for the sake of discussion, you could really have achieve the same effect only with one image. However, this is a great example of how by manipulating with RV editor tools we can achieve some interesting effects.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Thanks, Darius. I have updated the original template so the changes should show up soon. I totally agree that a single image could produce a similar effect but we thought it would be fun to show how two image can be aligned in this way, so now if someone wants to they can take this and create an effect with two different colours, different opacities, or a greater offset. Like you say, there are a lot of interesting effects that can be created by experimenting with the editor tools :)