Page 1 of 2 12 LastLast
Results 1 to 10 of 72

Hybrid View

  1. #1
    Join Date
    Sep 2006
    Location
    Jacksonville, FL
    Posts
    236
    Plugin Contributions
    0

    help question 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!
    John L.
    MultiMedia Designer

  2. #2
    Join Date
    Jun 2003
    Posts
    33,715
    Plugin Contributions
    0

    Default 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.
    Please do not PM for support issues: a private solution doesn't benefit the community.

    Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

  3. #3
    Join Date
    Sep 2006
    Location
    Jacksonville, FL
    Posts
    236
    Plugin Contributions
    0

    Default Re: Rounded Borders Using Snazzy Borders

    Awesome! I got it to work! Thanks, Kim!
    John L.
    MultiMedia Designer

  4. #4
    Join Date
    Jun 2003
    Posts
    33,715
    Plugin Contributions
    0

    Default Re: Rounded Borders Using Snazzy Borders

    Whew! 'specially since I hadn't actually tried it
    Please do not PM for support issues: a private solution doesn't benefit the community.

    Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

  5. #5
    Join Date
    Feb 2005
    Location
    New Jersey
    Posts
    646
    Plugin Contributions
    0

    Default 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

  6. #6
    Join Date
    Sep 2006
    Location
    Jacksonville, FL
    Posts
    236
    Plugin Contributions
    0

    Default 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:

    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!
    John L.
    MultiMedia Designer

  7. #7
    Join Date
    Feb 2007
    Posts
    212
    Plugin Contributions
    0

    Default Re: Rounded Borders Using Snazzy Borders

    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



  8. #8
    Join Date
    Oct 2005
    Location
    Eastern US
    Posts
    488
    Plugin Contributions
    0

    Default Re: Rounded Borders Using Snazzy Borders

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

    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


    Code:
    <?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.)

  9. #9
    Join Date
    Feb 2007
    Posts
    212
    Plugin Contributions
    0

    Default Re: Rounded Borders Using Snazzy Borders



    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

  10. #10
    Join Date
    Mar 2008
    Posts
    8
    Plugin Contributions
    0

    Default Re: Rounded Borders Using Snazzy Borders

    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.
    but mine is different and can be ignored (i think so)
    there is a gap between my banner and nav bar when i browse using IE.

    anyway, nice modification u made.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Rounded Corner Borders
    By BeautyHealth.com.cy in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Nov 2010, 02:13 PM
  2. Template modding with CSS rounded boxes/borders. How To?
    By SeánT in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 27 Sep 2010, 03:18 PM
  3. Snazzy Borders or Nifty Corners Cube?
    By audradh in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 28 Feb 2008, 05:52 AM
  4. rounded corner borders for sideboxes
    By sparkyclark in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 19 Jul 2006, 04:41 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR