X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   Pure CSS Rounded Boxes! (no images, no tables) (https://forum.x-cart.com/showthread.php?t=33828)

typologist 09-10-2007 07:29 PM

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*/

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.2em;
padding:0 8px 3px 8px;
border-bottom:1px solid #d0d0d0;
}
.xrounded p, .zrounded p {
margin:0;
padding:5px 0;
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent;
width:100%;  /*Adjust the width here*/
float:left;
margin:0 0 15px 0;
line-height:125%;
}
.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 #d0d0d0;
border-right:1px solid #d0d0d0;
}
.xb1 {
margin:0 5px;
background:#d0d0d0;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #d0d0d0;
border-width:0 1px;
height:auto;
background:#fff;
}

div.xboxcontent div{
padding: 0 4px 0 8px;

}

* html .xboxcontent {
height:1px;
}

.color_a {
background: #A5D3FF; /* Change the top part color here*/
color:#000;
}



2. In menu.tpl, replace all the code with this:
Code:

<div class="xrounded">
<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">{if $link_href}<a href="{$link_href}">{/if}{$menu_title}{if $link_href}</a>{/if}</h1>
<div><p>
{$menu_content}</p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>



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:

 
{* $Id: dialog.tpl,v 1.25 2005/12/20 08:50:49 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<div class="xrounded">
<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">{$title}</h1>
<div>{$content}
&nbsp;</p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
{/if}




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:

 
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
    <td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
    </td>
</tr>
</table>



with this:
Code:

 
<div class="xroundedthumb">
<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">{if $link_href}<a href="{$link_href}">{/if}{$menu_title}{if $link_href}</a>{/if}</h1>
<div><p>
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}    </p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>



3. In skin1.css add this (below the code in step1):
Code:

.xroundedthumb h1, {
margin:0;
font-size:1.2em;
padding:0 8px 3px 8px;
}
.xroundedthumb p, {
margin:0;
padding:5px 0;
font-size:10px;
line-height:125%;
}
.xroundedthumb {
background: transparent;
width:100%;
float:left;
margin:0 0 15px 0;
line-height:125%;
}




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!! ;)

Vacman 09-10-2007 09:56 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Could you post a link showing an example of this?

typologist 09-11-2007 03:40 AM

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

cyberdriveway 09-23-2007 11:56 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks for posting.

apanda 09-23-2007 04:32 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
=D> THANK YOU for posting this!!!

You saved me from a lot of ](*,).

dsoong 09-23-2007 09:42 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks for sharing. Have you tried this with FireFox?

dsoong 09-23-2007 09:58 PM

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

ramdial 09-24-2007 07:43 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thank you for this mod!!

Andrew Gadsden 09-24-2007 03:43 PM

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.

jmell 09-26-2007 07:46 AM

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

dsoong 09-26-2007 08:33 AM

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

jmell 09-26-2007 10:20 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks that did it.

dsoong 09-26-2007 10:30 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
I guess you use firefox. this problem does not show up in IE

rashriaz 10-23-2007 06:06 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Works well thanks !!! ;-)

eaglemobiles 10-24-2007 03:20 PM

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

Freakmode 11-02-2007 12:41 AM

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

Steils 11-02-2007 10:30 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by dsoong
See my post #7

Change the following in dialog.tpl

<div class="xroundedcenter">


to



<div class="xrounded">



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

Steils 11-02-2007 11:44 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by Steils
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

Nevermind you have to have Safari 3.0, which does not show up on Software updates.

impact-computers 11-03-2007 05:41 AM

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?

typologist 11-03-2007 12:19 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by eaglemobiles
Is there a way to use rounded boxes on product list page around the product.

Yes, see again the first post of this thread, I added how to do this.


Quote:

Originally Posted by dsoong
Change the following in dialog.tpl

<div class="xroundedcenter">


to


<div class="xrounded">

Thanks, I fixed this also.

kalonji 11-05-2007 10:56 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thank you for posting this

impact-computers 11-07-2007 05:52 AM

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; }
DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT { FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif; color: #373737; font-size: 11px; }
A:link { color: #27331E; TEXT-DECORATION: none; }
A:hover { color: #FF0000; TEXT-DECORATION: underline; }
A:active { color: #27331E; TEXT-DECORATION: none; }
H1 { font-size: 13px; color: #3A4863; text-transform: uppercase; font-weight: bold; }
H2 { FONT-SIZE: 13px; color: #E87400; }
H3 { FONT-SIZE: 12px; color: #A40000; }
HR { color: #CDDBC1; HEIGHT: 1px; }
.okvir { width: 97%; }
.HeadBox { BACKGROUND-COLOR: #FFFBD3; }
.HeadText { background-color: #800000; font-size: 11px; FONT-WEIGHT: bold; color: #FFFFFF; vertical-align: bottom; }
.HeadLine { background-color: #4F0000; color: #FFFFFF; padding: 5px; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #000000; }
.VertMenuBox { background-color: #EEEEEE; }
.VertMenuBorder { background-color: #4F0000; }
.VertMenuTitle { background-color: #800000; color: #FFFFFF; FONT-WEIGHT: bold; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid #000000; padding: 2px; }
.VertMenuItems { color: #172033; TEXT-DECORATION: none; }
.VertMenuItems:link { color: #172033; TEXT-DECORATION: none; }
.VertMenuItems:visited { color: #172033; TEXT-DECORATION: none; }
.VertMenuItems:hover { color: #FF0000; TEXT-DECORATION: underline; }
.VertMenuItems:active { color: #172033; TEXT-DECORATION: none; }
.VertMenuHr { color: #172033; }
.CategoriesList { font-size: 12px; background-image: url('images/bullet2.gif'); background-repeat: no-repeat; background-position: left; padding-left: 20px; }
.DialogBox { BACKGROUND-COLOR: #ffffff; }
.DialogBorder { background-color: #A3A3A3; }
.DialogTitle { color: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px; padding: 4px; background-color: #800000; border-top: 1px solid #8B8B8B; border-right: 1px solid #8B8B8B; border-left: 1px solid #8B8B8B; background-image: url('images/new_16.gif'); background-repeat: no-repeat; background-position: left; padding-left: 15px; text-transform: uppercase; }
.DialogTitle2 { color: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px; padding: 5px; background-color: #800000; border: 1px solid #000000; background-image: url('images/new_16.gif'); background-repeat: no-repeat; background-position: left; padding-left: 15px; text-transform: uppercase; }
.NumberOfArticles { COLOR: #000000; FONT-WEIGHT: bold; padding: 3px; }
.TopLabel { color: #FFFFFF; FONT-WEIGHT: bold; font-size: 11px; }
.TopLabel2 { color: #FFFFFF; font-size: 11px; }
.TopLabel2 a { color: #FFFFFF; }
.Text { COLOR: #000000; }
.DecorTr { COLOR: #389DA6; }
.AdminSmallMessage { COLOR: #FF3300; }
.AdminTitle { COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px; }
.Line { background-color: #800000; }
.ProductTitle { COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px; }
.ProductTitleHidden { COLOR: #666666; FONT-WEIGHT: bold; FONT-SIZE: 11px; }
.ProductDetailsTitle { color: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px; text-transform: uppercase; }
.ProductPrice { color: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 14px; text-transform: uppercase; }
.ProductDetails { COLOR: #000000; }
.ProductPriceTitle { COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px; }
.ProductPriceConverting { COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px; }
.ProductPrice { COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px; }
.ProductPriceSmall { COLOR: #FF3300; FONT-WEIGHT: bold; }
.MarketPrice { FONT-SIZE: 14px; FONT-FAMILY: Times New Roman; }
.ItemsList { color: #172033; FONT-WEIGHT: bold; }
#Disabled { color: #676767; }
.NavigationPath { color: #800000; TEXT-DECORATION: none; font-size: xx-small; }
.NavigationPath:link { color: #800000; font-size: xx-small; }
.NavigationPath:visited { color: #800000; }
.NavigationPath:hover { color: #69747E; text-decoration: underline; }
.NavigationPath:active { color: #800000; }
.FormButton { COLOR: #970000; FONT-WEIGHT: bold; }
.Button { FONT-FAMILY: Arial; BACKGROUND: URL(images/butbg.gif); background-color: #AC2046; color: #31384D; FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-DECORATION: none; }
.CustomerMessage { COLOR: #FF3300; FONT-WEIGHT: bold; }
.ErrorMessage { COLOR: #FF3300; FONT-WEIGHT: bold; }
.Star { COLOR: #FF0000; }
.HighLight { background-color: #D5DEEC; }
.SaveMoneyLabel { COLOR: #FFFFFF; FONT-WEIGHT: bold; }
.TableHead { BACKGROUND-COLOR: #CCCCCC; FONT-WEIGHT: bold; }
.TableSubHead { BACKGROUND-COLOR: #EEEEEE; }
.TableLine { BACKGROUND-COLOR: #F0F0F0; }
.SmallNote:link { color: #808080; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif; }
.SmallNote:visited { color: #808080; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif; }
.SmallNote:hover { color: #FF0000; TEXT-DECORATION: underline; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif; }
.SmallNote:active { color: #595959; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif; }
.SmallText { COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif; }
.Bottom { background-color: #4F0000; color: #FFFFFF; font-size: 10px; padding: 3px; }
.Bottom a { color: #FFFFFF; text-decoration: none; font-weight: bold; }
.Bottom a:hover { color: #FF8040; }
.Tab { color: #4F0000; background-color: #FFFFFF; text-transform: uppercase; font-weight: bold; font-size: xx-small; }
.Tab a { color: #000000; text-decoration: none; }
.CatMenuItemOff { BACKGROUND-COLOR: transparent; BORDER-RIGHT: none; BORDER-TOP: none; BORDER-LEFT: none; BORDER-BOTTOM: none; MARGIN-BOTTOM: 1px; MARGIN-TOP: 1px; MARGIN-LEFT: 1px; MARGIN-RIGHT: 2px; CURSOR: hand; }
.CatMenuItemOffExp { BACKGROUND-COLOR: transparent; BORDER-RIGHT: none; BORDER-TOP: none; BORDER-LEFT: none; BORDER-BOTTOM: none; MARGIN-BOTTOM: 1px; MARGIN-TOP: 1px; MARGIN-LEFT: 1px; MARGIN-RIGHT: 2px; CURSOR: hand; }
.CatMenuItemOn { BACKGROUND-COLOR: #FF8600; BORDER-RIGHT: #FF8600 1px solid; BORDER-TOP: #FF8600 1px solid; BORDER-LEFT: #FF8600 1px solid; BORDER-BOTTOM: #FF8600 1px solid; MARGIN-LEFT: 1px; MARGIN-RIGHT: 2px; CURSOR: hand; }
.CatSubMenu { BACKGROUND-COLOR: #E8EDF4; BORDER-RIGHT: #8E4B00 1px solid; BORDER-TOP: #8E4B00 1px solid; BORDER-LEFT: #8E4B00 1px solid; BORDER-BOTTOM: #8E4B00 1px solid; MARGIN-LEFT: 1px; MARGIN-RIGHT: 2px; }
.CatMenuItem { FONT-SIZE: 12px; FONT-FAMILY: Arial; CURSOR: hand; }
.CatMenuItem:link { COLOR: #970000; }
.CatMenuItem:visited { COLOR: #970000; }
.CatMenuItem:hover { COLOR: #970000; }
.CatMenuItem:active { COLOR: #970000; }
.left { background-color: #EEEEEE; }
.print_space { border-bottom: 1px solid #2C2C58; padding: 3px; }
.NavDialogTitle { font-size: 11px; font-weight: bold; color: #970000; }
.NavDialogBorder { background-color: #FFBE7D; }
.NavDialogBox { background-color: #FFFFCC; }
.PopupHelpLink:link { FONT-SIZE: 9px; COLOR: #970000; TEXT-DECORATION: none; }
.PopupHelpLink:visited { FONT-SIZE: 9px; COLOR: #970000; TEXT-DECORATION: none; }
.PopupHelpLink:hover { FONT-SIZE: 9px; COLOR: #970000; TEXT-DECORATION: none; }
.PopupHelpLink:active { FONT-SIZE: 9px; COLOR: #970000; TEXT-DECORATION: none; }
.MediaElementProperties { COLOR: #666666; FONT-SIZE: 10px; }
.SubHeader2Line { BACKGROUND-COLOR: #CCCCCC; }
.HightLightRow { BACKGROUND-COLOR: #B0B0B0; font-weight: bold; }
.HightLightEqualRow { BACKGROUND-COLOR: #ffe8af; }
.VertMenuSubTitle { BACKGROUND-COLOR: #FFA92F; }
.header_minicart { color: #EEEEEE; TEXT-DECORATION: none; }
.header_minicart:link { color: #EEEEEE; TEXT-DECORATION: none; }
.header_minicart:visited { color: #EEEEEE; TEXT-DECORATION: none; }
.header_minicart:hover { color: #D20000; TEXT-DECORATION: underline; }
.header_minicart:active { color: #EEEEEE; TEXT-DECORATION: none; }
.adv_search, .adv_search a:link, .adv_search a:visited { color: #FFFFFF; }
.adv_search a:hover { color: #FF8C8C; }
#categories a { display: block; background-color: #EEEEEE; border-bottom: 1px solid #FFFFFF; padding-left: 7px; padding-top: 2px; padding-bottom: 2px; color: #172033; padding-right: 3px; }
#categories a:hover { background-color: #DFE4E6; color: #4F0000; text-decoration: none; }
.header_sub { background-color: #D8D8D8; padding: 4px; border-bottom: 1px solid #B2B2B2; }
.listing { background-color: #FFFBFB; border: 1px solid; padding: 7px; border-color: #E1E1E1; cursor: pointer; }
.listing2 { background-color: #FFF0F0; padding: 7px; border: 1px solid #FFAAAA; cursor: pointer; }
.menu_box { padding: 7px; }
#categories_cart a { display: block; background-color: #DFDFDF; padding-left: 10px; padding-top: 2px; padding-bottom: 2px; color: #1B1B1B; padding-right: 3px; border: 2px #DEE8D7 1 solid; margin: 3px; border-bottom: 1px #666666 solid; border-right: 1px #666666 solid; }
#categories_cart a:hover { background-color: #D3D3D3; color: #27331E; text-decoration: none; }
.main { background-color: #FDFEFC; }
.options1 { padding: 10px; background-color: #FFF4F4; border: 1px solid #C0C0C0; }
.options2 { padding: 2px; padding-left: 20px; background-image: url('images/down_16.gif'); background-repeat: no-repeat; background-position: left; }
.logo { background-color: #800000; }
.MiniCartTextSmall { FONT-SIZE: 9px; }
.NoBorder {
border-bottom: 0px solid #FFFFFF;
border-left: 0px solid #FFFFFF;
border-right: 0px solid #FFFFFF;
border-top: 0px solid #FFFFFF;
}
.Thumbnail {
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}


typologist 11-07-2007 07:06 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by impact-computers
Hi,

I tried the mod but when updating the .css to make changes to the colours and layout they did update.

Thats because you didnt add the code to skin.css, read the step 1 in the first post of this topic.

WestCoastBikers 11-07-2007 09:49 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by typologist
Thats because you didnt add the code to skin.css, read the step 1 in the first post of this topic.


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?

eddy 11-07-2007 10:33 AM

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.

typologist 11-07-2007 11:53 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by eddy
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.


Add this code to your skin.css:
Code:

.color_a a{
color:#fff;
}


typologist 11-07-2007 12:01 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by WestCoastBikers
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?


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.

WestCoastBikers 11-07-2007 12:04 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by typologist
Add this code to your skin.css:
Code:

.color_a a{
color:#fff;
}



No that did not correct it - tested in firefox and safari... :(

WestCoastBikers 11-07-2007 12:06 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by typologist
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.



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

impact-computers 11-09-2007 05:19 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by typologist
Thats because you didnt add the code to skin.css, read the step 1 in the first post of this topic.



I did add the code but have since removed it as it wasn't updating when i made changes.

zeta1600 11-12-2007 05:04 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
This is great... I was wondering. Can this be done with the overall wrapper?

typologist 11-12-2007 08:59 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by zeta1600
This is great... I was wondering. Can this be done with the overall wrapper?

Overall wrapper? I dont understand what you mean. Can you elaborate on this?

zeta1600 11-12-2007 09:07 AM

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?

kevin34 11-13-2007 02:29 PM

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

northstar 11-17-2007 10:44 AM

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

Swish 11-22-2007 05:23 AM

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?

wank3r 12-16-2007 08:55 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by zeta1600
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?


Did you ever find a solution to this?

wank3r 12-16-2007 09:29 AM

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 $ *}
<center>
<table class="Container" cellpadding="0" cellspacing="0" width="{$width|default:"85%"}">
<tr><td class="Container">
</center>


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?

mltriebe 12-19-2007 02:42 AM

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

ramdial 12-21-2007 07:01 PM

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 05:18 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.