Page History

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 Custom CSS and 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 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.

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 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; }

Internet Explorer has a really nasty bug. It only looks at the last class!

For example, let's say you have CSS like this:

Code Block
.foo { color: green; } .bar.foo { color: red; }

And then somewhere on a wiki page the following notation:

Code Block
{div:class=foo}This should be green{div} {div:class=foo bar}This should be red{div}

In all other browsers, the text colours will be correct. However in Internet Explorer all of the text would be red! This is because Internet Explorer sees .bar.foo as just .foo (it only looks at the last part) and because the style for .bar.foo comes after the style for .foo it overrides the style for .foo making that text red instead of green.

To work around this problem, you need to make slight tweaks, for example:

Code Block
.foo { color: green; } .foo.bar { color: red; }

So Internet Explorer sees .foo.bar as .bar. Obviously, you're still going to get problems, but that's just something we have to live with until Microsoft manage to make a standards compliant browser (which is extremely unlikely).

Some browsers (Internet Explorer) and some web pages (generally XHTML pages) result in case-sensitive CSS.

For example, if you had this on a wiki page:

Code Block
{span:class=FooBar}Wibble!{span}

Your style definition would need to be:

Code Block
.FooBar { color: blue; }

Read Layout Hierarchy to find out