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)

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.


All times are GMT -8. The time now is 06:27 PM.

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