Themes set the visual styling for a site, a page, or a group of pages. By applying a different theme to a page, you could possibly 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) files.
CSS is used to control the design, format, and layout of a page or website. CSS files are lists of rules (called "definitions") that instruct a user's browser how to display various page elements. For example, if you want all the text on your page to be purple, then you can create one or more CSS rules that tells the web browser to do so.
Javascript is used to control the interaction and behavior of elements on a page or website. JavaScript files (sometimes called "plugins") are small, self-contained code sequences that a user's browser runs when a page loads.
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 via the External Assets box. You can also control which social media sharing icons will show on pages and certain elements that use sharing icons.
Depending on your project scope and package level, Finalsite may create multiple themes for your site. For example, a district client may have a unique theme for each school in the district. Another case may be an Athletics microsite using a Best Practice Template (BPT) that has different CSS and JavaScript files than the ones 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 "New Theme" to create a new one. Be sure to give your new theme a unique name. You can also clone an existing theme if you want the same asset files already attached, then add your own files.
Please see our article Add your own CSS or JavaScript assets to the theme for more detailed steps and also some best practices.
Note: Any modification directly to the Theme design assets (main.css or main.js) may break the warranty. Fixing issues that occur due to modification of the theme design assets may incur additional charges.
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/right in the list will be prioritized over those at the top/left in the list.
- JavaScript Assets: Use this field to upload JavaScript files to the site and include them in the current theme. Click the green "+" button in the "JavaScript Assets" section.
- 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 third-party 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 package 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 Professional Services 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.
Comments
Please Sign in to leave a comment if you don't see the comment box below.