Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls
 

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

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #21  
Old 11-05-2007, 10:56 PM
 
kalonji kalonji is offline
 

Member
  
Join Date: Aug 2007
Posts: 15
 

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

Thank you for posting this
__________________
xcart 4.2 Gold
Fashion Mosaic Blue.
Unix Hosted
Reply With Quote
  #22  
Old 11-07-2007, 05:52 AM
 
impact-computers impact-computers is offline
 

Advanced Member
  
Join Date: Apr 2006
Location: Sunderland
Posts: 70
 

Default 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; }
__________________
www.Impact-Computers.co.uk (Live Store)
www.Forums.Impact-Computers.co.uk (Customer Forums)

X-Cart version 4.0.19 Gold

Mods installed:
CDSEO
Tab Product Menu
Easy Checkout
Froogle Feed
Shopping.com Feed
Remember Me
Pleasent Payment Details
Recently Viewed Products
Google Checkout
TelaFirma - X-Cart Dynamic Image Generator
Reply With Quote
  #23  
Old 11-07-2007, 07:06 AM
 
typologist typologist is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 51
 

Default 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.
__________________
4.1.8 Gold (Unix)
Reply With Quote
  #24  
Old 11-07-2007, 09:49 AM
 
WestCoastBikers WestCoastBikers is offline
 

Member
  
Join Date: Mar 2007
Posts: 18
 

Default 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?
__________________
x-cart-4.1.9 Gold
Reply With Quote
  #25  
Old 11-07-2007, 10:33 AM
 
eddy eddy is offline
 

Senior Member
  
Join Date: Jan 2007
Location: California
Posts: 152
 

Default 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.
__________________
www.goldnwax.com
v5.4.30
Reply With Quote
  #26  
Old 11-07-2007, 11:53 AM
 
typologist typologist is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 51
 

Default 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; }
__________________
4.1.8 Gold (Unix)
Reply With Quote
  #27  
Old 11-07-2007, 12:01 PM
 
typologist typologist is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 51
 

Default 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.
__________________
4.1.8 Gold (Unix)
Reply With Quote
  #28  
Old 11-07-2007, 12:04 PM
 
WestCoastBikers WestCoastBikers is offline
 

Member
  
Join Date: Mar 2007
Posts: 18
 

Default 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...
__________________
x-cart-4.1.9 Gold
Reply With Quote
  #29  
Old 11-07-2007, 12:06 PM
 
WestCoastBikers WestCoastBikers is offline
 

Member
  
Join Date: Mar 2007
Posts: 18
 

Default 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
__________________
x-cart-4.1.9 Gold
Reply With Quote
  #30  
Old 11-09-2007, 05:19 AM
 
impact-computers impact-computers is offline
 

Advanced Member
  
Join Date: Apr 2006
Location: Sunderland
Posts: 70
 

Default 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.
__________________
www.Impact-Computers.co.uk (Live Store)
www.Forums.Impact-Computers.co.uk (Customer Forums)

X-Cart version 4.0.19 Gold

Mods installed:
CDSEO
Tab Product Menu
Easy Checkout
Froogle Feed
Shopping.com Feed
Remember Me
Pleasent Payment Details
Recently Viewed Products
Google Checkout
TelaFirma - X-Cart Dynamic Image Generator
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 03:51 PM.

   

 
X-Cart forums © 2001-2020