Child pages
  • FSS Advanced Layout - Widgets

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Include Page
Styles for FSS examples
Styles for FSS examples
Section
Column
Include Page
FSS advanced layout examples navigation
FSS advanced layout examples navigation
Include Page
FSS Links Panel
FSS Links Panel
Column

Widgets

In the FSS, a "widget" is a small collection of elements grouped together in a particular, common layout. A widget typically includes a title bar, a few controls, and a content area. Typical uses of a widget might be to group together a set of website tools or favourite links in a sidebar: the content area would list the tools or links, the controls would allow users to add or perhaps sort the list, etc.

The FSS widget classes can be used to help style such a widget. They will apply layout styles to particular elements:

  • <h2> inside the title bar
  • <ul> inside the options

On their own, they don't do much more than this, but in conjunction with the FSS themes, they begin to shape the appearance of the widget.

Section
Column

Widget by itself

HTML
<div class="widget-demos">
<div class="fl-widget fl-container-250 fl-centered">
    <div class="fl-widget-titlebar">
        <h2>My Favourite News Sites</h2>
    </div>
    <div class="fl-widget-options">
        <ul>
            <li><a href="#">Add</a></li>
            <li><a href="#">Sort</a></li>
        </ul>
    </div>
    <div class="fl-widget-content">
        <ul>
            <li><a href="http://cbc.ca">CBC</a></li>
            <li><a href="http://www.nytimes.com/">NYT</a></li>
            <li><a href="http://bbc.co.uk">BBC</a></li>
        </ul>
    </div>
</div>
</div>

The mark-up and classes used to produce this layout:

Code Block
html
html
<div class="fl-widget fl-container-250 fl-centered">
    <div class="fl-widget-titlebar">
        <h2>My Favourite News Sites</h2>
    </div>
    <div class="fl-widget-options">
        <ul>
            <li><a href="#">Add</a></li>
            <li><a href="#">Sort</a></li>
        </ul>
    </div>
    <div class="fl-widget-content">
        <ul>
            <li><a href="http://cbc.ca">CBC</a></li>
            <li><a href="http://www.nytimes.com/">NYT</a></li>
            <li><a href="http://bbc.co.uk">BBC</a></li>
        </ul>
    </div>
Column

Widget within "mist" theme

HTML
<div class="widget-demos">
<div class="fl-theme-mist fl-container-300 fl-centered">
    <div class="fl-widget fl-container-250 fl-centered">
        <div class="fl-widget-titlebar">
            <h2>My Favourite News Sites</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#">Add</a></li>
                <li><a href="#">Sort</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <ul>
                <li><a href="http://cbc.ca">CBC</a></li>
                <li><a href="http://www.nytimes.com/">NYT</a></li>
                <li><a href="http://bbc.co.uk">BBC</a></li>
            </ul>
        </div>
    </div>
</div>
</div>

The mark-up and classes used to produce this layout (this is identical to the code on the left, but wrapped in a single additional <div>):

Code Block
html
html
<div class="fl-theme-mist fl-container-300 fl-centered">
    <div class="fl-widget fl-container-250 fl-centered">
        <div class="fl-widget-titlebar">
            <h2>My Favourite News Sites</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#">Add</a></li>
                <li><a href="#">Sort</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <ul>
                <li><a href="http://cbc.ca">CBC</a></li>
                <li><a href="http://www.nytimes.com/">NYT</a></li>
                <li><a href="http://bbc.co.uk">BBC</a></li>
            </ul>
        </div>
    </div>
</div>