Pure CSS Rounded Boxes! (no images, no tables)
Rounded boxes are a very cool feature in any design. Most of them use images or tables to achieve this effect, but this solution is only CSS based, and all browsers compatible. I Adapted from Nicholls boxes code. Enjoy:
To replace only your sideboxes: 1. In skin1.css and in skin1_admin.css add this: Code:
/*Round corner sideboxes*/ 2. In menu.tpl, replace all the code with this: Code:
<div class="xrounded"> To replace your dialog boxes (center boxes): 1. Do step one above, if not done. 2. In dialog.tpl, replace all the code with this: Code:
To replace your product list boxes (boxes around each product thumb): 1. Do step one at the beggining of this post, if not done. 2. In customer/main/products_t.tpl, replace this: Code:
with this: Code:
3. In skin1.css add this (below the code in step1): Code:
.xroundedthumb h1, { I replaced all the tables with divs, to improve speed and control. Remember that you can further edit the css to use another font color, size, box width, etc. Hope it helps!! ;) |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Could you post a link showing an example of this?
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
1 Attachment(s)
Here it is a sample of how your boxes will look. Of course you can edit how it looks in the CSS. 8)
Attachment 556 |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Thanks for posting.
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
=D> THANK YOU for posting this!!!
You saved me from a lot of ](*,). |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Thanks for sharing. Have you tried this with FireFox?
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Is class xroundedcenter (used by dialog) not defined? I change it to xrounded and it is working fine in Firefox now. Thanks
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Thank you for this mod!!
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Brilliant, thanks very much. This has been on my list of jobs for a while and you have just saved me loads of time.
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
I put this in my new site. But the featured products top is bad any idea?
http://onlinemacs.com/home.php |
Re: Pure CSS Rounded Boxes! (no images, no tables)
See my post #7
Change the following in dialog.tpl <div class="xroundedcenter"> to <div class="xrounded"> |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Thanks that did it.
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
I guess you use firefox. this problem does not show up in IE
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Works well thanks !!! ;-)
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Very nice and easy to implement, the best available for x-cart THANKS.
Is there a way to use rounded boxes on product list page around the product. Work well for 4.1.8 and 4.1.9 THANKS Regards |
Re: Pure CSS Rounded Boxes! (no images, no tables)
I'd be interested to know this too. We display 3 products per per but at the moment only use square boxes that look a little poor
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
I've done this, but it does not seem to work in Safari anyone know a fix for that? Image Reflections is the site i'm using it on |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
When i make changes to the css it doesn't update the colours/fonts
the other thing is some of the block on the homepage use menu_added.tpl Can anyone help? |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
Quote:
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Thank you for posting this
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Hi,
I tried the mod but when updating the .css to make changes to the colours and layout they did update. my skin.css: Code:
BODY { FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif; color: #1F1F1F; font-size: 12px; background-color: #DDDDDD; margin: 0px; } |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
I installed this mod love it - but one thing I notice is that it screws up Fancy Catagories just slightly - you can see it at my store in progress at http://store.digitalgaurddawg.com - when you click to expand the catagories the lines are messsed up. http://store.digitalguarddawg.com/fancy-catagories-messed.png Any ideas on how to fix? |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Looks great to me, but how would I fit the help box. The title is a link. I could live with out the link, just the word help.
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
Add this code to your skin.css: Code:
.color_a a{ |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
It seems like that repeating line is an image called "tree_subdir_line.gif", which its not in your css, but hardcoded in the same file of fancy categories. |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
No that did not correct it - tested in firefox and safari... :( |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
Fixed it by changing: div.xboxcontent div{ padding: 0 4px 0 8px; } to div.xboxcontent div{ padding: 0 4px 0 0px; } Seemed ot solve it. John |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
I did add the code but have since removed it as it wasn't updating when i made changes. |
Re: Pure CSS Rounded Boxes! (no images, no tables)
This is great... I was wondering. Can this be done with the overall wrapper?
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
1 Attachment(s)
Sorry, maybe I'm not using the correct terminology. Basically, I am talking about the "frame" for the public pages. The default for x-cart is 100% width in the rectangle_top.tpl. I adjusted it to 90% and centered. My question is, can that be framed with a rounded box somehow?
|
Re: Pure CSS Rounded Boxes! (no images, no tables)
1 Attachment(s)
Hi
many thanks for the mod - excellent work!. However I am experiencing a strange problem that I am hoping you can help me out with... Prior to using your code changes, I made some other changes to show my categories as icons instead of plain text. But if I have more than six subcategories my right hand menu boxes (ie "Your cart" & "Authentication") go off the edge of the screen. For example if you could look at : http://www.grangewildbirdcare.co.uk/home.php?cat=1 this looks fine, however you will see my problem when you go to: http://www.grangewildbirdcare.co.uk/home.php?cat=3 Any ideas what I may have done wrong? Many thanks Kev For further info... to try and eliminate any problems with my previous modifications I created a new test site (Xcart Gold 4.1.9) and only edited the skin1.css, skin1_admin.css and menu.tpl in order to only replace the sideboxes. If you look at the attached image, the correct image on the left is from the "Terms & conditions" page, whereas the image on the right shows the "Contact us" page. Hope this may help finding where I have messed up.... |
Re: Pure CSS Rounded Boxes! (no images, no tables)
I love this mod, however, it seems to have messed up my fonts/styling for my static pages, as well as my privacy statement pages. I can open the pages through the admin site, but whatever changes I make don't get applied. They are a wreck, and are simply difficult to read now!
It looks like the problem lies within the coding of the dialog.tpl document, but I can't seem to pinpoint which part of the new code is controlling the fonts, and over-writing any changes I try to apply through the admin side of the website. Any ideas of how to edit the dialog.tpl code so that it only changes the headers of the boxes, and not the text inside? I would love some help! Thanks! -Alisa |
Re: Pure CSS Rounded Boxes! (no images, no tables)
ok, forgive as I'm a total novice at editing css/templates and such.
Tried the mod and it works great but I notice it replaces an image with a colour. Before I had an image with a gradient fading top and bottom now I just have one colour. Is it possible to get my image back and still have the menu corners? |
Re: Pure CSS Rounded Boxes! (no images, no tables)
Quote:
Did you ever find a solution to this? |
Re: Pure CSS Rounded Boxes! (no images, no tables)
2 Attachment(s)
I do find this modification quite nice opposed to the default values. But I have a few problems that some of you might be able to clear up for me.
I've followed all the steps necessary (on page 1). Problems: 1. After changing the rectangle_top.tpl file inside my skin1 directory with the following code I'm experiencing that all text, both on the customer front and admin section, is centered. Now I really want the width to be a bit smaller than 100% and also I would love to have the site centered if possible (see attachement 01). Code:
{* $Id: rectangle_top.tpl,v 1.25 2006/02/07 08:09:51 max Exp $ *} 2. The boxes on my right side are missing their pixels that defines the closing of the box from some pages (see attachement 02). 3. How can I get the round effect on the top and bottom menus? |
Re: Pure CSS Rounded Boxes! (no images, no tables)
2 Attachment(s)
I am in the process of trying to change my cart from the default look to something better and would like to implement this mod. My problem is like you can see in the photos below and the Recently Viewed box gets overlapped by the Help box. If you refresh the page all is fine. This only happens in Firefox/Mozilla and not IE7.
Any help will be welcomed since I am trying to leasrn CSS as well. Mike |
Re: Pure CSS Rounded Boxes! (no images, no tables)
try changing ** PADDING-RIGHT: 22px; *** in skin1.css. this is for wank3r
.VertMenuRightColumn { VERTICAL-ALIGN: top; PADDING-LEFT: 20px; PADDING-RIGHT: 22p |
All times are GMT -8. The time now is 09:17 AM. |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.