Information Technology Reference
In-Depth Information
IV
/*** 3 column layout ***/
#page.with-sidebar.and-secondary .mask-main .mask-left {
right:25% /* right column width */
}
#page.with-sidebar.and-secondary .mask-main .col1 {
width:50%; /* left column width */
left:25%; /* right column width */
}
#page.with-sidebar.and-secondary .mask-main .col2 {
width:25%; /* right column width */
left:25%; /* right column width */
}
#page.with-sidebar.and-secondary .mask-main .col3 {
width: 25%;
left: 25%;
}
.clear-content{
height: 1px;
clear: both;
display: block;
}
We've gone through some of the basic elements of any web page here. You may not use all these
elements in your blog (tables come to mind here), but a lot of the tweakable elements are up in the
front—always a good thing. Let's move a little deeper into the page.
Header
The header section covers much of the initial impression a visitor has of your blog. It has to look
good, be professional, and offer visitors the idea that what you are offering them is worth their
time. WordPress does this with a solid graphic image, a bright-looking title (and subtitle), and solid
navigational tools. In Arclite, this is all defined in the header section.
Search
Here is a simple method to add search to your blog. It begins with defining the look of the search
box with a pair of images, search-bg-png and search-go.png:
/* search */
.search-block{
background: transparent url(images/search-bg.png) no-repeat left top;
