Rounded Borders Using Snazzy Borders

[audradh]

Hey Vik,
Looking good. It shouldn't be hard to fix the right column (although I kinda like it). 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

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

[vik007]

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

[vik007]

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

[vik007]

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

[audradh]

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

[vik007]

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

[audradh]

Looks like you got the right side rounded

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

[vik007]

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


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="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; ?> //-->





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.

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

[audradh]

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

[vik007]

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