Rounded Borders Using Snazzy Borders

Hey Vik,
Looking good. It shouldn't be hard to fix the right column (although I kinda like it:P). I don't have time to figure it out right now, but I'll check in and see if you still need help tomorrow.

As for the heading, this is how I did it:

Edit:

/includes/templates/YourTemplate/common/tpl_box_default_left.php

Here is my new code, and I had no other modifications to the stock file.

<?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; ?> //-->
<!--// <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; ?> //-->

If you compare the code, you will see that I just moved the call for the sidebox headings inside the snazzy div.
It threw off my margins, as it did for others before me. Everybody seems to have had a different fix though, so we will wait and see what the changes bring for you:wink:

In response to your question, no, tiptopcountrystore.com is not my site. I am building it for a friend though.

Hope that works for you!
Audra

iv copied the following code into the file your told me:

<?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; ?> //--> <!--// <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; ?> //-->

And you can see the result..

its deffo done sumting?!?!

Hi All,

Hope you are well. After putting in your code into the new tpl-left file..i have noticed the following changes..

1. Categories has moved up..touching the header bar.

On the good note...the word categories has moved into the box..woohoo..

Just got to find out how to move the left box down again, and colour in the background behind the text - 'categories'

I do want the right hand text inside the boxes at some point aswell..but just trying to mess around with the left before i commence with the right i fink :lookaroun

managed to move the left categorie column down to desired height.. did this by adding the follwoing:

#navColumnOne {padding-top: NUMBERpx;}

just need to find out how to color in the background behind the text now??

In your stylesheet try adding color to #categoriesHeading

PS You should read this thread. There are some great Firefox tools to help figure this stuff out. Web Developer seems like the most necessary

http://www.zen-cart.com/forum/showthread.php?t=65553

Oh brillant...didnt no there was a thread on the use of firefox devloper! will deffo look into that later.

Will also try the coding in the stylesheet when i get back later on this evening.

If i simply copy the coding for the left (tpl_left) into the tpl-right will that make the same effect on the right headings??

If i need to change anything..what would that be?

Also just a question on the site you are making...What have you used to make the tabbed headings? (or if it is a mod what mod is that?)

Thanks for your help...really appreciate it.

Vik

Looks like you got the right side rounded:clap:

The tabs on that site were made using Nifty Corners on the EZ Pages navigation bar. Here is a thread explaining how to do that:

http://www.zen-cart.com/forum/showthread.php?t=74188

Hi brillaint...will read through that thread later on this evening. thank you for that.

Yepp i did manage to get the right hand columns rounded...some how...:D

If i need the right hand column headings in the actualy columns i take it i must edit the tpl_box_default_right.php correct?

Regarding the coding would the coding be the following (same coding as the left, but change all the left to the right)

<?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; ?> //--> <!--// <div class="**left**BoxContainer" 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="**left**BoxHeading" 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; ?> //-->

You did state in the earlier thread that all you have to do is move the call for the sidebox headings inside the snazzy div.:dontgetit

But kinda unsure what you meant. so if you could possibly help me set the right columns that would be perfect

Thanks for all your help.

**Vik

**

You've got it. Specifically, what I meant was that you move this part of the original Zen code

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

inside of the the div class="xsnazzy"

To save you the work of replacing all the left column references, here is my complete code for tpl_box_default_right.php

<?php
/**
 * Common Template - tpl_box_default_right.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_right.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; ?> //-->
<div class="rightBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">

<!--bof Snazzy Borders-->
<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">
<!--eof Snazzy Borders-->

<h3 class="rightBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<?php echo $content; ?>
</div>

<!--bof Snazzy Borders-->
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
<!--eof Snazzy Borders-->

<!--// eof: <?php echo $box_id; ?> //-->

Personally, I don't know php at all, and I'm just bumbling around w/ css, so I am thrilled to have figured this out (with the credit due to the help of the forums of course.):smartalec:

:clap::clap:

Audra...thank you very much. You have been a great great help!

Managed to make the site more professional which what i was after.

Only think left now is the header tabs. I have asked a question in that thread, but had no reponse yet..

Bit unsure where to start with the tabs, as the thread starter didnt seem to sure him/herself...

thanks for all your help in sorting the rounded edges for me :clap:

hi vik007,

u did a great job with rounded snazzy border..
but have u browse your site using IE.

another bar appears under navigation menu and your contact us menu is not fit into the nav bar.

becoz i have the similar problem with IE. :cry:
but mine is different and can be ignored (i think so) :D
there is a gap between my banner and nav bar when i browse using IE. :no:

anyway, nice modification u made.

Thank you for your comments.

Ohhhh how i hate IE! :censored:

My plan is to get rid of the heading all together and swop it with a hover button links.

There is a thread that changes the header to a hover link thing..thats kinda cool!!!

Has anyone managed to get the centercolumn rounded also?

Hi

I have managed to setup the round corners perfectly on Zencart and it works well in IE, Safari and the previous version of FireFox. Just downloaded the latest release or Firefox and the shop layout is all over the place when viewed with this browser.

Has anyone had this issue as well?

audradh:

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...

<!--// 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:
> ```
<!--// 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

Not sure if/how you fixed it, but i added <p><p> to the closing section for the side boxes which does it for me

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

Hello, I used the snazzyborder code to put rounded borders around my side boxes and center area.

However, I want to have my title header (which are images) look like they are part of the rounded section.

Here is my beta site: http://www.organicgojifarm.com/zen/

So I either need to turn off the border on top and continue the illustion of a border onto my header image.
**Or **
I need to find a way to have the header appear *inside *the border instead of outside of it.

Unfortunatly I don't know how to do any of these!

I want to get my category sidebox (and the others) to look as similar to this as possible:

Any help would be appreciated, thanks in advanced!

Also!
How do I get rid of the "New products for November" but keep the "Featured products" ???
Thanks!

I found a way to apply snazzy to center box:
For example to featured products box you have to search tpl_modules_featured_products.php, and this is the code:

<!-- bof: featured products  -->
<div class="xsnazzy">
                     <b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
                     <div class="xboxcontent">

<?php if ($zc_show_featured == true) { ?>

<?php
/**
 * require the list_box_content template to display the product
 */
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
?>

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




<!-- eof: featured products  -->

and so on with the others......

cla74:

I found a way to apply snazzy to center box:
For example to featured products box you have to search tpl_modules_featured_products.php, and this is the code:

and so on with the others......
Great contribution.
Have you found, by any chance, how to make the "people also purchased" rounded? (there is one more like that, i belive its featured products, not sure)

Cheers,
Jeroen

Has anyone implemented this into the css header flyout menu add on?

Hi, great thread.

I have rounded boxes, borders, etc etc.

https://www.rambo-knife.com

However i want the next site i tamper with to use something like snazzy so the boxes are generated in the code because i want to set the site to open with the width of the screen res. instead of fixed................so my question is this.

Does anyone know if you can fill the top of the snazzy border and the bottom and also if you can use a gradient colour fill for it?

I only ask as whenever i've seen sites that use this type of coding the very top of the boxes has to be filled the same as the background box colour.

Failing that does anyone know how to split a sidebox and center box into 6................left-header, right-header, left-content, right-content, left-bottom, right-bottom...?