Styling A Generated Template

Generally speaking, Bright templates are designed to primarily function with very little CSS, so that they will adapt to your site theme.

Should you require some added styling, this document covers how to use CSS selectors to style you Bright template using regular CSS stylesheets. Since Bright lets you render templates in the page, you can also hook into the Bright lifecycle to run javascript after the template renders.

By default, a bright shortcode like this:

[bright template="bright-learning-path" type="courselist" path="module1" model="simple"/]

Will result in a generated div

<div id="bright-courselist-1d207a8e231508b0e39c06a5fc8aa4e8" class="inline bright-courselist bright-template-bright-learning-path">

Note:

• you can use a hardcoded div "id" attribute and your div will pick this up as it's id="" attribute. See this for how.
• the template type becomes a class of the div, so if the type is courselist, the generated div will have a class of "bright-courselist".
• the template name also becomes a class, as in template name of bright-learning-path becomes a CSS class of "bright-template-bright-learning-path".

Setting a Style Directive for an individual template

Use the id= attribute as above [do not re-use IDs in the same page]

[bright id='my-id']

then you can do:

div#my-id {
   //  CSS 
}

In your style.css.

Setting a Style Directive for all template types:

[bright type="courselist"]

And then

div.bright-courselist th {
    padding-right: 8px; // use this padding in the header of all courselisters on the site
}

Setting the style for a particular template

[bright template="custom"]

div.bright-template-custom a { 
  display: none; // hide anchor links in the custom template 
}

• Bright Shortcode Reference
• Altering a Generated Template After It Renders