Drigg Theme Re-Visited. Continued

Ok so if you have read Drigg Theme Re-Visited you'll see I left you hanging at the #header_search form input.form-submit { section to figure out.

I'll give a quick overview of the two sections I left for you to figure out.

So let's take a look at the #header_search form input.form-submit { section first.

#header_search form input.form-submit {
border: 0;
padding: 0;
background-image: url("../img/header_searchbtn.gif");
width: 30px;
height: 20px;
overflow: hidden;
text-indent: -1000em;
word-spacing: 10em;

Border:0; this section here will put a border around your search image. The default search image for drigg is the magnifying glass "header_searchbtn.gif."

I'm sure you can guess what this next part is...
background-image: url("../img/header_searchbtn.gif");

Now if you wanted you could change the default image; you would need to take a few things into thought.

You would need to possibly re-size the image you use.
Rename the image or change the code to match the image name (header_searchbtn.gif)
Set the size of the image in sections. width: 30px; height: 20px;
If the image is larger than the default, you will need to adjust the size of the search box.

Now let's take a look at text-indent: -1000em;
If we change that to 0em; you'll see part of the word "search" show up on the header_searchbtn.gif icon. The full word does not show because the header_searchbtn.gif size is set too small. If we were to increase the size in the width: 30px; section, we could get the full word to show.

Now lets look at
/* Header login and submit buttons */
#header_categories a.drigg-login,
#header_categories a.drigg-submit {
float: right;
margin-left: 10px;
display: block;
border: 1px solid #fff;
border-top: 0;
border-bottom: 0;
background-repeat: no-repeat;
background-position: top left;
height: 30px;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}

This section lets us modify the "submit a story" icon and the "Login/Register" icon.
I'm not going to discuss this section as its the same as what we have been discussing above.

So let's move on...
#header_categories a.drigg-login { is the icon on the right side of the site when not logged in

#header_categories a.drigg-login {
width: 117px;
background-image: url("../img/header_loginbtn.gif");

Once again you can use your own image just make sure you adjust the pixel width
(width: 117px;)

#header_categories a.drigg-submit { Same idea as above.

#header_categories a.drigg-submit {
width: 115px;
background-image: url("../img/header_submitbtn.gif");

Moving on to #header_categories {
#header_categories {
height: 30px;
padding: 0 20px;
background: url("../img/header_categoriesbg.gif") repeat-x top left;
background-color:gray;
}

So to give an example how to mod this section I'm going to convert and use an image using paint.net from the Dreamy theme. The image I will be using is the bg-menu.png. (Take note of the pixel size)

So here is a before shot:

So once the image has been modded, I re-namded the image to header_categoriesbg.gif and placed it in the image directory with read permissions.

Now that that is done, we will slightly modify the code, but first......
The size of bg-menu.png is 700x35 so all we need is the 35.

#header_categories {
height: 35px;
padding: 0 20px;
background: url("../img/header_categoriesbg.gif") repeat-x top left;
background-color:gray;
}

That's it. All we needed to do was change height: 30px; to height: 35px; Easy ha?

Here is the after:

Yes it was a very simple and a small change, but it does what we need.

These next few sections will change the attributes of the categories. For example: If you look at the above image where it says "All", "Hydro", "Solar", and "Wind". These sections will let you modify those areas. Such as the white box around "all", the color of the words, the color of the box, and the size of all the above.

#header_categories ul {
margin: 0;
padding: 0;
list-style: none;
height: 30px;
line-height: 30px;
}
#header_categories ul li { display: inline; }
#header_categories ul li a {
float: left;
display: block;
padding: 0 0.5em;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
#header_categories ul li a.active {
margin-top: 3px;
line-height: 27px;
background: #fff;
color: #666;
text-shadow: none;
}

I'll let you play with that one.

The sections #header_subcategories { does the same as above, but for subcategories.

Lets move on to breadcrumbs

/* Header breadcrumb */
#header_breadcrumb {
clear: left;
height: 30px;
line-height: 30px;
padding: 0 20px;
font-size: 8pt;
color: #666;
border-bottom: 1px solid #e5e5e5;
}
What this section does is control this area here
I'm sure you can figure out what to do at this point.

I'm going to start telling you less on how to modify things, and start tell you what the sections do. I think at this point we should have an idea of what is needed to be done.

The section below lets you control aspects of the user menu.

/* -- Content layout ------------------------------------------------------ */
#content { padding: 20px 220px; }
#content .column {
position: relative;
float: left;
}
#content_center { width: 100%; }
#content_left {
width: 180px;
padding: 0 20px;
margin-left: -100%;
left: 220px;
}
#content > #content_left {
left: -220px;
margin-left: expression(document.all.content_center.offsetWidth * -1);
}
#content_right {
width: 180px;
padding: 0 20px;
margin-right: -220px;

Lets move on to Content styles
This area lets you control the area pictured below. (Not including the Published scoops)

/* Control bar */
#content_center div.controlbar h1 {
float: left;
line-height: 1.2em;
margin-right: 20px;
margin-bottom: 0;
}
#content_center div.controlbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#content_center div.controlbar ul li { display: inline; }
#content_center div.controlbar ul.drigg-viewtype {
float: right;
font-size: 11pt;
line-height: 20pt;
}
#content_center div.controlbar ul.drigg-viewtype li a {
display: block;
float: left;
margin-left: 10px;
padding: 0px 5px 5px 5px;
}
#content_center div.controlbar ul.drigg-viewtype li.active a {
background-color: #f3f9fc;
color: #00446b;
}

#content_center div.controlbar ul.drigg-order {
background-color: #f3f9fc;
padding: 0.5em;
clear: both;
}
#content_center div.controlbar ul.drigg-order li a {
padding: 0.2em 0.5em;
margin-right: 0.5em;
}
#content_center div.controlbar ul.drigg-order li.active a {
background-color: #1b81ca;
color: #fff;
}

Well thats it for now....