Rounded Borders Using Snazzy Borders

02 May 2007, 14:28

#1

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Rounded Borders Using Snazzy Borders

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!

02 May 2007, 15:00

#2

kim

Obaa-san

Join Date:: Jun 2003
Posts:: 26,564
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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.

02 May 2007, 16:05

#3

lawbird123

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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

02 May 2007, 16:15

#4

kim

Obaa-san

Join Date:: Jun 2003
Posts:: 26,564
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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

29 May 2007, 20:24

#5

kadesign

Totally Zenned

Join Date:: Feb 2005
Posts:: 593
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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

30 May 2007, 01:23

#6

lawbird123

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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!

31 May 2007, 12:04

#7

madmumbler

Zen Follower

Join Date:: Dec 2005
Posts:: 450
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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,

31 May 2007, 18:13

#8

lawbird123

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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!

31 May 2007, 19:57

#9

jammin320

Zen Follower

Join Date:: Mar 2007
Posts:: 158
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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

31 May 2007, 23:48

#10

madmumbler

Zen Follower

Join Date:: Dec 2005
Posts:: 450
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

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!

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

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

18 Jun 2007, 02:46

#11

kadesign

Totally Zenned

Join Date:: Feb 2005
Posts:: 593
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Hi,

I got this to work for my sideboxes and I love it. But...does anyone know if or how it can be used on the centerboxes?

Thanks,
Kelly

18 Jun 2007, 14:00

#12

lawbird123

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Unfortunately, I never got the time to figure that one out. Im sure someone in the forums would know where to paste the html.

22 Jun 2007, 14:29

#13

tatiana77

Zen Follower

Join Date:: May 2007
Posts:: 114
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Hello, I'm so happy I found this thread. I did everything as mentioned, and managed to get the rounded corners, but for some reason, the sideboxes get nudged, and the margins are screwy. Can someone check it out? I'm at a loss

http://www.wolfandrabbit.com/zencart/

also, I've copy/pasted my tpl_box_default_left just in case (tpl_box_default_right is same, just changed the left to right)

// choose box images based on box position
if ($title_link) {
$title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
}
//
?>



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

<div class="xboxcontent">

<a class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></a>

<?php echo $content; ?>

</div>

Thank you!!

Tatiana

22 Jun 2007, 15:19

#14

tatiana77

Zen Follower

Join Date:: May 2007
Posts:: 114
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

To answer my own question, I changed the margins below to fix the 'nudging sidebox' issue:

.xsnazzy {
background: white;
width:240px;
float:left;
margin: 0;

But I'm still left with the problem of the sideboxes sticking together (vertically).
i.e. On left side, 'shop', 'info', 'specials' sideboxes are all lumped together in one column, so when I add a bottom margin of 2em, it only applies to the very bottom and not to the individual sideboxes...

Any help would be appreciated, TIA,
Tatiana

24 Jun 2007, 23:38

#15

bambus

New Zenner

Join Date:: Jun 2007
Posts:: 7
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Hi Lawbird123,

how can I change the distance between the sidebox?
Can you help please ..?

24 Jun 2007, 23:45

#16

bambus

New Zenner

Join Date:: Jun 2007
Posts:: 7
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Hi tatiana77,

I saw your website has been solve on the "sticking-issue" ..
can you help me to instruct please ..

many thanks ..

25 Jun 2007, 00:12

#17

lawbird123

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

bambus,

thats a stylesheet fix... send a URL and i'll help you out.

25 Jun 2007, 00:14

#18

lawbird123

Zen Follower

Join Date:: Sep 2006
Posts:: 231
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Tatiana,

I checked out your site and it looks like you have everything rockin'! Keep it up!

25 Jun 2007, 00:46

#19

tatiana77

Zen Follower

Join Date:: May 2007
Posts:: 114
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Yes I wanted to post the update on that... phew, it always does manage to work out, this zencart stuff :laugh:

Bambus:
In my stylesheet.css I including the following:

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
margin-bottom: 1em

margin-bottom: 1em allows that space... I'm sure this is what did it, please post your URL so we can see better though -- everyone's site is different...

Tatiana

25 Jun 2007, 08:13

#20

bambus

New Zenner

Join Date:: Jun 2007
Posts:: 7
Plugin Contributions:: 0

Re: Rounded Borders Using Snazzy Borders

Hi Lawbird123,
I installed via XAMPP .. the Stylesheet is from default

Bambus