Snazzy for center boxes

[cla74]

I just create image(s) with rounded corners and then call them via a declaration in the stylesheet. While I did not do this for centre column boxes, I did it for sideboxes on one site (www.edutrade.co.uk) but as kobra points out, just apply the principle to centre boxes.

Ok,but i dont know which files to use to apply snazzy!?!

[fairestcape]

I'm not familiar with "snazzy" . What are "snazzy" rounded corners... do you have a URL example?

[kobra]

Ok,but i dont know which files to use to apply snazzy!?!

As we can not in a forum environment write your code nor know exactly what it is you are wanting....this is why we are pointing you to other resources so you can see/visualize at the file level how others have done similar things. It will be up to you to learn from their application how to apply as you want

[cla74]

As we can not in a forum environment write your code nor know exactly what it is you are wanting....this is why we are pointing you to other resources so you can see/visualize at the file level how others have done similar things. It will be up to you to learn from their application how to apply as you want

I want center boxes such featured products box and special box to be rounded.

[kobra]

Again - Look to how others have accomplished similar things

[cla74]

Again - Look to how others have accomplished similar things

I've already searched!!Nothing for center boxes

[kobra]

From my post #6

NiftyZen uses css rounded corners for the main wrapper and you can see how they applied it - then move this to the center column an use snazzy in a similar manner

Get creative!

[fairestcape]

OK, so I think you are trying to embed this stuff:

**Css**

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}

**Html**

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

CENTREBOX CONTENT HERE

</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

Am I on the right track?

[cla74]

OK, so I think you are trying to embed this stuff:

**Css**

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}

**Html**

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

CENTREBOX CONTENT HERE

</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

Am I on the right track?

Ok you are on the right path
But where is its template?

[fairestcape]

NiftyZen template uses exactly the same principle, so my advice is to download that template and see how the css is applied.

To apply the same feature to centre boxes, there are a number of TPL files that will need editing - and each one may have a different structure, but you could start by looking at the code that drives:

tpl_modules_specials_default.php

and this may give you pointers on where to add the extra div classes and ID's.