FSS Themes - High Contrast Inverted
All Theme Examples |
---|
FSS Documentation
Still need help?
Join the infusion-users mailing list and ask your questions there.
Theme: High Contrast Inverted
The mark-up and classes used to produce this layout:
<div class="fl-theme-hci"> <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>