Child pages
  • FSS Themes - Mist

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 themes examples navigation
FSS themes examples navigation
Include Page
FSS Links Panel
FSS Links Panel
Column

Theme: Mist

Div
classfl-theme-mist
Excerpt Include
FSS themes example markup
FSS themes example markup
nopaneltrue

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

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>