Pure CSS Rounded Boxes! (no images, no tables)

kalonji · #21 11-05-2007, 10:56 PM

Thank you for posting this

impact-computers · #22 11-07-2007, 05:52 AM

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 · #23 11-07-2007, 07:06 AM

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 · #24 11-07-2007, 09:49 AM

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 · #25 11-07-2007, 10:33 AM

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 · #26 11-07-2007, 11:53 AM

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 · #27 11-07-2007, 12:01 PM

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 · #28 11-07-2007, 12:04 PM

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 · #29 11-07-2007, 12:06 PM

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 · #30 11-09-2007, 05:19 AM

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.