I was just mucking around with the sideboxes for categories and information. I thought the result came out pretty neat and hence wanted to share with all you lovely people!
Looks like this and changes colour of the box on hovering the mouse on it:
Changes to make:
In the stylesheet comment out the *#category ul, #category a and #category a:hover section.
Add the following
*#category ul {/*category box general setting*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/*list-style: url('../image/bullet_1.png');*/
list-style: none;
background: #f8f8f8; /*background of the category box*/
}
#category a {
color: #6E6E6E; /*categories font colour*/
text-decoration: none;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #a19f99 #ccc; /*on 4 sides*/
margin: 0;
padding: 5px 15px;
}
#category a:hover {
text-decoration: none; /*underine on hovering on the links in the categories*/
background: #c1beb5 ;
text-decoration: none;
}
For information do exactly the same (commenting out) and past the same code as above. Replace the word "category" with "infomation"
Change the .box .middle and .box .bottom in the same file as below.
.box .middle {
border-left: 1px solid #DDDDDD; /*left border of the side boxes*/
border-right: 1px solid #DDDDDD; /*right border of the side boxes*/
background: #f8f8f8; /*bacground of the sideboxes*/
padding: 0px;
}
.box .bottom {
height: 0px;
background: url('../image/box_bottom.png') no-repeat;
}
Hope it helps!
Vimal.
