Child pages
  • FSS - Colors and Themes

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Overview

This walkthrough details how to use the Themes
Section
borderfalse
Column
width65%
CSS Stylesheet

.LinksPanel {
float:right;
clear:right;
width:400px;

}
Note
titleDeprecated

This page is currently deprecated, and will be removed shortly. For more up-to-date documentation, see the FSS Text and FSS Themes demos.

Div
classLinksPanel
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
Table of Contents
maxLevel5
minLevel2
Include Page
FSS Links Panel
FSS Links Panel

Overview

Themes are new in v1.1.

This walk-through accompanies the FSS: Themes Functional Demo in describing how to used the Themes functionality of the Fluid Skinning System (FSS). Here, "themes"

...

refer to the color schemes and "window dressings" for basic markup and FSS Helpers, such as Tabs, Widgets, Menus, etc.

...

This walkthrough is meant as an accompaniment to the Theming Functional Demo, and not as an introduction to CSS or how it works. That information is out of the scope of this document and can be found at the W3C.

For an in-depth article on how the FSS uses CSS and makes it modular, please see the FSS - Feature Roadmap introduction.

Column
width35%
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn This Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5

Getting Started

It is written under the assumption that readers have reviewed the Fluid Skinning System (FSS) introductory article and understand what the FSS is.

For information about customzing themes by overriding FSS styles, see the "Overriding" section of the FSS introductory page.
For more information about the walk-throughs in general, links to functional demos and FSS style sheets, please refer to FSS - Getting Started.

Before continuing with this article, it is highly recommended that you glance over the following walk-throughs as they explain certain concepts in detail:

  1. FSS - Layout to give you an overview of how layout in the FSS works.
  2. FSS - Advanced Layout to take FSS Layout further, from simple containers to Widgets and GUI systems.

Incorporating the Style Sheet

In order to use the FSS Theme classnamesclass names, you will need to include the following files in the <head> of your document:

Code Block
html
html
fluid.fss-theme.-hc.css
fluid.theme.fss-theme-hci.css
fss-theme-mist.css
fluid.theme.rust.css

It is optional, though recommended, that you use a CSS "reset" file. A CSS reset file is usually a large group of basic rules to normalize the CSS differences inherent to all browsers.

There are many CSS reset files available, including YUI CSS Reset, Eric Meyers' Reset or our FSS Reset file:

Code Block
fluid.reset.css

... which is based on the YUI Reset file.

This file would need to go before any other CSS data in your page.

It is highly recommended that glance over the following walkthroughs, as they explain certain concepts in detail:

  1. FSS Tutorials and Walkthroughs - Layout to give you an overview of how layout in the FSS works.
  2. FSS Tutorials and Walkthroughs - Helpers to take FSS Layout further, from simple containers to Widgets and GUI systems.

...

fss-theme-coal.css
fss-theme-slate.css
Info
width0
titleWhere is the Rust Theme?

Please note that while Rust is still part of the FSS bundle, it has been deprecated and is no longer a supported theme

All FSS class names use the fl- prefix. In our demos, if you see other classnames class names without this prefix they are either: complimentary CSS; overriding CSS; or specific extensions of the FSS CSS. This means if you don't like the way a certain classnames class names behaves you could can easily override it or extend itthem.

What is a Theme?

For the FSS, a theme is a collection of color definitions used together in different ways to create a look and feel for markup. You could use a theme as a starting point to give a page a basic appearance, and you could extend FSS Themes for even more detailed and site-specific appearances.

...

Please note: this document assumes you have already read FSS Helpers and FSS Layout articles.

Implementing Themes

So far, there are 3 5 shippable themes:

  1. Rust High Contrast:
    Code Block
    html
    html
    class="fl-theme-rusthc"
    
  2. High Contrast : Inverted
    Code Block
    html
    html
    
    class="fl-theme-hchci"
    
  3. Mist (Medium Contrast Blue/Grey)
    Code Block
    html
    html
    
    class="fl-theme-mist"
    
  4. Coal (Medium Contrast Grey)
    Code Block
    html
    html
    
    class="fl-theme-coal"
    
  5. Slate (Low Contrast Grey)
    Code Block
    html
    html
    
    class="fl-theme-slate"
    

To use FSS Themes, just apply the theme classname class name at the root level of the markup you want to theme. So, if your markup looks like:

Code Block
html
html
<div id="rootContainer" class="navbar">
   <ul class="fl-listMenulistmenu">
      <li><a href="#">Nav link</a><li>
      <li><a href="#">Nav link</a><li>
      <li><a href="#">Nav link</a><li>
   </ul>
</div>

Then you should put the theme on the root node here, changing it to class="fl-theme-mist navbar"

Theme Details

High Contrast Black and White

Code Block
html
html
<div class="fl-theme-hc">...</div>

fl-theme-hc is the classname class name for our main high contrast theme, which is a collection of just black or white elements (no gray or colors). When used with FSS Helpers utility classnames class names such as fl-icon you can enhance your content's readability and/or useability by actually manipulating content.

Image Removed

Image Added

High Contrast Inverted Black and White

Code Block
html
html

<div class="fl-theme-hci">...</div>

fl-theme-hci is the class name for our inverted high contrast theme. Again, when used with FSS Helpers utility class names such as fl-icon you can enhance your content's readability and/or useability by actually manipulating content.

Image Added

Mist

Code Block
html
html
<div class="fl-theme-mist">...</div>

fl-theme-mist is the classname class name for our soft blue theme.

Image RemovedImage Added

...

Coal

Code Block
html
html
<div class="fl-theme-rustcoal">...</div>

fl-theme-rustcoal is the classname for our cream/brown theme.Image Removedclass name for our medium contrast grey theme.

Image Added

Slate

Code Block
html
html

<div class="fl-theme-slate">...</div>

fl-theme-slate is the class name for our low contrast grey theme.

Image Added