Brightspot CMS User Guide

Adding custom <head> elements

Web pages have a <head> element that can contain the following child elements:

  • <link>—Provides links to external resources, such as CSS files.
  • <meta>—Provides the page's metadata, such as character set, keywords, and viewport settings.
  • <script>—Provides behavior, such as displaying a message after the page loads.
  • <style>—Provides styling, such as fonts, colors, and spacing.

You can create customized child <head> elements, and add them to published assets based on various criteria. Examples include the following:

  • If the asset's URL contains the word evening-edition, add a CSS file that gives a softer color scheme.
  • If the asset's content type is Gallery, add a JavaScript file that includes zoom in and zoom out behavior.
Adding incorrect <head> elements can cause your site to malfunction. Ensure you test your custom <head> elements before actually deploying them to a live site.

To add custom head elements to assets:

  1. Create and debug the custom <head> elements you want to add.
  2. Click menu> Admin > Sites & Settings.
  3. In the Sites widget, select site to which you want to add the custom <head> elements.
  4. Click search, located to the left of more_horiz, and type Custom Scripts and Styles.
  5. Click add_circle_outline .
  6. In the Internal Name field, enter a name for this customization.
  7. From the Request Matcher list, select Path Request Matcher.
  8. Using the HTTP Methods, URL Pattern, and Content Types fields, design criteria that the asset must match to receive the custom <head> elements. For example, the following criteria match articles whose URLs contain evening-edition.
    Style script filter
    Filter for adding a style or scripting customization
  9. If an asset matches the filter you designed in step 8, and you do not want to add any additional <head> elements, toggle on Stop Processing.
  10. Configure <head> elements added to the web page by doing the following:
    1. Under Elements, click add_circle_outline .
    2. Select one of the available child elements.
    3. In the subsequent form, enter an Internal Name, and complete the form as necessary.
    4. Repeat steps a–c to configure more <head> elements satisfying this rule.
  11. Repeat steps 5–10 to design additional rules for adding custom <head> elements.
  12. Click Save.

See also:

Previous Topic
Configuring a theme's swatch
Next Topic
Using a different version of a theme
Was this topic helpful?
Thanks for your feedback.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Landing pages
Everything you need to manage and administer content within Brightspot CMS, including plug-and-play integrations.

Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform, including integrations requiring developer support to use.

Field types
Content modeling
Rich-text elements