round corners

Hello, I just have a question and thought someone would have an answer. I like the look of rounded corners and was woundering how it was done? Is it done with an image or CSS. What files would I look at to lets say do the sideboxes rounded or the header rounded ect....

Thanks,

oxicottin:

Hello, I just have a question and thought someone would have an answer. I like the look of rounded corners and was woundering how it was done? Is it done with an image or CSS. What files would I look at to lets say do the sideboxes rounded or the header rounded ect....

Thanks,

For rounded corners using only CSS take a look here:

www.cssplay.co.uk/boxes/snazzy.html

and here:

www.cssplay.co.uk/boxes/snazzy2.html

For rounded corners using images check out the Future Zen template in the downloads section. The image source files are also available in downloads section

once again thanks clyde! Very usefull info..

What files would I put the div tags into to do the outside of the whole center section? also where for the sideboxes as well?

Thanks,
Chad

[QUOTE=oxicottin;423335]once again thanks clyde! Very usefull info..

What files would I put the div tags into to do the outside of the whole center section? also where for the sideboxes as well?

Thanks,
Chad[/QUOTE

for the sideboxes - includes/templates/YOUR_TEMPLATE/sideboxes/ Any of the files in that folder.

for the center section - includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php

oxicottin:

once again thanks clyde! Very usefull info..

What files would I put the div tags into to do the outside of the whole center section? also where for the sideboxes as well?

Thanks,
Chad

Take a look at this thread Also

Clyde, It works for the sideboxes but where and what I place for the main wrapper?

oxicottin:

Clyde, It works for the sideboxes but where and what I place for the main wrapper?

This one is a bit more complicated:

open includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php

find this line of code:

<!-- bof breadcrumb -->

Just above this add the following:

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

Now find the following section of code:

<?php
/**
* prepares and displays center column
*
*/
require($body_code); ?>

<?php
if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
?></td>

Just before the </td> add:
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

Clide I see what your talking about in the files but im having a diferent issue. Im running wamp5 for a localhost and cant seem to get a custom template to work right. it looks fine in IE7 but in firefox it looks like THIS Do you have any clue as to why? I followed the instructions HERE and did exactly what was specifyed. I use firefox firefly to view before I make changes. Thanks!

Oh I havent made any changes to any files and the immage show up in the contemperary green in IE but all messed up in firefox? My other site I have on the localhost is working fine in both?

oxicottin:

Clide I see what your talking about in the files but im having a diferent issue. Im running wamp5 for a localhost and cant seem to get a custom template to work right. it looks fine in IE7 but in firefox it looks like THIS Do you have any clue as to why? I followed the instructions HERE and did exactly what was specifyed. I use firefox firefly to view before I make changes. Thanks!

Oh I havent made any changes to any files and the immage show up in the contemperary green in IE but all messed up in firefox? My other site I have on the localhost is working fine in both?

sorry, I use xampp and I'm not familiar with wamp5

Thats ok I will get it worked out! I posed the question in windows server. Ayway, I altered the php file and im going to add the code to the stylesheet.css and wanted to know if this code was right?

.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.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:#fff; 
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;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}

oxicottin,

You are posting the same issue about your template in multiple threads????

Yeah different titles but the same issue

oxicottin:

Thats ok I will get it worked out! I posed the question in windows server. Ayway, I altered the php file and im going to add the code to the stylesheet.css and wanted to know if this code was right?

.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.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:#fff; 
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;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}

If thats from the web site it is the correct code for the stylesheet.

kobra:

oxicottin,

You are posting the same issue about your template in multiple threads????

Yeah different titles but the same issue

Yes I ran across this while asking for help for round corners. I asked for help from clyde to solve it and move on with my corners issue. Clyde used a diferent server so I posted in the approiate area to get my server issue resolved and to get it out of this thread. Sorry for the confusion!:blush:

Clyde, it worked but it did a small section in the center of the page. HERE is a screen shot. I wanted the Main Wrapper to be round at the corners. Am I doing something wrong? Thanks!

Clyde's instructions were for rounding the center column. To round the mainWrapper, you should be able to transfer the code to just below the <div id="mainWrapper"> and the ending code to just above the mainWrapper </div>. This will be just above the

<!--bof- parse time display -->

comment.

Yes that is what I needed. Thanks! one question though? It wouldnt go all the way down the page. The section what shows the banners I had to turn off the banners to make the bottom of the page just under the copyright so it didnt show that section. Is there a better way of doing this? Thanks!

The bottom banner display is outside of mainWrapper. You may be able to move its section of code to inside mainWrapper (and the rounding code) in tpl_main_page,php. If that doesn't work right, you can move the rounding code to above mainWrapper and below the banner code, in a new div to encompass all of them.

Have any of you used nifty corners or nifty layout? I see there is a template that included this. I was wondering which you liked better?

vicky

TrvlFox:

Have any of you used nifty corners or nifty layout? I see there is a template that included this. I was wondering which you liked better?

vicky

I haven't used Nifty corners so I can't comment on your question.

Ok I got it to go around the bottom banner but now my banner "banner6" and "centerColumn" has shifted **See Attachment**. Im thinking I put the second portion of code in the wrong place but I have tried it in diferent sections of the tpl_main_page.php and I keep getting the same results. here is where I placed the code.

Top portion:

<?php
    }
  }
  
?>

<div id="mainWrapper">

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

<?php

Bottom Portion:

<?php
    }
  }
?>
<!--eof- banner #6 display -->
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>

Thanks!