Child pages
  • FSS - Colors and Themes

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{style}
.LinksPanel {
float:right;
clear:right;
width:400px;

}
{style}
{div:class=LinksPanel}
{panel:title= On This Page| borderStyle=solid| borderColor=#566b30| titleBGColor=#D3E3C4| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}
{include:FSS Links Panel}

h2. Overview

This walk-through accompanies the [FSS: Themes Functional Demo|http://build.fluidproject.org/fluidinfusion/fluidstandalone-components/demos/quick-start-examples/fss/html/FSS.-themes.html]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|FSS Walk-through - Advanced Layout], such as Tabs, Widgets, Menus, etc. It is written under the assumption that readers have reviewed the [Fluid Skinning System (FSS)] introductory article and understand what the FSS is.

Learn how to customize FSS Theme classes and override values with the [Overriding FSS] article.
For more information about the walk-throughs in general, links to functional demos and FSS style sheets, please refer to [FSS Walk-throughs - 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:
# [FSS Walk-through - Layout] to give you an overview of how layout in the FSS works.
# [FSS Walk-through - Advanced Layout] to take FSS Layout further, from simple containers to Widgets and GUI systems.

h2. 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:html}
fss-theme-hc.css
fss-theme-hci.css
fss-theme-mist.css
fss-theme-coal.css
fss-theme-slate.css
{code}
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 them|Overriding FSS].

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

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|http://www.4dyslexics.com/dyslexia9.htm], 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|FSS Walk-through - Advanced Layout] and [FSS Layout|FSS Walk-through - Layout] articles.

h2. Implementing Themes

So far, there are 3 shippable themes:
# Rust
{code:html}
class="fl-theme-rust"
{code}
# High Contrast:
{code:html}
class="fl-theme-hc"
{code}
# Mist
{code:html}
class="fl-theme-mist"
{code}

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:html}
<div id="rootContainer" class="navbar">
   <ul class="fl-listMenu">
      <li><a href="#">Nav link</a><li>
      <li><a href="#">Nav link</a><li>
      <li><a href="#">Nav link</a><li>
   </ul>
</div>
{code}
Then you should put the theme on the root node here, changing it to {{class="fl-theme-mist navbar"}}

h2. Theme Details


h3. High Contrast Black and White

{code:html}
<div class="fl-theme-hc">...</div>
{code}
{{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|FSS Walk-through - Advanced Layout] utility class names such as {{fl-icon}} you can enhance your content's readability and/or useability by actually manipulating content.

!theme-hc-sakai-20090106155515.png!

h3. Mist

{code:html}
<div class="fl-theme-mist">...</div>
{code}
{{fl-theme-mist}} is the classname for our soft blue theme.

!theme-mist-sakai-20090106155531.png!

h3. Rust

{code:html}
<div class="fl-theme-rust">...</div>
{code}
{{fl-theme-rust}} is the class name for our cream/brown theme.

!theme-rust-sakai-20090106155551.png!