[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
Where are the "Use Default..." links for these CSS resources?
Where are the "Use Default..." links for these CSS resources?

These CSS resources use a different form of inheritance. Please see Style Sheet Inheritance for more details.

Custom CSS

...

Expand
How do I centrally define some CSS to use in multiple layouts?
How do I centrally define some CSS to use in multiple layouts?

Define your main CSS in a parent layout and then create child layouts based on that parent layout - by default the CSS defined in the parent layout will be included in all the child layouts. Changing the CSS in the parent layout will instantly update all the child layouts.

You can add additional CSS in the child layouts using the USERGUIDE:Custom CSS and USERGUIDE:IE CSS resources. If you add styles to the child layout that are already defined in the parent layout, they will override the styles defined in the parent layout because they are output after the parent layout styles. (hope that makes sense!)

The USERGUIDE:Merge this layout's CSS with it's parent's setting allows you to define whether a child layout also includes the CSS from the parent layout.

You can find more information on our Style Sheet Inheritance page.

Expand
How do I define CSS for a specific panel?
How do I define CSS for a specific panel?

Simply include the appropriate panel class in your style definition. For example, if you wanted to make the Heading 1 text in the left sidebar red, you would define:

Code Block
.atb-leftSidebar h1 {
 color: #ff0000;
}

For a list of the available panel classes, please see Panel Classes and IDs.

...

The following pages contain additional useful information relating to style sheets:

  • Style Sheet Inheritance - style sheet resources accessed from this tab use a different type of inheritance to the rest of the theme
  • Style Sheets 3.x - technical overview of the style sheets used in Theme Builder 3.x
  • Panel Classes and IDs - if you need to specify CSS that affects a specific panel, this lists the classes you can use to make your CSS more specific.
  • Style Sheets Overview - this shows how various CSS resources are included in the layout.
  • 70 CSS tips and tricks - this external guide has loads of useful CSS tips and tricks but be warned that not all of them will work in a dynamic application like Confluence.