Theme Builder Plugin

[All Adaptavist Apps]

Page tree

Versions Compared

Old Version 29

changes.mady.by.user Unknown User (gfraser)

Saved on

compared with

New Version 30

changes.mady.by.user Unknown User (gfraser)

Saved on

Key

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

...

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.

Expand
I'm trying to override an inbuilt style but it's not working...
I'm trying to override an inbuilt style but it's not working...

The easiest way to solve this problem is to make your style definition more "specific" than that of the inbuilt CSS.

To make styles more specific, simply include more of the "path" to the element you want to style. For example, you could create a specific style for the text used in list items in the content panel as follows:

Code Block
.atb-page .atb-content li {
 color: #008800;
}

...

  • 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.