...
There are several options which allow you to further customise which CSS resources are used by the layout. These options are intended for "power users" who need extreme levels of control in their quest for perfection.
Image Removed
...
Image Added
Inherit the CSS from the parent layout(s)
By default, a layout will inherit the CSS defined in it's parent layout. For more information on this process, see Layout Hierarchy and Style Sheet Inheritance.
There may be cases where you want to start from scratch, and not import the Custom, IE and Import CSS from the parent layout in which case you can disable this option.
...
Include CSS defined in the Layout Tab
The panel CSS is defined using the Panel Editor in the Layout Tab. It's a quick and easy way to set the majority of styles such as backgrounds, borders, text settings, etc.
...
Tip: You can turn off this option and then restrict CSS editing privileges to prevent people from customising the CSS in your layout.
...
Include Theme Builder's CSS enhancements
Theme Builder has a small amount of "in-built" CSS which ensures that certain elements (such as access key hits, page trees, etc) display correctly.
...
| Expand |
|---|
| What's in the inbuilt CSS? |
|---|
| What's in the inbuilt CSS? |
|---|
|
The exact contents of the inbuilt CSS change slightly from version to version, but they will be similar to this: | No Format |
|---|
/* 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;
}
|
|
...
Include Atlassian's default CSS
...
As of Theme Builder 3.0, we have started to include Atlassian's master Confluence style sheet, known as "main-action.css". This contains all the core styles used by Confluence, including those for the page editor, the browse space screens, most bundled macros and more.
...
However, because it contains so many styles it can sometimes get in the way of your own style sheets. Should the need arise, you can disable Atlassian's Confluence style sheet with this option (not recommended as you'll need to add quite a lot of Custom CSS to make up for the missing styles).
Include CSS styles for the deck & card macros
In Theme Builder you can now include the aqua, tan, red & green styles in the combined css resource for use with the composition plugin's deck & card macros. Enabling this option allows you to quickly and easily apply some basic styles to these macros.
Tip You will need to have the free Composition Plugin installed in order to use the deck and card macros.
| Expand |
|---|
|
Basic UseAdd the deck & card macros to a page to create a tabbed panel which is ideal for separating out blocks of related content | Code Block |
|---|
{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: | Wiki Markup |
|---|
{composition-setup}{composition-setup} |
| Wiki Markup |
|---|
{deck:id=my_deck} |
| Wiki Markup |
|---|
{card:label=Card 1} |
This is the first tab's content | Wiki Markup |
|---|
{card:label=Card 2} |
This is the second tab's content
Add CSS styles to your deck & card macrosTo apply a CSS style simply add the appropriate class to the deck macro | Code Block |
|---|
{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: | Wiki Markup |
|---|
{deck:id=my_deck|class=green} |
| Wiki Markup |
|---|
{card:label=Card 1} |
This is the first tab's content | Wiki Markup |
|---|
{card:label=Card 2} |
This is the second tab's content The other classes you can you use are aqua, tan and red
|
FAQ's
| Expand |
|---|
| Where can I find a list of all CSS used by the theme? |
|---|
| Where can I find a list of all CSS used by the theme? |
|---|
|
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.
|
...