Printable View
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!
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.
Awesome! I got it to work! Thanks, Kim!:clap:
:clap: Whew! 'specially since I hadn't actually tried it
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
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:
If you look in the code, you'll see where the html for the borders is copied. HTH!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; ?> //-->
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,
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!
CSSZenGarden.com is an amazing site that can teach alot!
Probably supposed to "zen" you out with happiness. *LOL*Quote:
Originally Posted by Lawbird123
Remember "Zen and the Art of Motorcycle Maintenance?" *LOL* I never did read that one.
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
Unfortunately, I never got the time to figure that one out. Im sure someone in the forums would know where to paste the html.
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)
Thank you!!Quote:
// 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="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">
<a class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></a>
<?php echo $content; ?>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Tatiana
To answer my own question, I changed the margins below to fix the 'nudging sidebox' issue:
But I'm still left with the problem of the sideboxes sticking together (vertically).Quote:
.xsnazzy {
background: white;
width:240px;
float:left;
margin: 0;
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
Hi Lawbird123,
how can I change the distance between the sidebox?
Can you help please ..?
Hi tatiana77,
I saw your website has been solve on the "sticking-issue" ..
can you help me to instruct please ..
many thanks ..
bambus,
thats a stylesheet fix... send a URL and i'll help you out.
Tatiana,
I checked out your site and it looks like you have everything rockin'! Keep it up!
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:
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...Quote:
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
margin-bottom: 1em
Tatiana
Hi Lawbird123,
I installed via XAMPP .. the Stylesheet is from default
Bambus
Hi tatiana77,
it doesn´t change anything ..
I use the default stylesheet as mentioned ..
Bambus
Bambus, please post your website's URL so we can view the source code of the stylesheet to better help you.
Example, my website's URL is www.wolfandrabbit.com/zencart...
Sorry that coding didn't help... sometimes there are other things in the stylesheet that would cause the issue.
Tatiana
Hello,
this is awesome...was looking exactly for that, but also have the issue that the boxes are too close together at the bottom/top.
Any help is very much appreciated.
The website is www.clickyshop.com/new_shop1
Thanks in advanced.
regards,
kruna
OK tatianas lips are awesome, if theyre hers that is :P... to answer your question tho, you need to take a look at the css that affects your sideboxes. I would recommend using FF, dling the web developer ext and running view style information to find out what you need to change
:D, thanks for the tip, I almost got it, not the way I would like to but for now it is ok...just played around with the margins...
regards,
kruna
I finally implemented this on a customer's site and actually added a "white space" to the bottom that can be varied. Worked great! I still have to go in and clean up the code though. I was working in a hurry and need to tweak it, so I'll be the first to admit it's pretty rough. *LOL*
Took me a while to figure out how to mod the center boxes, and I'm still trying to finish some things on it, but if you're interested, the site is:
http://buxhamsales.com/catalog/
Like I said, I'm still tweaking it, but I put them on the header, footer, etc.
I also need to figure out how to translate it to the list table layout for product listings.
(And the categories box was modified in the template, not with a 3rd party mod either.)
HTH,
Lesli - might want to look at the Center boxes at lower screen resolutions.
Thanks Kim. He wants them set big -- he set them to where he wanted.
Oh, thank you guys for this thread! It has helped lead me to the right path, but now I'm stuck. Have you guys figured out how to apply these rounded corners to the main text area? I've got the individual product listing mastered, but I want to add these to the main areas (index info, shipping info, etc.) as well as the product listing page (around each offered product).
Here are some URLs:
What I'm currently working on:
http://www.babylonink.com/store
The general idea of what I'm going for:
Main Page
Gallery Page
These were built with straight HTML and CSS, so you get the general idea. I'm having trouble locating where the snazzy code needs to go in the PHP files and (honestly) I'm too tired tonight to keep hunting.
Any help would be greatly appreciated! Thanks guys!!
I have been playing with this for the last few weeks. I solved the sticky problems of the sideboxes by adding padding to the .xsnazzy statement:
.xsnazzy {
background: transparent;
/*width:150px;*/
/*float:left; */
padding: 5px 0;
}
I commented out two statements since they weren't relevant for my site but are a part of the original code. I added rounded corners to the rest of my site but IE insists on adding extra borders to the main wrapper. I haven't figured out how to fix that issue, but the rest of it seems to look good. The WebDeveloper plug in for FireFox really helped work out the styling.
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...
Code:<!--// 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:
Just can't find the darn thing, and I'm wondering if maybe I'm not putting the code into the php correctly.Code:<!--// 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; ?> //-->
Any thoughts?
Audra
Audra,
It would help if you posted a link to the site. I know I had the same problem at first (and I still do on my test site because it's just a test site and wasn't worth fxing). I used the FF Web Dev Addon and that guided me to the right direction in fixing my problem. If you post a link, I'll see if I can help you with your spacing problem.
Hi,
i have managed to round the left and right columns... JUst a little query..
1. Want the left hand column to have a background...but only in the catogories section??? any suggesion??? i have managed to put a light grey but looks a bit :huh:
2. How do i move the catagories text back into the rounded column???
www.splay.co.uk
Thank you
And what a great mod!!! im a newbie and managed to do it!! lol :clap:
I'm mind-numbing lately w/ my obvious omission of key details lately:lookaroun
www.tiptopcountrystore.com
Thanks!
BTW, I purposely left-aligned the center column content in order to make sure the appropriate margin is in place.
#categoriesContent ??Quote:
Originally Posted by vik007
See 2 posts above. You can see how I managed to get the heading into the rounded corners, but it threw off the margins.Code:2. How do i move the catagories text back into the rounded column???
Sorry, that is more like 4 posts above
Hi, im sorry but bit lost??? :oops:
so i need to edit the tpl_left do i?
And what do i replace with what?? im sorry its just im a total newbie?
and the #categoriesContent is the way to add the colour just in the rounded box is it? and is this done in the stylesheet yes??
I'm a newbie to css myself, so I'm not sure that I can give you the right answer, but yes, the color will be specified in your stylesheet.
/includes/templates/YourTemplate/css/stylesheet.css
It seems you have already managed it, but just put it in the wrong place.
I think that you have now colored #categories
Change that to #categoriesContent
That is going to color the background of the box containing your categories, but not the heading "Categories." I'm not sure if that is what you want.
It is also not going to color the rounded edge at the top or bottom. In order to color that you need to add your color style to
.xb1
.xb2
.xb3
and
.xb4
Sorry, in a rush. I'll try and get back to you about the heading later.
Audra
Hi,
Currently i have the following:
#categoriesContent {
text-decoration: underline; color: white;
font-size: 12px;
}
#categoriesContent {background-color: #b4b4b4;}
I am now trying the colour the top and bottom of the rounded side box.
you state i must do this in xb1 etc.
This is the style sheet section
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#444;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
So iv tried to add it as follows:
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#444;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
background:#ff0000;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
background:#ff0000;
}
.xb3 {
margin:0 2px;
background:#ff0000;
}
.xb4 {
height:2px;
margin:0 1px;
background:#ff0000;
}
But no luck???
Is www.tiptopcountrystore.com your site??
Oh wow managed to do it..sumhow..lol :smartalec:
Its just that the color has also been applied to the right hand columns..:huh: which not what i was really after..but heyy will try sort that somehow...lol
appreciate it if you could help me to sort the text in the box,...when you have a bit of time that would be great and vey much appreciated..
vik
www.splay.co.uk
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.
If you compare the code, you will see that I just moved the call for the sidebox headings inside the snazzy div.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; ?> //-->
<!--// <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; ?> //-->
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="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.: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
inside of the the div class="xsnazzy"Code:<h3 class="rightBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
To save you the work of replacing all the left column references, here is my complete code for tpl_box_default_right.php
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: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; ?> //-->
: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?
Not sure if/how you fixed it, but i added <p><p> to the closing section for the side boxes which does it for meQuote:
Originally Posted by audradh
<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:
http://organicgojifarm.com/zen/cat_sample.gif
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:
and so on with the others......PHP 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 -->
Great contribution.Quote:
Originally Posted by cla74
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.
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...?
Or does anyone know how i could acheive this?Quote:
Originally Posted by gee38l
I am using snazzy for round corner, i can change the color of left border and right border in .boxcontent but i dont know how to change the color of top border and bottom border. Anybody know this?
Hi,
I tried this and got a strange result:
http://server2.camelot-hosting.com/~mandmstr/
I changed CSS and tpl right and left.
Could anybody tell me what's wrong ?
I am a newbee when it comes to templates...
Thanks
What's the problem? Your borders look round to me. This is obviously a work in progress, but not knowing how it looked before adding Snazzy, I'm not sure what got messed up.
(BTW, I am seeing horizontal scroll on your site.)
Peace,
Audra
I have had no problems integrating the snazzy borders on my site... it loouks great though I have concerns about the excessive use of the b tag... might try substituting it for something else . any thoughts?
Hi
I have installed this and got rounded borders on the left side boxesboxes, but the header of the box is misplaced up above the sidebox.
Anyone give me a pointer as to how to fix this.
Is it also possible to use an image for the background of the header with this mod ?
Regards
Laurie
Probably help if I gave you the link to the site too.
http://www.chalfontnet.co.uk/chalfon....php?main_page
Doh !!!
I'm trying to figure out where to put the information to get my sideboxes to be rounded. Our site is www.funkymunkys.ca
From http://www.cssplay.co.uk/boxes/snazzy2.html I found this which I assume by the listing on the page it goes directly into the stylesheet:
Cascading Style Sheet
.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background: transparent;
width:240px;
float:left;
margin:0 3px;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}
.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
.color_d {
background:#b2ab9b;
color:#000;
}
Then there is also this below that....How would I go about putting that in? Do I have to make a new php file for each sidebox? Or can I just make a tpl_box_default_right.php and place it in there?
Typical xhtml
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Blah Blah Title</h1>
<p>You are not currently logged in.</p>
<p>If you don't have a login you can
<a href="#nogo">register here</a>.</p>
<p>If you have one, then LOGIN <a href="#nogo">here</a>.</p>
<p>If you don't know if you should have one - and need convincing
that free, confidential, fast and useful is not enough then click
<a href="#nogo">here for a demo</a>.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
I would love a step by step if anyone could spare the time. I'm still trying to figure out zen cart (and php altogether). Although I have made alot of progress on our site for not knowing alot :)
One question I have as well, will this work fine if I'm using a different color for each sidebox background and border?
me too, if anyone can post clearer instructions...
Hi I have implemented this code:
http://www.cssplay.co.uk/boxes/snazzy2.html
into my site:
http://www.rosedakinjewellery.com.au...=index&cPath=1
and although I can see it has rounded the corners .. I have no idea how to style it. Do I have to make my category header image with rounded corners and then how do I get the category headers to sit inside the rounded corners.
Thanks guys .. really appreciate your help
I have tried this, but I got strange results. Please help me on. I put the image of the problem under the attachment.
Could someone please provide better instructions on how to implement this for those of us that don't know alot about html and php?