SideBoxes / Categories

On my website at https://www.anhcreations.com running latest version. You will notice my categories sidebox has the purple header? How do i add that to all side boxes? I have this template but cant figure it out?

You have stylesheet rules for .category-sidebox-header-left {} and h3.category_sidebox_header_right {} which give the parts of the image and other styling. This styling should be applied to generic selectors, not specific ones. Style these:

.sidebox-header-left {}
.leftBoxHeading {}

and similar rules for right sideboxes.

I havent messed with style sheets much. Im not one that made the template here is the snippet of the section your talking about just confused what is leading what right here.

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.rightBoxHeading, #manufacturersHeading label, #manufacturersHeading label {
color: #000;
text-align: left;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
color: #000;
}
h3.leftBoxHeading a,
h3.rightBoxHeading a{
font-size: 0.8em;
color: #000;
text-align: left;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
padding: 0.3em 0.2em;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: none;
margin: 0 0 1.5em 0;
}
.sidebox-header-left, .centerBoxWrapper{
background: url("../images/left_sb_bg.gif") no-repeat top left;
padding: 0 0 0 4px;
}
.sidebox-header-left{
height: 23px;
}
.category_sidebox_header_left{
background: url("../images/left_c_sb_bg.gif") no-repeat top left;
padding: 0 0 0 4px;
height: 23px;
}
.sidebox-header-left h3, .centerBoxWrapper h2 {
background: url("../images/right_sb_bg.gif") no-repeat top right;
}
h3.category_sidebox_header_right{
background: url("../images/right_c_sb_bg.gif") no-repeat top right;
}
.sidebox-header-left h3, .centerBoxWrapper h2, h3.category_sidebox_header_right, .sidebox-header-left label, .sidebox-header-right label{
line-height: 1.917em;
padding: 0 0 0 2px;
}
h3#categoriesHeading{
color: #fff;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #000;
text-decoration: none;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #000;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
.sideBoxContentItem{
padding: 0 0 15px 0;
}
#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #0000CC;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

Well to add to my list now all of sudden this page is all out of whack? Havent changed anything?

http://www.anhcreations.com/index.php?main_page=contest

Anyone have suggestions it is doing it on the following pages now..

Featured Products
Specials Page
Contest Page

I know it's not related to your question but do you really need the music playing on your site?

I'd like to help, but I can't stay on your site long enough to check things out, thanks to that awful noise.

Music was supposed to disabled that was for testing. I appoligize for that guys. Main thing is the pushing it all out of alignment. I haven't changed anything and just all of sudden started this?

The left column width is set in admin, and apparently the way it is output is not behaving as desired. View source shows

Change your setting in Configuration > Layout Settings > Column Width Left - Global to 150px.

Undefined table cell widths default to fitting comfortably, and if the main column content is not wide enough to occupy all but 150px, it will only take as much as it needs.
CSS style rules require explicit units on nonzero dimensions, whereas old HTML behavior defaults to pixels. (Thus the style="width: 150" is undefined.)

Well i noticed i don't have PX at the end of them i added that to the end and that worked. Another question is what is the difference between :

Column Width - Left Boxes
Column Width - Right Boxes
Column Width - Right
Column Width - Left

Should these all be set to the same size?
Also now that i added the PX to the end i notice the headers are actually gray thats funny.

Now i just have to figure out how to fix the purple header of each other box to match category box.

The left/right boxes width applies to the individual sideboxes, while the column width applies to the column as a whole. If you have no padding or margins in the columns and sideboxes, you can use the same dimensions. If you do have padding/margins, you should ideally set the widths to account for them (but you will generally get consistent results even if you don't).
If you have 2px padding in the columns and the widths are set the same, the columns will actually display 4px wider than the boxes which will be at the set width.

The cleanest thing would be to set column widths only and let the boxes automatically fill them neatly.

The sidebox header bg fix is what I told you in post 2.