Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Include Page
docs:Styles for FSS examplesdocs:
Styles for FSS examples
Section
Column
Include Page
docs:FSS themes examples navigationdocs:
FSS themes examples navigation
Include Page
docs:FSS Links Paneldocs:
FSS Links Panel
unmigrated-wiki-markup
Column
h2.

Theme:

Mist {div3:class=

Mist

} {
Div
classfl-theme-mist
Excerpt Include
:FSS themes example markup|nopanel=true} {div3} The
FSS themes example markup
FSS themes example markup
nopaneltrue

The mark-up

and

classes

used

to

produce

this

layout:

{code:html}

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

<div class="fl-container-400 fl-centered fl-fix fl-focus">
    <div class="fl-widget">
        <div class="fl-widget-titlebar">
            <a class="fl-force-left fl-icon fl-icon-more" href="#">More</a>
            <a class="fl-force-right fl-icon fl-icon-close" href="#">Close</a>
            <a class="fl-button-right settings" href="#"><strong class="fl-button-inner">Settings</strong></a>
            <h2>Regular Widget</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Option 1</a></li>
                <li><a href="#_bottom">Option 2</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <p>this is where the content goes</p>
        </div>
    </div>

    <p></p>
    <div class="fl-widget fl-grabbable">
        <div class="fl-widget-titlebar">
            <a class="fl-force-left fl-icon fl-icon-more" href="#">More</a>
            <a class="fl-force-right fl-icon fl-icon-close" href="#">Close</a>
            <a class="fl-button-right settings" href="#"><strong class="fl-button-inner">Settings</strong></a>
            <h2>Draggable Widget</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Option 1</a></li>
                <li><a href="#_bottom">Option 2</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <p>this is where the content goes</p>
        </div>
    </div>

    <p></p>
    <ul class="fl-tabs fl-tabs-center">
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
        <li><a href="#_bottom">Tab</a></li>
    </ul>
    <div class="fl-tab-content"> 
        Content
    </div>
   
    <p></p>
    <ul class="fl-tabs fl-tabs-enhanced">
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
        <li><a href="#_bottom">Tab</a></li>
    </ul>
    <div class="fl-tab-content"> 
        Content
    </div>                

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

</div>
{code}