Rounded Borders Using Snazzy Borders

[Lawbird123]

Hey all,

I found a site that shows how to create rounded borders without any images at the following location:
http://www.cssplay.co.uk/boxes/snazzy2.html

I have used this throughout the rest of my new site except for the zencart portion. I know to add the css to the stylesheet, but where else would i make the necessary changes in order to implement rounded borders around my sideboxes AND main content. Any help with this would ROCK!

[Kim]

You would need to implement the HTML in your common/tpl_box_left_default.php and tpl_box_right_default.php to do the sideboxes. Probably in common/tpl_main_page.php for the outter container and in any other templates where you wanted rounded corners around an element.

[Lawbird123]

Awesome! I got it to work! Thanks, Kim!

[Kim]

Whew! 'specially since I hadn't actually tried it

[KADesign]

Hi Lawbird123,

Would you mind explaining how you did this. I would love to add rounded corners too. Did it require images?
Please let me know...

Thanks,
Kelly

[Lawbird123]

sure...No images are used with this method. Click on the link above to get the css and html that I used to create my round borders. The css from snappy borders can be pasted anywhere in your styles sheet and, in order to copy it into the html you need to add it to the php files you want to have rounded borders. If you want them around your sidebox content (templates/common/tpl_box default_left.php for the left and templates/common/tpl_box default_right.php for the right)


This will be the code for your new sideboxes:
Code:

<?php
 
/**
 
 * Common Template - tpl_box_default_left.php
 
 *
 
 * @package templateSystem
 
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 
 * @copyright Portions Copyright 2003 osCommerce
 
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 
 * @version $Id: tpl_box_default_left.php 2975 2006-02-05 19:33:51Z birdbrain $
 
 */
 
 
 
// choose box images based on box position
 
  if ($title_link) {
 
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
 
  }
 
//
 
?>
 
<!--// bof: <?php echo $box_id; ?> //-->
 
<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 you look in the code, you'll see where the html for the borders is copied. HTH!

[madmumbler]

I'm going to try that.

There was a book I saw called The Zen of CSS Design (haha how appropriate!) at the bookstore the other day, but it was $44. I need to order it from Amazon. And it talked about some of those same issues.

I stumbled across another site:

http://www.csszengarden.com/

(I see a theme! *LOL*) It's got some neat ideas on it, not all can be used for Zen Cart, but it's a great springboard.

HTH,

[Lawbird123]

I bought Zen of CSS a while back but haven't sat down to read it yet. I wonder what all of the "Zen" is about tho. Ill google!

[jammin320]

CSSZenGarden.com is an amazing site that can teach alot!

[madmumbler]

I bought Zen of CSS a while back but haven't sat down to read it yet. I wonder what all of the "Zen" is about tho. Ill google!

Probably supposed to "zen" you out with happiness. *LOL*

Remember "Zen and the Art of Motorcycle Maintenance?" *LOL* I never did read that one.