Themes are collections of CSS, JavaScript, and other asset files that determine a page's visual style and behavior, including fonts, colors, spacing, and form styling. This article covers accessing Themes in Finalsite Composer, creating one, configuring each setting, and managing asset files.
💡 Quick answers
- Where are Themes managed? In the Composer left navigation, under the Composer section. Visibility depends on Composer permissions; a missing Themes area means asking the main site administrator for access.
- How is a new theme created? Scroll to the bottom of the Themes left nav and click New Theme for a blank theme, or click the Clone button on an existing theme to copy its asset files into a new theme.
- What is the difference between CSS Assets and Form Assets? CSS Assets style page elements; Form Assets style Form elements specifically. Rules under CSS Assets do not apply to Forms. Upload form-specific .css files under Form Assets.
- What goes in the External Assets field? Any code that belongs in the head section of every page using the theme: links to third-party CSS and font files, verification meta tags, tracking pixels, and vendor scripts. New code goes above anything already in the box, and existing entries are never deleted.
- How is a theme applied to multiple pages at once? Use Bulk Style on a parent page in the left navigation. See Apply style in bulk to subpages for the full procedure.
- Why might editing main.css or main.js void the warranty? Theme design assets are deployed by Finalsite and protected by warranty. Modifying them directly may break the warranty and incur fix charges. Add custom code via separate .css or .js files instead.
Themes change the visual, behavioral, and other properties of one or many pages on a site. Applying a different theme changes the font, colors, spacing, and many other aspects of presentation all at once.
Themes incorporate two main components: Cascading Style Sheets (CSS) and JavaScript (JS) files.
In this article
- Access Themes
- Create a new Theme
- Configure a Theme
- Manage Theme assets (linking files)
- Apply Themes to pages
- Utilize Theme assets
- Explore CSS and JavaScript
- Leverage Template Themes
Access Themes
The Themes area is found in the Composer left navigation.
⚠️ Themes is missing from the Composer navigation
Permissions may need to be granted by the main site administrator. Learn more about setting permissions for Themes in Global Composer in the article Composer permissions.
Create a new Theme
- Scroll to the bottom of the left navigation in Themes and click New Theme to create a theme with entirely new files.
- Complete all of the fields in the Theme configuration area. See Configure a Theme for what each field does.
- To start from an existing theme instead, click the clone button in the bottom right corner to Clone this Theme and copy its current asset files into a newly created Theme, then add new files to it.
⚠️ Important Note
The CSS and JavaScript files a site uses are created by Finalsite during deployment. Additional CSS definitions and JavaScript can be added, or a new theme created with entirely new CSS and JavaScript files. Learn more in the article Adding your own CSS or JavaScript assets to a theme.
Configure a Theme
Select an existing theme to configure its settings.
- Theme Name: Give each theme a unique name, for example "Athletics Theme".
- Class: Define a set of attributes for created objects to customize the CMS for specific needs.
- External Assets: Code that loads in the head section of every page using this theme. Two kinds of content belong here: links to third-party files not hosted on the site, such as external CSS files and font files, entered as a full URL; and code supplied by an outside service, such as a verification meta tag, a tracking pixel, or a vendor script. See Adding third-party code to your site.
- CSS Assets: CSS controls the design, format, and layout of a page or website. CSS files are lists of rules, called definitions, that instruct a browser how to display page elements. To make all text on a page purple, for example, one or more CSS rules tell the browser to do so. Click the green + button to add additional .css files to the existing defaults.
- JavaScript Assets: JavaScript controls the interaction and behavior of elements on a page or website. JavaScript files, sometimes called plugins, are small self-contained code sequences that a browser runs when a page loads. Click the green + button to add additional .js files to the existing defaults.
- Form Assets: Upload .css files specifically for styling Forms.
- Powered by Finalsite location: Select where this message should display.
- Theme Environment: Toggle between Base, which includes JavaScript and HTML/CSS, and jQuery v3, a JavaScript library that simplifies a number of common tasks.
Working in the External Assets field
External Assets is separate from the CSS Assets, JavaScript Assets, and Form Assets fields on the same theme. Those fields control the design and behavior of the site and include files deployed by Finalsite under warranty. External Assets only adds to the head section, so editing it does not touch page content, layout, or any protected design file.
- Add above, never replace. New code goes at the very top of the box, above anything already there. Existing entries stay exactly as they are; other tools on the site depend on them.
- The setting is per theme. Code added here runs only on pages using this theme.
- Publishing is required. Clicking Update saves the change. The homepage must be published before the code reaches the live site.
- A grayed-out field means access has not been granted. Refresh the page. Access is granted by the implementation team at launch. If the field is still grayed out, contact the Project Management Team.
Services describe the code they supply as a helper script, helper code, install code, integration code, tracking code, or JavaScript snippet. All of it belongs here when the service says the code runs sitewide. See Adding third-party code to your site.
Depending on project scope and package level, Finalsite may create multiple themes for a site.
- A district client may have a unique theme for the district site and one theme for all of the school sites.
- An athletics microsite may use different CSS and JavaScript files than the main Composer site. Custom designs from microsites or past website designs are often unique to that site and may not be intended to work on the main Composer site, or the reverse.
Manage Theme assets (linking files)
Themes rely on CSS and JavaScript to modify page appearance and behavior. Use the following fields to link asset files with the Theme:
- CSS Assets: Use the green + button to upload new .css files to File Manager and include them in the theme. The most recently uploaded files take precedence.
- JavaScript Assets: Use the green + button to upload .js files to the site and include them in the current theme.
- Form Assets: Upload .css files here specifically for styling Form elements. Definitions uploaded to the general CSS Assets field cannot be applied to Form elements.
- External Assets: Link to third-party resources not hosted on the site, such as external CSS files and font files, using the full URL. This field also holds code supplied by an outside service, including verification meta tags, tracking pixels, and vendor scripts.
Apply Themes to pages
- Apply a Theme to a single page: Use the Theme dropdown in the Page Layout and Appearance window.
- Apply Themes in bulk: Use the Bulk Style option on a parent page in the left navigation to apply one theme to a group of pages at once. Learn more in the article Apply style in bulk to subpages.
Utilize Theme assets
- Uploading CSS Assets: Upload new CSS files to File Manager. The most recently uploaded files take precedence.
- Uploading JavaScript Assets: Upload JavaScript files to include them in the current theme.
- Applying Form Assets: Apply CSS rules to Form elements by uploading the corresponding CSS file here.
- Using External Assets: Link to external CSS files, font files, and other third-party assets, and add code supplied by an outside service. See Adding third-party code to your site for the procedure.
Explore CSS and JavaScript
CSS controls the look of a site, while JavaScript dictates its interaction and behavior.
- CSS files are lists of rules, called definitions, that instruct a browser how to display page elements. To make all text on a page purple, for example, create CSS rules that tell the browser to do so.
- JavaScript controls the interaction and behavior of elements on a page or website. JavaScript files, sometimes called plugins, are small self-contained code sequences that a browser runs when a page loads.
See the article Adding your own CSS or JavaScript assets to the theme for more detailed steps and best practices.
⚠️ Important Note
Any modification made directly to the Theme design assets, main.css or main.js, may break the warranty. Fixing issues caused by modifying the theme design assets may incur additional charges.
Leverage Template Themes
Finalsite offers package Template Themes with specific layouts. These provide an affordable approach to modern responsive web design.
When a Template Theme is selected:
- The Professional Services team works with the site owner to customize the site's font, colors, and logos.
- The design and layout of a Template Theme package are warrantied as-is and cannot be customized. Assistance is available for fixing any bugs or issues.
Comments
Please Sign in to leave a comment if you don't see the comment box below.