Information Technology Reference
In-Depth Information
14
The next few blocks allow you to add widgets, and define their styling. As you can see, we are
mostly concerned with positioning and colors.
#footer .add-content{
text-align: center;
margin: .6em 0;
}
/* footer links/widgets */
ul#footer-widgets{
margin: 0;
padding: 0;
color: #726a60;
}
ul#footer-widgets li.widget{
float: left;
padding: 0;
margin: 0;
width: 50%; /* default */
list-style-type: none;
}
Don't try to crowd too many widgets into a footer!
ul#footer-widgets.widgetcount-1 li.widget{ width: 50%; }
ul#footer-widgets.widgetcount-2 li.widget{ width: 50%; }
ul#footer-widgets.widgetcount-3 li.widget{ width: 33%; }
ul#footer-widgets.widgetcount-4 li.widget{ width: 25%; }
ul#footer-widgets.widgetcount-5 li.widget{ width: 20%; }
ul#footer-widgets.widgetcount-6 li.widget{ width: 16%; }
/* no point to add more than 6 widgets, unreadable */
Widget titles are small, but italicized.
ul#footer-widgets h6.title{
background: transparent url(images/div-h2.gif) repeat-x left bottom;
padding: .1em .4em;
font-style: italic;
}
This puts some space around any content in the footer widget.
ul#footer-widgets .the-content{
margin: 0 1em;
padding: .4em 0;
}
Search WWH ::




Custom Search