CSS Tab

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

When you import a CSS file the syntax is generally in the form:

@import url(http://www.adaptavist.com/download/attachments/7286/bar.css);

You should never put quotes around the URL to the CSS file as this will cause problems with some browsers!

Some browsers will block the imported CSS file if it comes from a different domain to your wiki. For example, if your wiki was on www.foo.com and your CSS was on www.bar.com then depending on the browser settings it might not get imported.

To work round that issue, it's always best to store the CSS file on the same domain as your wiki, for example you can attach the .css file to a page in your wiki. For more information see Creating CSS Files.

If your wiki can be accessed from multiple domain names and the CSS file is stored in the wiki, you should use a relative URL, for example:

@import url(/download/attachments/7286/bar.css);

The exact contents of the inbuilt CSS change slightly from version to version, but they will be similar to this:

/* pagetree2 */
.pagetree2 .cell1, .pagetree2 .cell2, .pagetree2 .cell3, .pagetree2 .cell4, .pagetree2 .cell5 {
    white-space:nowrap;
}

/* access keys */
#accessKeys { margin: 0; padding: 0; }
#accessKeys dt { margin: 0; padding: 0; position: absolute; top: -9999px; left: 0; }
#accessKeys dd { margin: 0; padding: 0; }
#accessKeys dd a { position: absolute; top: -9999px; left: 0; }
#accessKeys dd a:focus, #accessKeys dd a:active { background-color: #3556a2 !important; color: #fff !important; top: 0; font-size: 1.2em; padding: .5em; }

/* make headings less ugly */
.atb-page h1, .atb-page h2, .atb-page h3, .atb-page h4, .atb-page h5, .atb-page h6 {
 background-color: transparent;
 border-style: none;
 padding: 0px;
}
.atb-title h1 {
 font-size: 18px;
 line-height: 1.0em;
 margin-top: 0px;
}

/* make breadcrumbs less rancid */
.breadcrumbs {
 background-color: transparent;
 border: 1px none transparent;
}

/* labels in menus */
div.dynarch-horiz-menu .label, div.dynarch-popup-menu .label {
 font-weight: normal;
}

/* allow panel css to set design of menus in .atb-menu */
.atb-menu div.dynarch-horiz-menu {
 background-color: transparent;
 background-image: none;
 border-style: none;
}

/* remove margins from forms */
.marginlessForm {
 margin: 0px;
}

/* don't force search box to be 100% width */
.confluence-searchbox {
 width: auto;
 white-space: nowrap;
}

/* remove padding from PageContent */
.PageContent, .pagecontent {
 padding: 0px;
}

/* ui table (e.g. attachments list) */
.tableview th, .tabletitle, .pageSectionHeader {
 border-bottom-width: 1px;
}
.tableview th, div.tabletitle {
 font-weight: bold;
}
.mode-view-attachments .tableview td {
 border-top: 1px solid #fff;
 vertical-align: middle;
}
.tableview td {
 border-bottom: 1px dotted #ccc;
}
.tableview tr:hover td {
 border-bottom: 1px solid #000;
}
.rowAlternate {
 background-color: #f7f7f7;
}

/* activity screens */
.context-space-activity .pagebody {
 padding: 0px;
}

/* no image borders */
a img {
 border-style: none;
}

/* hide accessibility features by default */
.accessibility {
 display: none;
}

/* left slider */
.atb-leftslider {
 cursor: w-resize !important;
}

/* right slider */
.atb-rightslider {
 cursor: e-resize !important;
}

/* allow special effects on tables, etc. */
.layout {
 direction:ltr;
}

/* inhibit selection where possible */
.noselect {
 -moz-user-select: none;
 cursor: default;
}

/* line spacing */
body, p, li, ul {
 line-height:1.6em;
}

/* citation */
cite:before { content: "\""; }
cite:after { content: "\""; }
cite, cite:before, cite:after {
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
}

/* insertions and deletions */
ins {
 background-color: #DBFFDB;
}
del {
 background-color: #FFE5E5;
}

/* make italics more readable */
i, em {
 letter-spacing: 1px;
}

/* tables */
.confluenceTable {
 border: 1px solid #B2B2B2;
 border-collapse: collapse;
}
.confluenceTable th.confluenceTh {
 background-color: #F5F5F5;
 border: 1px dotted #B2B2B2;
 font-weight: bold;
 font-size: small;
 padding: 3px 4px 3px 4px;
}
.confluenceTable .confluenceTd {
 border: 1px dotted #B2B2B2;
 padding: 3px 4px 3px 4px;
}

/* ExtJS unselectable panels */
.x-unselectable { cursor: default; }

/* skip navigation */
@media screen, print, handheld, projection, tv {
 .non-visual {display: none; visibility: hidden;}
}

/* sliders */
.atb-slider .atb-slider-img {
 width: 9px;
 height: 20px;
}
.atb-leftslider .atb-leftslider-img {
 background-position: top right;
}
.atb-rightslider .atb-rightslider-img {
 background-position: top left;
}

.quicklinks {
 overflow: auto;
}
.quicklinks div {
 clear: none;
 float: left;
 margin-bottom: 4px;
 width: 49%;
}

/* Stop menu items wrapping */
div.dynarch-horiz-menu table tr td {
 white-space: nowrap;
}

/* Provide support for menu spacers */
div.dynarch-horiz-menu table tr td.spacer {
 width: 100%;
}
div.dynarch-horiz-menu table tr td.spacer div {
 display:none;
}

.poweredBy, .poweredBy a {
 color:#909090;
 font-size:small;
}

Basic Use

Add the deck & card macros to a page to create a tabbed panel which is ideal for separating out blocks of related content

{deck:id=my_deck}
  {card:label=Card 1}
    This is the first tab's content
  {card}
  {card:label=Card 2}
    This is the second tab's content
  {card}
{deck}

Which gives:

Unknown macro: {composition-setup}

Unknown macro: {deck}

Unknown macro: {card}

This is the first tab's content

Unknown macro: {card}

Unknown macro: {card}

This is the second tab's content

Unknown macro: {card}

Unknown macro: {deck}

Add CSS styles to your deck & card macros

To apply a CSS style simply add the appropriate class to the deck macro

{deck:id=my_deck|class=green}
  {card:label=Card 1}
    This is the first tab's content
  {card}
  {card:label=Card 2}
    This is the second tab's content
  {card}
{deck}

Which gives:

Unknown macro: {deck}

Unknown macro: {card}

This is the first tab's content

Unknown macro: {card}

Unknown macro: {card}

This is the second tab's content

Unknown macro: {card}

Unknown macro: {deck}

The other classes you can you use are aqua, tan and red

The various CSS resources used by the theme depend on various settings. You can view more information on the Style Sheets 3.x page, including a list of all the menu style sheets, etc.

You can find the URL's to the style sheets by viewing the HTML source of a page and looking for the <link> tags at the top. If you browse to the URL's (remember to add in the path to your wiki at the start) you'll be able to view the CSS in the browser.

Currently the only browser-specific CSS you can add is for Internet Explorer 5.5 and above using the IE CSS resource.

In cases where you absolutely must apply a style to a specific version of a specific browser, there's a useful list of known CSS hacks that you can refer to. It should be noted that we don't recommend using CSS hacks - it's best to find an alternate way of applying your styles wherever possible.

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.

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

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:

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

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

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

And then somewhere on a wiki page the following notation:

{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:

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

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

Your style definition would need to be:

.FooBar {
 color: blue;
}

Read Layout Hierarchy to find out