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

This walkthrough details how to use the Helpers 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, "helpersthemes" refers refer to the convenience classnames and ready-made GUI setups 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 FSS: Helpers 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 Fluid Skinning System (FSS) introduction.

...

borderfalse

...

width65%

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 class names, you will need to include the following files in the <head> of your document:

Code Block
html
html

fluid.layout.
fss-theme-hc.css
fluid.
fss-theme-hci.
hc.
css
fluid.
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.

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 - Themes to help give these helpers a unified appearance (a.k.a. themes) or customize their look.
All FSS classnames
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

...

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

...

class names behaves you

...

can easily override

...

or extend

...

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

them.

What is a

...

Theme?

When you read For the FSS Tutorials and Walkthroughs - Layout article, you might notice thats it's mostly a lot of "convenience" classnames which do several things at once to make laying out a page easier. These conveniences are taken further to create FSS Helpers. Instead of laying out intangible concepts like invisible wrappers and grid containers, you would use FSS Helpers to make GUI things like toolbars, widgets, menus and tabs.

To use FSS Helpers, you need to loosely follow the markup model we have provided, and then apply the appropriate helper classname.

Please note: this document assumes you have already read FSS Tutorials and Walkthroughs - Layout article.

Utility Helpers

Icons

...


<a href="#_bottom" class="fl-icon myCustomToolIcon" title="Tool Description">Tool</a>

fl-icon is a small icon helper, which is useful in when you want to make nicely accessible icons. Often when you want to make icons you would use either: an empty anchor with a background image; or an anchor with an image as the content. For people who have low-vision, these icons are not helpful since they cannot always adjust the size of icon properly. These icons also don't allow for effective search engine indexing since there is little useful content associated with the icon (just the title and href) - see "Use descriptive anchor text" in the Official Google Blog.

What the fl-icon does is set up your icons at a certain size (16 x 16 pixels), and allow you to place text in your anchors without it showing or compromising the visual aesthetic. Its does this by making the links block level elements with a large negative text indent to "pull" the text outside of their clipping region.

When used in conjunction with the FSS hich contrast themes, the icon image is effective replaced with the icon text, allowing for ideal icon useability.

Widget Helper

Basic Widget

Image Removed

In the first example on the FSS: Helpers Functional Demo page, we have a basic Widget. Widgets in the FSS have been generally modelled after the MyCamTools UX enhancement model which has 3 main components: a titlebar, options, and content (in that order).

The markup looks like:

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.

Since this is a highly subjective area of the FSS CSS, it is very likely that you would want to customize the themes further to suit your needs. However, themes are built in a purposeful way so that they fulfill specific needs, such as; high contrast colors for the visually impaired, the resetting of italic/oblique styles to normal to avoid problems with dyslexia, the enhacement of links to stand out, and color combinations known to be comfortable to read.

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

Implementing Themes

So far, there are 5 shippable themes:

  1. High Contrast:
    Code Block
    html
    html
    
    

...

  1. class="fl-

...

  1. theme-

...

  1. hc"

...

  1. 
    

...

  1. High Contrast Inverted
    Code Block
    html
    html
    
    

...

  1. class="fl-

...

  1. theme-

...

  1. hci"

...

  1. 
    
  2. Mist (Medium Contrast Blue/Grey)
    Code Block
    html
    html
    
    

...

  1. class="fl-

...

  1. theme-mist"

...

  1. 
    

...

  1. Coal (Medium Contrast Grey)
    Code Block
    html
    html
    
    

...

  1. class="fl-

...

  1. theme-

...

  1. coal"

...

  1. 
    

...

  1. Slate (Low Contrast Grey)
    Code Block
    html
    html
    
    

...

  1. class="fl-

...

  1. theme-

...

  1. slate"

...

  1. 
    

...

fl-widget-options identifies the options for the widget, which is outlined as an unordered list of things. This section is not required.

...


<div class="fl-widget-content">

fl-widget-content identifies the content for the widget, which can be anything - even another widget. If you need to pull in external web pages, an iframe would work well here.

Advanced Themed Widget

...

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

Code Block
html
html
<div classid="fl-container-300 fl-theme-mist">
    <div rootContainer" class="fl-widgetnavbar">
        <div class="fl-widget-titlebar">
            <a class="fl-force-left fl-icon more" href="#_bottom">More</a>
            <a class="fl-force-right fl-icon close" href="#_bottom">Close</a>
            <a class="fl-force-right fl-icon settings" href="#_bottom">Settings</a>
            <h2>Tools</h2>
        </div>                    
        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Add Tools</a></li>
                <li><a class="fl-icon viewOptions" href="#_bottom">Toggle View</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <ul class="fl-listmenu">
                <li><a href="#_bottom">Home          <span class="fl-icon delete">[remove]</span></a></li>>Nav link</a><li>
                <li><a href="#_bottom">Profile       <span class="fl-icon delete">[remove]</span></a></li>>Nav link</a><li>
                <li><a href="#_bottom">Memebership   <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Schedule      <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Resources     <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Worksite Setup<span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Preferences   <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Account       <span class="fl-icon delete">[remove]</span></a></li>
            </ul>
        </div>
    </div>
</div>

Here is an exploded view of what's going on:

...


<div class="fl-container-300 fl-theme-mist">

...

>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-widgettheme-hc">

This is classname is required on the widget container, same as the previous example.

...


<div class="fl-widget-titlebar">
     <a class="fl-force-left fl-icon more" href="#_bottom">More</a>
     <a class="fl-force-right fl-icon close" href="#_bottom">Close</a>
     <a class="fl-force-right fl-icon settings" href="#_bottom">Settings</a>
     <h2>Tools</h2>

fl-widget-titlebar identifies the container for the titlebar. Now, we can see some useful functionality embedded into the titlebar such as more options, close widget, and widget settings all surrounding the h2 title itself.

fl-icon is a small icon helper, which is useful in when you want to make highly accessible and readable icons. Please see #Icons for more information.

...</div>

fl-theme-hc is the 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 class names such as fl-icon you can enhance your content's readability and/or useability by actually manipulating content.

Image Added

High Contrast Inverted Black and White

Code Block
html
html
        <div class="fl-widgettheme-options">
            <ul>
                <li><a href="#_bottom">Add Tools</a></li>
                <li><a class="fl-icon viewOptions" href="#_bottom">Toggle View</a></li>
      ...hci">...</div>

fl-widgettheme-optionshci is the container for the widget options, which is a list. In this example each list item is a text link, and one has an fl-icon classname, which is modified to a larger size (32 x 16 pixels) by viewOptions

...


<div class="fl-widget-content">

fl-widget-content is the content container for the widget, which in this case is another helper system:

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     <ul class="fl-listmenu">
         <li><a href="#_bottom">Home <span class="fl-icon delete">[remove]</span></a></li>
         ...theme-mist">...</div>

fl-listmenu is another helper classname. It is a basic navigation menu. Please see #Menu Helper for more information. This list menu contains links, as well as nessted icons inside the menu links.

Tabs Helper

Basic Tabs

Image Removed

Tabs are a very common GUI paradigm, but they can be tricky to implement across all Grade-A browsers. Fortunately, FSS ships a simple Tabs Helper to help solve this problem. The Tabs helper has only one requirement, which is the tabs must be in a list.

The markup looks like:

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

Image Added

Coal

Code Block
html
html
        <div class="fl-container-750 fl-centered">
            <ul class="fl-tabs fl-tabs-center">
                <li class="fl-activeTab"><a href="#_bottom">Active Tab</a></li>
                <li><a href="#_bottom">Tab #2</a></li>
                <li><a href="#_bottom">Tab #3</a></li>
            </ul>
            <div class="fl-tab-content"> 
                Content
            </div>
        </div>

Here is an exploded view of what's going on:

...


<div class="fl-container-750 fl-centered">

This is the usual container, 750 pixles wide and centered on the page

...


<ul class="fl-tabs fl-tabs-center">

fl-tabs is the required classname to start, placed on the required list container. The second class fl-tabs-center is optional, and is only for tab alignment. The available options for alignment are fl-tabs-left for left alignment (default), fl-tabs-right for right alignment, fl-tabs-center for centered alignment.

...


<li class="fl-activeTab"><a href="#_bottom">Active Tab</a></li>

fl-activeTabs is used to hilight the currently active tab, and is optional.

theme-coal">...</div>

fl-theme-coal is the class name for our medium contrast grey theme.

Image Added

Slate

Code Block
html
html
<div class="fl-tabtheme-content"> 

fl-tab-content is an optional peice of the tabs helper system, and is simply styled to nicely "snap" to the tabs themselves. It is intended to work in conjunciton with the fl-activeTab class to complete the look of activated tab content block.

Menu Helper

Basic Menu

Image Removed

The Menu helper is a simple vertical menu. It requires a list with an anchor inside each list item. You can place children inside or siblings alongside the anchors.

The basic markup may look like:

...


<div class="fl-container-200 fl-centered">
    <ul class="fl-listmenu">
        <li><a href="#_bottom">Menu item #1</a></li>
        <li class="fl-activemenu"><a href="#_bottom">Active Menu item</a></li>
        <li><a href="#_bottom">Menu item #3</a></li>
        <li><a href="#_bottom">Menu item #4</a></li>
        <li><a href="#_bottom">Menu item #5</a></li>
    </ul>
</div>

Here is an exploded view of what's going on:

...


<div class="fl-container-200 fl-centered">

This is the usual container, 200 pixles wide and centered on the page

...


    <ul class="fl-listmenu">
        <li><a href="#_bottom">Menu item #1</a></li>
        <li class="fl-activemenu"><a href="#_bottom">Active Menu item</a></li>

Here, the fl-listmenu classname goes on the list container. Inside the container are list items, and then anchors.
Just like for fl-activeTab, fl-activemenu is an optional classname that identifies a list item to stand out and look "active".

slate">...</div>

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

Image Added