Sidebox design

[Alfa]

how should I do to get my sideboxes
looks like on this page

http://www.bigandtallrus.com/

[stevesh]

The surest way to get them to look exactly like that would be to buy the same template from Template Monster, but I strongly suggest you don't do that.

You could examine the stylesheet that site uses and get some ideas from that.

[misty]

http://(sorry, site offline)/hoff.php
Plenty of Ideas at above..Template Monster templates
may look fantastic but simple fact is they just don't
work correctly with zencart

[Alfa]

I meen where in the css file i need change.
Do I need to change any php file

[gjh42]

You will edit /includes/templates/your_template/css/stylesheet.css.
If that is a TM template, its stylesheet and file edits will be in several non-standard files as well as the stock ones - don't follow its example for file naming, HTML tag structure, etc.

[gjh42]

You probably don't need to change any PHP files just to get sidebox headings like that site.
If you decide on the sidebox width and make heading images in Photoshop to fit, you can use those as the background:

.leftBoxHeading, .rightBoxHeading {
    background-image: url(../images/yoursideboxhead.gif);
    text-align: left;
    padding-left: 42px;/*adjust to taste*/
    height: 35px;/*adjust to fit your bg*/
    }

There are plenty of other properties you can add to this for various purposes.

Make your heading gif with a transparent background to allow the main page background to show behind the rounded corners.

[Alfa]

I have the standard templates (classic)
/includes/templates/classic/css/stylesheet.css

[gjh42]

If you want to start from a design like /classic/, just copy all /classic/ folders and their files to /your_template/ folders (pick a name), and edit /your_template/template_info.php to your own information so it will be visible in the template selection box.

See the tutorials for more on custom templates.

[Alfa]

all sidebox should have different images backgrounds

[gjh42]

Fine. In that case, keep the standard info like padding-left, height (if they will be the same), etc. in
.leftBoxHeading, .rightBoxHeading {
and put the backgrounds in individual rules like

#categoriesHeading {
    background-image: url(../images/categorieshead.gif);
    }

#informationHeading {
    background-image: url(../images/informationhead.gif);
    }