Composer Themes overview

Avatar
Misty Flowers

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, 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; missing the Themes area means asking the main site administrator for access.
  • Creating a new theme? 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's 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 does the External Assets field link to? Third-party resources not hosted on the site (e.g., external CSS files, font files). Use the full URL to link them.
  • Applying a theme 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 allow you to quickly change the visual, behavioral, and other properties of one or multiple pages on your site. By applying a different theme, 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) files.

In this article

Accessing Themes

The Themes area is found in Composer left-hand navigation.

themes in composer navigation.png

Don't see Themes in Composer navigation?

You may need to request permissions to be granted for you by your main site administrator. Learn more about setting permissions for Themes in Global Composer by checking out 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. Jump down to the Configure a Theme section to learn more about how to fill out each field.
  • Or, you may wish to click the clone button in the bottom right corner to Clone this Theme and copy its current asset files into a newly-created Theme, before adding your own files.

Important Note

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

  • Theme Name: Give each theme a unique name (e.g., "Athletics Theme").
  • Class: Define a set of attributes for created objects to customize the CMS for specific needs.
  • External Assets: These are resources like CSS, JavaScript files, images, fonts, and other media that are linked to an HTML document but are not embedded directly within the HTML code. This helps keep your HTML code clean and organized. 
  • CSS Assets: 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. Click the green "+" button to add additional .css files to the existing defaults.
  • JavaScript Assets: 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. 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 to select between Theme Environment Base (which includes JavaScript, HTML/CSS) and jQuery v3 (which is a specific JavaScript library that simplifies your tasks in different ways.  

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 the district site and one theme for all of the school sites.
  • Another case may be an Athletics microsite that has different CSS and JavaScript files than the ones used for the main Composer site. Custom designs from microsites or past website designs may not be intended to work on the main Composer site, and vice versa, as those customizations are often unique for the site.

Managing 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 file here specifically for styling Form elements. (Note: Definitions uploaded to the general "CSS Assets" field cannot be applied to Form elements.)

  • External Assets: Link to third-party resources NOT hosted on your site (e.g., external CSS files, font files). Include the full URL.

Applying Themes to pages

  • Apply a Theme to a single page: Apply a theme using the Theme dropdown in the Page Layout and Appearance window.
  • Apply Themes in bulk: Use the Bulk Style option to select and apply one theme simultaneously to a group of pages using the Bulk Style option on a parent page in the left-hand navigation. Learn more in the article, "Apply style in bulk to subpages." 

Utilizing 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.
    Linking External Assets: Link to external CSS files, font files, or other third-party assets.

Exploring CSS and JavaScript

CSS controls the look of your site, while JavaScript dictates the interaction and behavior of your site. 

  • CSS files are lists of rules (called "definitions") that instruct a user's browser how to display various page elements. For example: To make all text on your page purple, create CSS rules that tell the web 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 user's browser runs when a page loads.

Check out our article "Adding your own CSS or JavaScript assets to the theme" for more detailed steps and best practices.

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

Leveraging Template Themes

Finalsite offers package Template Themes with specific layouts. These provide an affordable approach to modern responsive web design. 

When you select a Template Theme:

  • You will work with the Professional Services team 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. However, assistance is available for fixing any bugs or issues.
Was this article helpful?
3 out of 9 found this helpful

Comments

0 comments

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