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 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.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Apple News