...
| 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
...
Normally this approach won't be required with Theme Builder 3 because you can use Layout Hierarchy to centrally define your CSS and then have child layouts automatically inherit that CSS and any subsequent changes.
| Expand |
|---|
| What syntax should I use? |
|---|
| What syntax should I use? |
|---|
|
When you import a CSS file the syntax is generally in the form: | Code Block |
|---|
@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: | Code Block |
|---|
@import url(/download/attachments/7286/bar.css);
|
|
Imported CSS Resources are loaded before the Custom CSS and IE CSS. For more details, please see Style Sheets 3.x.
If you are using a Content Delivery Network (CDN) to host CSS files externally, please refer to the CDN documentation for information regarding best practice regarding importing of CSS files.
...
For more information on how layouts inherit from their parent layouts, please see Layout Hierarchy.
Use panel CSS for this layout
...
| 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.
|
| Expand |
|---|
| Can I add CSS resources for specific versions of specific browsers? |
|---|
| Can I add CSS resources for specific versions of specific browsers? |
|---|
|
Currently the only browser-specific CSS you can add is for Internet Explorer 5.5 and above using the USERGUIDE:IE CSS resource. At present, there's no way to add CSS for specific versions of Internet Explorer or other browsers. It's on our to-do list and will hopefully appear in a future version of the plugin.
|
| 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.
|
| 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;
}
|
|
...
| Expand |
|---|
| What are the "Use Default..." links? |
|---|
| What are the "Use Default..." links? |
|---|
|
Read Layout Hierarchy to find out 
|
See Also
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.