Rounded Borders Using Snazzy Borders

Yay, I have been looking to do this!
I have managed the rounded corners and spacing between the boxes, but I can't seem to get any white space between the sideboxes and the centerbox.

Interestingly, if I exclude the sidebox heading in the snazzy div in the php file, everything lines up. This is the relevant section...

Code:

---

<!--// bof: <?php echo $box_id; ?> //-->
<!--// <div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>"> //-->
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
                    <div class="xboxcontent">
 
<?php echo $content; ?>
</div>
 
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
 
<!--// eof: <?php echo $box_id; ?> //-->

---

If I put the heading into the snazzy div in the php file, the alignment to the center box is off:

Code:

---

<!--// bof: <?php echo $box_id; ?> //-->
<!--// <div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>"> //-->

<div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
                    <div class="xboxcontent">
 
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>

<?php echo $content; ?>
</div>
 
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
 
<!--// eof: <?php echo $box_id; ?> //-->

---

Just can't find the darn thing, and I'm wondering if maybe I'm not putting the code into the php correctly.

Any thoughts?

Audra

Audra,

It would help if you posted a link to the site. I know I had the same problem at first (and I still do on my test site because it's just a test site and wasn't worth fxing). I used the FF Web Dev Addon and that guided me to the right direction in fixing my problem. If you post a link, I'll see if I can help you with your spacing problem.

Hi,

i have managed to round the left and right columns... JUst a little query..

1. Want the left hand column to have a background...but only in the catogories section??? any suggesion??? i have managed to put a light grey but looks a bit :huh:

2. How do i move the catagories text back into the rounded column???

www.splay.co.uk

Thank you

And what a great mod!!! im a newbie and managed to do it!! lol :clap:

I'm mind-numbing lately w/ my obvious omission of key details lately:lookaroun

www.tiptopcountrystore.com

Thanks!

BTW, I purposely left-aligned the center column content in order to make sure the appropriate margin is in place.

Quote:

---

Originally Posted by vik007

1. Want the left hand column to have a background...but only in the catogories section??? any suggesion???

---

#categoriesContent ??

Code:

---

2. How do i move the catagories text back into the rounded column???

---

See 2 posts above. You can see how I managed to get the heading into the rounded corners, but it threw off the margins.

Sorry, that is more like 4 posts above

Hi, im sorry but bit lost??? :oops:

so i need to edit the tpl_left do i?

And what do i replace with what?? im sorry its just im a total newbie?

and the #categoriesContent is the way to add the colour just in the rounded box is it? and is this done in the stylesheet yes??

I'm a newbie to css myself, so I'm not sure that I can give you the right answer, but yes, the color will be specified in your stylesheet.

/includes/templates/YourTemplate/css/stylesheet.css

It seems you have already managed it, but just put it in the wrong place.

I think that you have now colored #categories
Change that to #categoriesContent

That is going to color the background of the box containing your categories, but not the heading "Categories." I'm not sure if that is what you want.

It is also not going to color the rounded edge at the top or bottom. In order to color that you need to add your color style to
.xb1
.xb2
.xb3
and
.xb4

Sorry, in a rush. I'll try and get back to you about the heading later.

Audra

Hi,

Currently i have the following:

#categoriesContent {
text-decoration: underline; color: white;
font-size: 12px;
}

#categoriesContent {background-color: #b4b4b4;}


I am now trying the colour the top and bottom of the rounded side box.

you state i must do this in xb1 etc.

This is the style sheet section

.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#444;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}




So iv tried to add it as follows:

.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#444;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
background:#ff0000;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
background:#ff0000;
}
.xb3 {
margin:0 2px;
background:#ff0000;
}
.xb4 {
height:2px;
margin:0 1px;
background:#ff0000;
}


But no luck???

Is www.tiptopcountrystore.com your site??

Oh wow managed to do it..sumhow..lol :smartalec:


Its just that the color has also been applied to the right hand columns..:huh: which not what i was really after..but heyy will try sort that somehow...lol

appreciate it if you could help me to sort the text in the box,...when you have a bit of time that would be great and vey much appreciated..

vik
www.splay.co.uk