What, Where is and how can I use the Style Guide page(s)?

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.

• What is a Style Guide?
• How can I preview the Style Guide?
• How can I use the Style Guide for my site?
  • Navigating to the Style Guide
  • Open a new tab and navigate to the page you want the element on
  • Copy the element to the clipboard from the Style Guide and Paste it to a page

What is a Style Guide?

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 SchoolNow.

While the Style Guide does not show an exhaustive list of examples all of SchoolNow’s various widgets, what it does show 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.

How can I preview the Style Guide?

You can view the Style Guide that was created for your site by going to the root directory, selecting Pages from the module list, and after locating, clicking on the page titled Style Guide.

How can I use the Style Guide for my site?

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.

Navigating to the Style Guide

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

1. While on the dashboard click on Site Management followed by Designs & Layouts button in the left-hand navigation of the Dashboard.
2. Find the Theme associated with the Style Guide that you'd like to edit and select the Inner Layouts icon which is the third icon from the left.
3. On the following screen click  the Pencil Icon to right of the Style Guide to be take to that 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 Designs & Layouts section located in the side navigation while in the dashboard.

Navigate to a page using a new browser Tab

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. 

1. 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 (Ctrl + click on Apple) on the Websites link in the SchoolNow Dashboard, and select the option that indicates open this link in a new tab:
2. Once within the Websites area of your site, select View Departments or View Public Site, and then navigate to the page you wish to edit.
3. 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.

Copying an element within the Style Guide

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. 

1. Click on the browser tab that contains the Style Guide in Edit Mode.
2. Scroll through the Style Guide to find the structural element you wish to copy.
3. For that element, place your mouse over the element until the pencil icon appears. Select the downfacing caret to the right of the pencil icon, and choose the Copy to Clipboard option from the options given.

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

1. With the element now copied from the Style Guide using the instructions above, select the tab that contains the destination page.
2. Place your mouse over any elements that already exist, and click on the downfacing caret to the right of Edit that will appear, then choose either Insert Above, or Insert Below. Alternatively, if no items exist to Insert Before or Insert After, simply click the plus (+) sign button and allow the system to load the widget library.
3. On the widget options screen, select the Paste Shared 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 SchoolNow 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.