Using the Style Guide page(s) – SchoolNow

A Style Guide is included with each of your themes. For example: If your site consists of a district and three schools, and each of these four areas utilize their own color scheme or have other varying differences between each other, then four separate Style Guides will be provided. If your site consists only of one district or school, then just one Style Guide will be provided.

A Style Guide will show a number of font options (headings, paragraphs,) as well as buttons, informational cards, informational boxes, and other structural elements available to use with the Page Editor in SchoolStatus. While this is not an exhaustive list of all of SchoolStatus’s various widgets, these are the most commonly used and stylized items. We create this page to help display these items in a central area so that you can understand how they will look when used within your site, with your site's fonts and color schemes.

Additionally, the Style Guide's secondary purpose is to allow you to easily Copy & Paste a pre-built structural element directly into any other page you are currently working to build. Our intention is to save you time in managing and building pages. Let's get started on how to Copy & Paste elements from the Style Guide!

Style Guide pages as viewed on the website cannot be edited by simply clicking the Edit Page button. The Style Guide is actually run and managed inside the SchoolStatus Dashboard via the Inner Layouts feature, which is housed in the Themes & Layouts section. To access the Inner Layouts area, use the following general advice:

Log in to your SchoolStatus Dashboard
Select the Themes & Layouts button in the left-hand navigation of the Dashboard:
Find the Theme associated with the Style Guide you'd like to edit, and select the Inner Layouts button:
Select the Pencil Icon to Edit the Style Guide layout. If the elements are not editable on the page, you may have to look in the Inner Layouts for your site's template which you can locate under Themes in the Themes & Layouts section located in the side navigation while in the dashboard.

PLEASE NOTE: Your content changes are not intended to be made in this area. The actual content (text and images) belong on the actual page that they are intended to be displayed on. The Style Guide is simply an offering of structural items to copy into pages. Once these structural items have been copied into a page, then the actual content can be entered.

WARNING: It is imperative that changes not be made to the Style Guide Inner Template. This is a baseline and is only intended to be used to make sure color schemes are accurate, fonts are readable, and for copying structural items into other pages. The Style Guide is not intended to be modified or to hold actual content. If you accidentally modify or remove any items from the Style Guide, please contact SchoolStatus support and a representative can rebuild the Style Guide back to its original usable state.

Now that you've entered the edit mode for the Style Guide and can access the Copy to Clipboard feature for any structural item featured, it's time to pull those items out of the Style Guide and place them on the page you intend to work with. The easiest way to do this is to keep the Style Guide open as one "Tab" in your browser and use a secondary "Tab" to navigate to the page where these items should be pasted.

Navigate to a page using a new browser Tab:

Open a new tab in your browser. This process is different for each browser. An easy way to do so for most browsers is to right-click on the Sites & Departments link in the SchoolStatus Dashboard, and select the option that indicates open this link in a new tab:
Once within the Sites & Departments area of your site, select View Departments or View Public Site, and then navigate to the page you wish to edit.
When the page you wish to edit appears, select the Edit Page button in the top left corner of the screen, and allow the Edit Mode to load.

With two tabs open - one for the Style Guide, and one for the destination page - you can now comfortably and conveniently copy and paste structural items from the Style Guide into the destination page.

Let's take a look at this process now.

Copying a structural element within the Style Guide:

Click on the browser tab that contains the Style Guide in Edit Mode.
Scroll through the Style Guide to find the structural element you wish to copy.
For that element, place your mouse over the element until the pencil icon appears.
Select the pencil icon, and then choose the Copy to Clipboard option.

Pasting the structural element copied from the Style Guide into a new page:

With the element now copied from the Style Guide using the instructions above, select the tab that contains the destination page.
Place your mouse over any elements that already exist, and press the plus (+) sign button, then choose either Insert Before, or Insert After. Alternatively, if no items exist to Insert Before or Insert After, simply press the plus (+) sign button and allow the system to load the widget options screen.
On the widget options screen, select the Paste from Share Clipboard widget.
After a short loading period, the system will display a new screen with all of the options for the structural element that was copied. Scroll down (if necessary) and select the Create button.

The new structural element will now be placed on the destination page. It is now possible to add content to the element by modifying its various areas. For assistance in adding content to each individual element, please contact a SchoolStatus support representative. Since there are a vast number of elements available, the scope of this document is only intended to show how to copy and paste elements from the Style Guide into a destination page; therefore, a representative can assist in the minute details of modifying content within each of the various elements.

Related articles