anyone here familiar with editing css style sheets?
#1
I go duffy on dem bitches
Thread Starter
Join Date: Mar 2001
Location: Gonzales, Louisiana
Posts: 28,247
Likes: 0
Received 0 Likes
on
0 Posts
anyone here familiar with editing css style sheets?
i'm trying to do a favor for my cousin who's working on setting up a cart for a friend of hers and i'm tryign to figger out how to change some of the colors. i'd wing it if it were mine but it's for someone else so i'd rather make sure i do it right.
#4
I go duffy on dem bitches
Thread Starter
Join Date: Mar 2001
Location: Gonzales, Louisiana
Posts: 28,247
Likes: 0
Received 0 Likes
on
0 Posts
how
can i paste the stylesheet.css here along with the link to the store?
http://www.sgwcreations.com/store/
can i paste the stylesheet.css here along with the link to the store?
http://www.sgwcreations.com/store/
Code:
/* * Main Styles BEGIN */ body{ margin: 0px; background-repeat: repeat-x; background-color: #C17bC1; font-family: Tahoma, Verdana; color: #666666; font-size: 11px; font-weight: normal; text-decoration: none; } hr.separator{ height: 1px; color: #E5E5E5; background-color: #E5E5E5; border: 0px; } img { border: 0; } input, textarea, select { border: 1px solid gray; font-family: Verdana, Arial, sans-serif; color: #333333; font-size: 11px; background-color: #FFEEFF; } input[type="checkbox"], input[type="radio"], input[type="image"] { border: 0; background-color: transparent; } input[type="button"], input[type="submit"]{ border: 1px solid gray; font-family: Verdana, Arial, sans-serif; font-size: 11px; background-color: #DDDDDD; } /* Main Menu Styles */ .MainMenu{ font-family: Tahoma, Verdana; color: #ffffff; font-size: 12px; font-weight: bold; } .MainMenu a{ color: #ffffff; text-decoration: none; } .MainMenuHighlight{ font-family: Tahoma, Verdana; color: #FB7F93; font-size: 12px; font-weight: bold; } .MainMenuHighlight a{ color: #FB7F93; text-decoration: none; } /* Page Title Style */ .PageTitle { font-family: Tahoma, Verdana; color: #C63983; font-size: 12px; font-weight: bold; text-align: left; } /* Your Shopping Cart Text Style */ .ShoppingCartText{ font-family: Tahoma, Verdana; color: #ffffff; font-size: 11px; font-weight: normal; } .ShoppingCartText a{ color: #ffffff; text-decoration: none; } /* Required Style */ .Required { color: red; } /* Error Style */ .Error { color: red; } /* Store Closed Style */ .StoreClosedText { font-family: Tahoma, Verdana; color: #C63983; font-size: 16px; font-weight: bold; } /* Larger Image Text Styles */ .LargerImageLink{ font-family: Tahoma, Verdana; color: #666666; font-size: 10px; } .LargerImageLink a{ color: #666666; text-decoration:underline; } .LargerImageLink a:hover{ color: #999999; text-decoration:underline; } /* Copyright Text Styles */ .CopyrightText{ font-family: Tahoma, Verdana; color: #333333; font-size: 11px; font-weight: normal; } .CopyrightText a{ color: #333333; text-decoration: none; } /* * Main Styles END */ /* * Category Styles BEGIN */ .CategoryName{ font-family: Tahoma, Verdana; color: #C63983; font-size: 12px; font-weight: bold; } .CategoryName a{ color: #C63983; text-decoration: underline; } .CategoryName a:hover{ color: #D369A2; } .CategoryDescription{ color: #333333; font-family: Tahoma, Verdana; font-size: 11px; font-weight: normal; } /* * Category Styles END */ /* * Product Styles BEGIN */ .ProductName{ font-family: Tahoma, Verdana; color: #666666; font-size: 11px; font-weight: bold; } .ProductName a{ color: #666666; text-decoration: none; } .ProductName a:hover{ color: #BBBBBB; text-decoration: none; } .ProductDescription{ font-family: Tahoma, Verdana; color: #333333; font-size: 11px; font-weight: normal; } .ProductPrice{ font-family: Tahoma, Verdana; color: #CC3399; font-size: 11px; font-weight: bold; } .ProductStockMessage{ font-family: Tahoma, Verdana; color: red; font-size: 12px; font-weight: bold; padding: 5px; } .ProductOptionsTitle{ font-family: Tahoma, Verdana; color: #666666; font-size: 11px; font-weight: bold; } .ProductOptions{ font-family: Tahoma, Verdana; color: #333333; font-size: 11px; font-weight: normal; text-align: left; } .ProductOptions input, .ProductOptions textarea, .ProductOptions select{ } /* * Product Styles END */ /* * Breadcrumb Styles BEGIN */ .Breadcrumb { padding: 0; margin: 0; width: 100%; background-color: white; font-family: Tahoma, Verdana; color: #333333; font-size: 11px; text-align: left; } .Breadcrumb a{ color: #CD3C53; text-decoration: underline; } .Breadcrumb a:hover{ color: #DA7080; } /* * Breadcrumb Styles END */ /* * NavigationBar Styles BEGIN */ .NavigationBar { padding: 0px; margin: 2px; width: 180px; background-color: white; } .NavigationBar table td{ border-top: #E5E5E5 1px solid; border-left: #E5E5E5 1px solid; border-right: #E5E5E5 1px solid; font-family: Tahoma, Verdana; color: #333333; font-size: 11px; font-weight: normal; text-align: left; } .NavigationBar table td.Empty { padding: 10px; font-weight: bold; text-align: center; } .NavigationBar table td.LevelDefault{ padding: 1px 0px 7px 60px; } .NavigationBar table td.LevelDefault a{ color: #333333; text-decoration: none; } .NavigationBar table td.LevelDefault a:hover{ color: #888888; } .NavigationBar table td.Level1{ padding: 1px 0px 7px 20px; font-weight: bold; } .NavigationBar table td.Level1 a{ color: #333333; text-decoration: none; } .NavigationBar table td.Level1 a:hover{ color: #888888; } .NavigationBar table td.Level2{ padding: 1px 0px 7px 40px; } .NavigationBar table td.Level2 a{ color: #333333; text-decoration: none; } .NavigationBar table td.Level2 a:hover{ color: #888888; } .NavigationBar table td.Selected{ background-color: #E5E5E5; } .NavigationBar table td.Selected a{ color: #C63983; text-decoration: none; } .NavigationBar table td.Selected a:hover{ color: #D369A2; } /* * NavigationBar Styles END */ /* * Subcategories List Styles BEGIN */ .Subcategories{ padding: 0px; margin: 2px; width: 100%; background-color: white; vertical-align: top; text-align: center; } /* the following styles are inherited from .CategoryName */ .Subcategories .CategoryName{ padding: 2px; } .Subcategories .CategoryName a{ } .Subcategories .CategoryName a:hover{ } /* * Subcategories List Styles END */ /* * Product List Styles BEGIN */ .ProductList{ padding: 0px; margin: 2px; width: 100%; background-color: white; vertical-align: top; } .ProductList table td{ vertical-align: top; } .ProductList .Empty{ padding: 30px 0px 40px 0px; font-family: Tahoma, Verdana; color: #C63983; font-size: 14px; font-weight: bold; text-align: center; } /* the following styles are inherited from Category Styles */ .ProductList .CategoryName{ } .ProductList .CategoryDescription{ padding-top: 6px; } /* the following styles are inherited from Product Styles */ .ProductList .ProductName{ padding-top: 7px; padding-bottom: 10px; text-align: center; } .ProductList .ProductDescription{ padding: 10px; } .ProductList .ProductPrice{ padding: 5px; text-align: center; } /* * Product List Styles END */ /* * Paginator Dropdown Styles BEGIN */ .PaginatorDropdown { padding: 0; margin: 0; width: 100%; font-family: Tahoma, Verdana; color: #333333; font-size: 11px; background-color: white; } .PaginatorDropdown select{ } /* * Paginator Dropdown Styles END */ /* * Paginator Styles BEGIN */ .Paginator { padding: 0; margin: 0; margin-bottom: 8px; width: 100%; font-family: Tahoma, Verdana; color: #333333; font-size: 11px; background-color: white; height: 20px; vertical-align: bottom; } .Paginator a{ color: #CD3C53; text-decoration: underline; } .Paginator a:hover{ color: #DA7080; text-decoration: underline; } /* * Paginator Styles END */ /* * Product Images Styles BEGIN */ .ProductImages { padding: 0px; margin: 2px; width: 100%; border: 1px #E5E5E5 solid; font-family: Tahoma, Verdana; font-size: 12px; color: #666666; font-weight: normal; background-color: white; text-align: left; } .ProductImages TH{ padding: 2px; background-color: #E5E5E5; } .ProductImages IMG{ padding: 10px; border: 2px solid #FFFFFF; } .ProductImages IMG:hover{ padding: 10px; border: 2px solid #E5E5E5; } /* * Product Images Styles END */ /* * Related Products Styles BEGIN */ .RelatedProducts { padding: 0px; margin: 2px; width: 100%; border: 1px #E5E5E5 solid; font-family: Tahoma, Verdana; font-size: 12px; color: #666666; font-weight: normal; background-color: white; text-align: left; } .RelatedProducts TH{ padding: 2px; background-color: #E5E5E5; } .RelatedProducts IMG{ padding: 10px; border: 2px solid #FFFFFF; } .RelatedProducts IMG:hover{ padding: 10px; border: 2px solid #E5E5E5; } .RelatedProducts A{ font-family: Tahoma, Verdana; font-size: 11px; color: #666666; font-weight: normal; text-decoration: none; } .RelatedProducts A:hover{ font-family: Tahoma, Verdana; font-size: 11px; color: #666666; font-weight: normal; text-decoration: underline; } /* * Related Products Styles END */ /* * Product Info Styles BEGIN */ .ProductInfo { padding: 0px; margin: 2px; width: 100%; border: 1px #E5E5E5 solid; font-family: Tahoma, Verdana; font-size: 12px; color: #666666; font-weight: normal; background-color: white; text-align: left; } /* the following styles are inherited from Product Styles */ .ProductInfo .ProductName { padding: 6px; } .ProductInfo .ProductDescription { } .ProductInfo .ProductPrice { padding-bottom: 7px; } /* * Product Info Styles END */ /* * Shopping Cart Styles BEGIN */ .ShoppingCart { padding: 0px; margin: 2px; width: 100%; background-color: white; font-family: Tahoma, Verdana; color: #333333; font-size: 11px; font-weight: normal; text-decoration: none; } .ShoppingCart .Empty{ padding: 30px 0px 40px 0px; font-family: Tahoma, Verdana; color: #C63983; font-size: 14px; font-weight: bold; text-align: center; } .ShoppingCart input{ } /* * Shopping Cart Styles END */ /* * Search Result Styles BEGIN */ .SearchResult { padding: 0px; margin: 2px; width: 100%; background-color: white; } .SearchResult .Empty{ padding: 30px 0px 40px 0px; text-align: left; font-family: Tahoma, Verdana; color: #666666; font-size: 12px; font-weight: bold; } .SearchResult .Highight { background-color: #F9C6F9; } .SearchResult .ProductName { padding: 0px; padding-bottom: 5px; text-align: left; } /* the following styles are inherited from Product Styles */ .SearchResult .ProductName a{ } .SearchResult .ProductName a:hover{ color: #888888; } .SearchResult .ProductDescription { } .SearchResult .ProductDescription a { color: #333333; text-decoration: none; } .SearchResult .ProductDescription a:hover { color: #888888; } .SearchResult .ProductNumber { font-family: Tahoma, Verdana; color: #666666; font-size: 11px; font-weight: bold; } /* * Search Result Styles END */ /* * Checkout Styles BEGIN */ .Checkout { padding: 0px; margin: 2px; width: 100%; background-color: white; font-family: Tahoma, Verdana; color: #333333; font-size: 11px; font-weight: normal; text-decoration: none; } .Checkout .Title { padding: 12px 0px 5px 15px; font-family: Tahoma, Verdana; color: #C63983; font-size: 12px; font-weight: bold; text-align:left; } .Checkout .Block { padding: 15px; border: 1px #E5E5E5 solid; } .Checkout .ColumnTitle { white-space: nowrap; color: #666666; font-weight: bold; } .Checkout .ColumnValue { } .Checkout .TotalLabel { white-space: nowrap; padding-right: 7px; font-weight: bold; } .Checkout .TotalValue { font-weight: bold; } .Checkout .Left { text-align:left; } .Checkout .Right { text-align:right; } .Checkout .Center { text-align:center; } .Checkout input.Normal, .Checkout textarea.Normal, .Checkout select.Normal { } .Checkout input.Error , .Checkout textarea.Error, .Checkout select.Error { border: 1px solid red; } .Checkout select.Short { width: 100px; } .Checkout .Required { } .Checkout .Error { } .Checkout .Errors { padding: 15px; color: red; text-align: left; line-height: 20px; } .Checkout .Empty { padding: 30px 0px 40px 0px; font-family: Tahoma, Verdana; color: #C63983; font-size: 14px; font-weight: bold; text-align: center; } .Checkout .ImpossibleToComputeShippingCost { padding: 20px; color: #C63983; font-size: 12px; font-weight: bold; text-align: center; } .CurrencyNotAppropriateForActivePaymentModules { padding: 20px; color: #C63983; font-size: 12px; font-weight: bold; text-align: center; } /* * Checkout Styles END */ .OrderInfo .field { text-align: right; background: #EEF2F8; color: #333333; } .OrderInfo .value { text-align: left; } .OrderInfo .products_header { color: #333333; background: #EEF2F8; } .OrderInvoice { color: black; font-size: 8pt; } .OrderInvoice .field { font-weight: bold; text-align: right; } .OrderInvoice .value { color: #666666; text-align: left; } .OrderInvoice .group_header { color: black; text-decoration: underline; font-size: 10pt; font-weight: bold; } .OrderInvoice .price_field { font-weight: normal; text-align: right; color: black; } .OrderInvoice .price_value { font-weight: bold; color: black; text-align: left; } /************************************************** Manufacturers Filter ***************************************************/ ul.ManufacturersList { padding: 0; margin: 0; padding-left: 20px; /* display: inline; */ } ul.ManufacturersList li { list-style: none; line-height: 1.8; /* display: inline; */ margin: 5px; } ul.ManufacturersList li a { color: #5A3333; } ul.ManufacturersList li a:HOVER { color: #666666; } /************************************************** ProductListSorter ***************************************************/ div#product-list-sorter, div#product-list-sorter ul { display: inline; padding: 0px; margin: 0px; } div#product-list-sorter ul li { display: inline; padding: 0px; margin: 5px; } div#product-list-sorter ul li a { color: #5A3333; } div#product-list-sorter ul li a:HOVER { color: #666666; } /************************************************** Contact Us Page ***************************************************/ div#contact-us { padding: 10px; line-height: 20px; } div#contact-us img { float: left; margin: 0px 20px 10px 0px; width: 200px; height: 200px; border: 0px; } div#contact-us div.Title { margin-top: 10px; font-weight: bold; } div#contact-us div.Text { line-height: 14px; font-weight: normal; } div#contact-us div.Label { float: left; font-weight: normal; width: 45px; margin-top: 4px; } div#contact-us input { margin: 2px; width: 385px; } div#contact-us input[type="submit"]{ width: 50px; } div#contact-us textarea { margin: 2px; width: 430px; height: 200px; }
#7
well, you have to find out which elements, that you want to change, are using what style class, and modify those.
in the web document, look for "class="xyz",
e.g.
in the style sheet, find the corresponding class:
or, it may be set up via id, such as, in the document:
then in the style sheet,
it starts to make sense from there.
in the web document, look for "class="xyz",
e.g.
Code:
<span class="xyz">some text</span>
Code:
.xyz { color: #ff0000 }
Code:
<div id="thisDiv">some text</div>
Code:
#thisDiv { color: #00a0a0 }
Last edited by reno96teg; 09-10-2009 at 09:26 AM.