Child pages
  • FSS - Colors and Themes

Versions Compared

Key

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

}
{style}

{
:=}
Note
title
Deprecated

This

page

is

currently

deprecated,

and

will

be

removed

shortly.

For

more

up-to-date

documentation,

see

the

[

FSS

Text

|FSS Text - Font size]

and

[

FSS

Themes

|FSS Themes - Mist] demos.{note} {

demos.

Wiki Markup
{div:class=LinksPanel}
{panel:title= On This Page| borderStyle=solid| borderColor=#566b30| titleBGColor=#D3E3C4| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}
{
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. 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
fss-theme-hc.css
fss-theme-hci.css
fss-theme-mist.css
fss-theme-coal.css
fss-theme-slate.css
{code}
{info:width=0|title=Where 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
{info}
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|HTML and CSS Background].

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 - Advanced Layout] and [FSS Layout|FSS - Layout] articles.

h2. Implementing Themes

So far, there are 5 shippable themes:
# High Contrast:
{code:html}
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 them.

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, 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
    
    class="fl-theme-hc"
    

...

  1. High Contrast Inverted
    Code Block
    html
    html
    
    class="fl-theme-hci"
    

...

  1. Mist (Medium

...

  1. Contrast

...

  1. Blue/Grey)

...

  1. Code Block

...

  1. html

...

  1. html
    
    class="fl-theme-mist"
    

...

  1. Coal (Medium

...

  1. Contrast

...

  1. Grey)

...

  1. Code Block

...

  1. html

...

  1. html
    
    class="fl-theme-coal"
    

...

  1. Slate (Low

...

  1. Contrast

...

  1. Grey)

...

  1. Code Block

...

  1. html

...

  1. html
    
    class="fl-theme-slate"
    

...

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

...

Theme Details

High Contrast Black and White

Code Block
html
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

...

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-theme-hci">...</div>
{code}
{{

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>
{code}
{{

fl-theme-mist

...

is

...

the

...

class

...

name

...

for

...

our

...

soft

...

blue

...

theme.

...

Image Added

Coal

Code Block
html
html
<div class="fl-theme-coal">...</div>
{code}
{{

fl-theme-coal

...

is

...

the

...

class

...

name

...

for

...

our

...

medium

...

contrast

...

grey

...

theme.

...

Image Added

Slate

Code Block
html
html
<div class="fl-theme-slate">...</div>
{code}
{{

fl-theme-slate

...

is

...

the

...

class

...

name

...

for

...

our

...

low

...

contrast

...

grey

...

theme.

...

Image Added