Page Comparison

h2. Theme: Black on Yellow

{div3:class=fl-theme-blackYellow}
{excerpt-include:FSS themes example markup|nopanel=true}
{div3}


The mark-up and classes used to produce this layout:
{code:html}
<div class="fl-theme-hc">
    ... see other demos for specific markupblackYellow">

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