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. 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 would be 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 similar assets designed to modify the appearance of page content.

Applying Themes

Themes can be created and edited in the "Themes" section of the left-hand navigation. After a theme has been created, it can be applied to a page by using the "Theme" dropdown in the Style pulldown menu at the top of the screen. 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.

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

CSS and JavaScript Assets

Themes rely on CSS and JavaScript to modify pages' appearance and behavior. 

There are three ways to associate CSS files with a Theme.

  • 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.
  • 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 applets to the site and include them in the current Theme.
  • Form Stylesheet - 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.)

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

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