stylesheet.css

August 14, 2005

I am trying to change the Table backgrounds to Transparent but dont know the HTML codie for this can anyone help.

I would also like the outline of the boxes to be black, whats the code for that.

Which lines do I change in the stylesheet

Thanks in Advance

dahui · August 14, 2005

i do not find the orginal contrib this file was in anymore so her it is, a nice explanation line by line to the standard css

Modification in stylesheet.css


IN ADVANCE, SORRY FOR MY LEVEL IN ENGLISH? (JDLR) 

--------------------------------------------------------------------------------------------------------------
by JEAN DE LA ROCHEBROCHARD
--------------------------------------------------------------------------------------------------------------
Don?t change these lines please.
It?s just a question of respect for the author.
--------------------------------------------------------------------------------------------------------------
MODIFIED A FIRST TIME BY: Christopher Phillips
I cleaned up a chunk of spelling and grammar, as well as added a few bits and pieces as I saw fit. This guide is certainly far from done, but it?s a decent start for newbs who want to get things rolling.
--------------------------------------------------------------------------------------------------------------
MODIFIED A SECOND TIME BY:
--------------------------------------------------------------------------------------------------------------
MODIFIED A THIRD TIME BY:
--------------------------------------------------------------------------------------------------------------

*** A Note to the (Newb) User***

*A Primer in Hex-colors
Colors on the Internet are displayed by a # followed by a six digit hexadecimal value. By taking the amount of red, green and blue in a color, and translating them into hexadecimal, we create the six digits. These digits are used to show the amount of each primary color, for example, a bright purple is lots of red, lots of blue, and no green. This would be displayed as #FF00FF ( FF is ?all? red, 00 is ?no? green, and FF for ?all? blue)
A light gray has even amounts of all colors? so let?s use an example of a 75% gray. Since the range a color can be is from zero to 255, a ?75% gray? would be 75% of 255 = 191. And 191 in hex is = (use the Windows Calculator set to HEX in Scientific mode) ?BF?. So our color is #BFBFBF. Remember, ?#? is ALWAYS first, followed by the red, the green, and then the blue.

Bright red = #FF0000
Bright green = #00FF00
Bright Blue = #0000FF
Purple = #FF00FF
Turquoise (cyan)= #00FFFF
Yellow =  #FFFF00
White = #FFFFFF (maximum color)
Black = #000000 (No color)

Using this method, you have 16,777,216 colors available. Experiment! 


* I STRONGLY suggest you do NOT change more than one or two settings at a time. Change it, save it, upload it, and refresh a separate browser window to view your work. Too many times I have seen a colored header with the same color text in them, because someone changed a bunch of things, and then they wonder what happened.

*And one last note: You would do well to sit and plan out the exact color scheme of your website, with hex values for the colors (#XXXXXX) of ALL text areas, their headings and the fonts within them. Decide what your menus will be, what backgrounds, etc, THEN come in here and start fiddling. You?ll save a TON of work! Trust me.
CP
--------------------------------------------------------------------------------------------------



The file stylesheet.css is situated in the folder "/CATALOG/" usually.
Within this one, you can modify the color, the background, and size of all text areas...



On With The Guide:

font-size  :  for the size of the text (numeric value)
font-family  :  for the family of the text (eg. Serif, sans-serif, etc)
font-weight  :  for the text (underline, bold...)
background  :  for the color in background



1
--------------------------------------------------------------------------------------------------------------

/*
 $Id: stylesheet.css,v 1.50 2002/11/02 03:06:05 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2001 osCommerce

 Released under the GNU General Public License
*/

--------------------------------------------------------------------------------------------------------------

Don't touch this part out of respect of the authors of the program.


2
--------------------------------------------------------------------------------------------------------------

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #XXXXXX; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #XXXXXX; }
.productsNotifications { background: #XXXXXX; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #XXXXXX; text-decoration: underline; }

--------------------------------------------------------------------------------------------------------------

line 1 : you can change the family and the size of the text
  in the boxes within the menus on the left and right.

line 2 : /// do not modify /// That is for the errors

line 3 : modify only if you have stocks
                               
line 4 : changes the background of products notifications

line 5 : changes the font details within the order edit box


3
--------------------------------------------------------------------------------------------------------------

BODY {
 background: #XXXXXX;
 color: #XXXXXX;
 margin: 0px;
}

--------------------------------------------------------------------------------------------------------------

line 2 : page's background : WARNING : this is not the head of the page.

line 3 : color of the text in the page : 

line 4 : margin size (amount of ?white space? between the elements)


4
--------------------------------------------------------------------------------------------------------------

A { 
 color: #XXXXXX; 
 text-decoration: none; 
}

A:hover { 
 color: #XXXXXX; 
 text-decoration: underline; 
}

FORM {
display: inline;
}

--------------------------------------------------------------------------------------------------------------

line 2 : links color on the page.

line 3 : a choice of option for the links: this will remove the underline links typically have

line 7 : links color when hover over them with the mouse.

line 8 : choice of option : here we see ?underline? ? other options ?overline, line through, blink, none?


5
--------------------------------------------------------------------------------------------------------------

TR.header {
 background: #XXXXXX;
}

TR.headerNavigation {
 background: #XXXXXX;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #XXXXXX;
 color: #XXXXXX;
 font-weight : bold;
}

--------------------------------------------------------------------------------------------------------------

line 2 : color of the heading on the page.

line 6 : color of the menu on top.

line 10 : family

line 11 : size 

line 12 : background color
          
   BE CAREFUL!!! : LINE 12 IS THE REAL BACKGROUND, NOT LINE 6!
Line 6?s background refers to the header Navigation bar only.

line 13 : font color

line 14 : option


6
--------------------------------------------------------------------------------------------------------------

A.headerNavigation { 
 color: #XXXXXX; 
}

A.headerNavigation:hover {
 color: #XXXXXX;
}

--------------------------------------------------------------------------------------------------------------
here, this is like the link for the number "4"
but it's for the menu on top (Navigation Bar)
"hover" means "when your mouse goes over the words" ? it doesn?t mean ?click on?.


7
--------------------------------------------------------------------------------------------------------------

TR.headerError {
 background: #XXXXXX;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #XXXXXX;
 color: #XXXXXX;
 font-weight : bold;
 text-align : center;
}

--------------------------------------------------------------------------------------------------------------

for the errors. I would suggest leaving as default? hopefully you?d never see this, right?;)


8
--------------------------------------------------------------------------------------------------------------

TR.headerInfo {
 background: #XXXXXX;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #XXXXXX;
 color: #XXXXXX;
 font-weight: bold;
 text-align: center;
}

--------------------------------------------------------------------------------------------------------------

for the heading? same format as all the rest? getting used to it yet?


9
--------------------------------------------------------------------------------------------------------------

TR.footer {
 background: #XXXXXX;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #XXXXXX;
 color: #XXXXXX;
 font-weight: bold;
}

--------------------------------------------------------------------------------------------------------------

footer it for the navigation banner in the bottom part of the page where the date and counter can be found.

without me, you can do it...


10
--------------------------------------------------------------------------------------------------------------

.infoBox {
 background: #XXXXXX;
}

.infoBoxContents {
 background: #XXXXXX;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

--------------------------------------------------------------------------------------------------------------

menus on the left and right.

line 6 : background color of "boxes" in the menus

I don't suggest touching the font size, it's really not necessary...


11
--------------------------------------------------------------------------------------------------------------

.infoBoxNotice {
 background: #XXXXXX;
}

.infoBoxNoticeContents {
 background: #XXXXXX;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

--------------------------------------------------------------------------------------------------------------

and more boxes?


12
--------------------------------------------------------------------------------------------------------------

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #XXXXXX;
 color: #XXXXXX;
}

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

--------------------------------------------------------------------------------------------------------------

Here, modify the first part. It?s for the banner in the box?s top (the title of boxes). 
Change the second part like the first.

shema:

------------
menu
------------
hardware
software
freeware
------------

here, "menu" is on top...

This is about half-way, but the real meaty parts are coming!


13
--------------------------------------------------------------------------------------------------------------

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
 background: #XXXXXX;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
 background: #XXXXXX;
}

--------------------------------------------------------------------------------------------------------------

here for the address book, payment... :

the first background is for the new entry

the second is for the old entry of a name; for example in the address book.


14
--------------------------------------------------------------------------------------------------------------

TR.productListing-heading {
 background: #XXXXXX;
}

TD.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #XXXXXX;
 color: #XXXXXX;
 font-weight: bold;
 font-variant: small-caps;
}

--------------------------------------------------------------------------------------------------------------

Here are the options for the heading on the "products list by price or name" when you click on a category. (The ?text buttons? at the top, where you can ?click to sort?)


15
--------------------------------------------------------------------------------------------------------------

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

A.pageResults { 
 color: #XXXXXX; 
}

A.pageResults:hover { 
 color: #XXXXXX; 
 background: #XXXXXX; 
}

--------------------------------------------------------------------------------------------------------------

Some options for the product's list:
family, size, color, and link's options


16
--------------------------------------------------------------------------------------------------------------

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #XXXXXX;
}

--------------------------------------------------------------------------------------------------------------

Options for the product's title in the individual presentation:
size, family, option, color.


17
--------------------------------------------------------------------------------------------------------------

TR.subBar {
 background: #XXXXXX;
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #XXXXXX;
}

--------------------------------------------------------------------------------------------------------------


18
--------------------------------------------------------------------------------------------------------------

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #XXXXXX;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

--------------------------------------------------------------------------------------------------------------

main :    product description

smalltext : 	 text in the bottom part of the product like "this product was 
	 added to our catalog on Saturday 04 January, 2003."
	 or "Click to enlarge".

accountcategory :	account category

fieldkey :  name of the field in "advanced search" for example.

fieldvalue :            [ don't touch ]

tableHeading : 	 for the products in the cart :
	 "quantity, remove..."


19
--------------------------------------------------------------------------------------------------------------

SPAN.newItemInCart {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #XXXXXX;
}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #XXXXXX;
 font-weight: bold;
}

TABLE.formArea {
 background: #XXXXXX;
 border-color: #XXXXXX;
 border-style: solid;
 border-width: 1px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #XXXXXX;
 font-weight: bold;
}

SPAN.productSpecialPrice {
 font-family: Verdana, Arial, sans-serif;
 color: #XXXXXX;
}

--------------------------------------------------------------------------------------------------------------

newitemincart  : new products in the cart. in the right part, in the "cart" box...

checkbox...  : about the form, don't touch, it's not necessary, for sure !
    the same for text area

greetuser  : on the main page, this is your name or "GUEST".

form 	 : don't touch this one

markproductoutstock	: for the text : out of stock

productspecialprice	: for the special price text


20
--------------------------------------------------------------------------------------------------------------

.moduleRow { }
.moduleRowOver { background-color: #XXXXXX; cursor: hand; }
.moduleRowSelected { background-color: #XXXXXX; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #XXXXXX; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #XXXXXX; }

--------------------------------------------------------------------------------------------------------------



Create a good part of your site before doing operation number 17, 18, 19, 20.

Enjoy!

and this might be helpful as well

http://www.oscommerce.com/community/contri...arch,stylesheet

and

english http://en.selfhtml.org/

SELFHTML Documentation (only the CSS Style Sheets chapter is translated into english)

greetz dahui

stylesheet.css

Recommended Posts

Guest

Link to comment

Share on other sites

dahui

Link to comment

Share on other sites

Archived

Browse

Activity