Themes general info

Themes set the visual style for a site, a page, or a group of pages. By applying a different theme to a page, you can change the font, colors, spacing and many other aspects of its presentation all at once. Themes incorporate two main components: Cascading Style Sheets (CSS) and JavaScript (JS).

CSS files are lists of rules (called "definitions") that instruct a user's browser how to display various page elements. If you want all the text on your page to be purple, for instance, you can create a CSS rule that tells each site user's browser to do just that.

A theme can also extend the functionality of a page by including JavaScript files. JavaScript files (sometimes called "applets") are small, self-contained code sequences -- essentially, miniature programs that a user's computer runs when a page loads. One use case for JavaScript is MathJax, a JS program that allows you to display mathematical equations on your website using regular keyboard characters.

In addition to CSS files and JavaScript, a theme can incorporate third-party fonts and other assets designed to modify the appearance of page content. You can also control which social media sharing icons will show on pages and certain elements that use sharing icons.

Finalsite may create multiple themes, depending on your deployment process. For example, an Athletics microsite may use a Best Practice Template (BPT) that has different CSS and JavaScript files than are used for the main Composer site. Custom designs from BPTs may not be intended to work on the main Composer site, and vice versa, as those customizations are often unique for the site.

Creating and editing themes

The CSS and JavaScript files used by your site are created by Finalsite during the deployment process, but you can add additional CSS definitions and JavaScript, or create a new theme with entirely new CSS and JavaScript files.

To create or edit a theme, go to the "Themes" section of the left-hand Composer navigation. Select an existing theme to edit, or click "Add New Theme" to create a new one. Be sure to give your new theme a unique name.

Please see our article Add your own CSS or JavaScript assets to the theme for more detailed steps and also some best practices.

Applying themes

After a theme has been created, it can be applied to a page using the "Theme" dropdown in the Page Layout and Appearance window. As with banners, you can also bulk-apply a theme to an entire group of pages by using the "Bulk Style" option on a parent page in the left-hand navigation.

Theme assets

Themes rely on CSS and JavaScript to modify pages' appearance and behavior. There are several ways to link asset files with a Theme:

  • CSS Assets: If you have a new CSS file that you want to use on your site, you can upload it to a folder in File Manager using the green "+" button next to the "CSS Assets" section. Note that each successive file you upload will take precedence over the ones uploaded previously. In other words, the CSS definitions at the bottom of the list will be prioritized over those higher up in the list.
  • JavaScript Assets: Use this field to upload JavaScript files to the site and include them in the current theme.
  • Form Assets: If you want to apply CSS rules to any Form element, the corresponding CSS file must be uploaded here. (Definitions uploaded to the "CSS Assets" field cannot be applied to Form elements.)
  • External Assets: Use the External Assets field to link to a CSS file, font file or other asset that is NOT hosted on your site. Be sure to include the full link to whatever you want to add, including the "http://" at the beginning of the URL.

Template Themes

Finalsite offers a number of Template Themes, and each one is created with a specific layout. Template Themes provide schools, districts, and associations with an affordable approach to modern responsive web design.

When you select a Template Theme, you’ll work with our deployment team to customize the site’s font, colors, and logos to match your school -- making it feel like the site is unique to you! Template Themes are meant to provide use of the Composer elements out of the box and without some of the more custom enhancements.

The design and layout of a Template Theme package are warrantied as is and are not able to be customized. However, we are always happy to assist in fixing any bugs or issues with the Template Theme.

Note: Any modification directly to the Theme design assets (CSS or JS) may break the warranty. Fixing issues that occur due to modification of the theme design assets may incur additional charges.

Was this article helpful?
2 out of 3 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.