This documentation is currently being moved to our new documentation site.
Please view or edit the documentation there, instead.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.
High contrast buttons
Most websited design custom styles for buttons these days. Background images and CSS can be used to create many attractive button styles, from simple rectangles to glossy, 3D-looking shapes.
When designing high-contrast versions of these buttons, it is best to avoid gradients, 3D effects, etc. It is sometimes simplest to set a solid colour background for images. The example below shows how this can be done.
<button class="search-btn">Search</button>
In this example, a button is given a nice gradient background with a two-tone border to give it a bit of a 3D effect.
The CSS for the high-contrast version (in this example, the "white-on-black") simply inverts the basic colour scheme to produce a 'button' effect, removing the gradient and forcing the background and border colours to conform to the theme colours.
.search-btn {
background: -moz-linear-gradient(center top , #468CAA, #135876) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#468caa), to(#135876)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#468caa', endColorstr='#135876'); /* for IE */
border: medium none;
box-shadow: 1px 1px 0 #135876 inset, 1px 1px 0 #FFFFFF;
color: #FFFFFF;
}
.fl-theme-wb .search-btn {
background-color: #FFFFFF !important;
border-color: #000000 !important;
color: #000000 !important;
}