1. Communicating with Banners
A Guide for SchoolTool Admin

2. The Dilemma
We found a lot of our parents were fast-tracking to the SchoolTool landing page to search for Parent Portal assistance. Our solution was to create a message banner so anyone from the community could access public SchoolTool resources.

4. System vs Group Banners
Let’s Get Started
System vs Group Banners
MAINTENANCE > MESSAGES > NEW MESSAGE (green plus sign)
System banners are displayed on the login landing page and throughout SchoolTool screens. Group banners are only displayed to specific groups after logging in.

5. Working in Design Mode

9. Design View Sample Use
We can link an image to a Form in One Drive or Google. For example, a Form that sums the number of lunch orders for the cafeteria:
Find and save a copy of an image.
Maintenance > Messages > Group Banner (for this one we would select SMS_Teachers)
Paste the image on the Design Tab.
Store the message to read in Google or One Drive and ‘copy the link’
Select the image and the Insert Link icon and paste the link into the URL Box! (Selecting ‘Open in new window’ is often a good idea.)

10. Working in HTML

11. Here we are looking at the HTML code that creates our banner.
Looks a little messy so let’s break this down...

12. This line begins creating a table so you can insert buttons
This line begins creating a table so you can insert buttons. It’s a good idea to use a table for your banner otherwise SchoolTool will stack your buttons/images one on top of the other...taking up a lot of precious window space!

13. This highlighted section is looking at the beginning of a table body <tbody> and table row <tr>. For this example, we’re only using one row to create our banner but you could certainly have more than one. Just remember that more rows take up more space!
Notice how the beginning and end of the table gets closed up at the end of our code? All commands must have a beginning and an end with a slash.

14. Our table has one row and 4 columns - each column (cell) contains an image <img style> and a link embedded in that image <a href>

15. Here’s the code for an image placed in a cell
Here’s the code for an image placed in a cell. It’s handy to be able to update these images whenever necessary, so Google Drawings is a convenient platform to create our buttons and images. Google Drawings also gives you the link to embed in your banner which makes this super easy!

16. Buttons and images were created in Google Drawings: docs. google
Buttons and images were created in Google Drawings: docs.google.com/drawings. This allows you to link to an image and update it whenever you want! If you’re familiar with the design features of Word or Paint, Google Drawings will be intuitive to pick up.

17. To publish your new image/button, go to File > Publish to the Web
Copy the link you created and Publish. This link will go into your HTML code.

18. Additional Resources
If you would like to copy the code created by South Glens Falls to mimic the banner used in this presentation, go to this link:
There is a LOT you can do to style your banner - change font, create stylized tables, and more! This website provides a lot of resources for you to explore: