Add a stylesheet to a page

Abstract

Developers can add their own CSS styles to SPEAK pages.

SPEAK adds default styles according to the SPEAK UI guidelines to all components. Developers do not typically have to modify styles.

However, application functionality and adding new components can make it necessary for you to modify styles. In these situations, you can add a stylesheet to a SPEAK page.

The SPEAK default stylesheet only defines styles for HTML classes. SPEAK assigns the component ID you specify for components to the rendered HTML components as the data-sc-id attribute, so you can target a component with an attribute selector for data-sc-id.

An added stylesheet loads after the SPEAK default stylesheet, so it is possible to overrule settings from the default stylesheet.

To add a stylesheet to a SPEAK page:

  1. Find the value of the data-sc-id attribute of the component either by:

    • Looking at the page HTML source in a browser.

    • Finding the ID of the rendering in Visual Studio.

  2. Create a CSS stylesheet file under the site root, and use the attribute selectors to target the SPEAK components you need to style. For example:

    span[data-sc-id="HeaderTitle"]

    {

    color: red;

    }

  3. Add an item as a child of the PageSettings item of the page. Use the Page-Stylesheet-File item template, and then leave the name of this item as the default (Page-Stylesheet-File):

    99978A1EC45B47D2AE270A80F2C72D32.png
  4. In the Stylesheet field, specify the path to the CSS stylesheet file you have created.

    29ADDCEEF230488D9AA1BDD640F9043D.png