Main Menu
| Home |
| Blog |
| News Feeds |
| FAQs |
Sponsored Links
| osCommerce - The Stylesheet |
|
|
|
As with most complex web applications, osCommerce uses a style sheet to define much of the visual presentation of the pages within the system. Cascade style sheets (CSS) are the prefered manner for applying styles because all the style definitions are stored in a central location and therefore can be applied to multiple HTML files. Its also common to find what are know as inline styles, where the style is defined within the HTML tag:
They can also be found in the <HEAD> section of an HTML file between <style></style> tags. Although both of those methods require applying styles on a more individual basis. Hence, style sheets do save a lot of typing as well as helping to standardize the over all look and theme of a web site. The style sheet for osCommerce is named stylesheet.css and found in the root folder of the osCommerce installation. For the purposes of osCommerce, style definitions come in three different flavors, Tag Styles, Class Styles, and Class Styles that are tied to a tag. These are three examples from the style sheet in respective order:
I purposely left the formatting of these examples the same as they are found in the style sheet to make it easier to follow along and identify, however it also serves to explain point. That is that line returns or any other sort of "white space" in style sheet code is ignored. So you can have all the styles on a single line or multiple lines, and even blank lines in between. The only important thing to remember is that the individual styles need to end with a semicolon. Ok now back to the lesson at hand. The first example "A" is a Tag Style, meaning this style will apply to every "A" tag on the page. The second example ".boxText" is a class style. We know its a class style because it begins with a "." (dot). Class styles can generally be applied to any tag within the page and the syntax looks like this"
This code tells the browser to display this particular TD with the styles found in ".boxText". Notice in the tag's "class=" part that there is no "." (dot) before the word "boxText". The third example "TR.header" is a class style that is tied to a tag, in this case "TR" This means the style can only be used with "TR" tags, but it is still coded the same way as any class style:
Now when working with style sheets, that someone else has created, some times things can get a little confusing and frustrating, that can be especially true with osCommerce. When you find yourself wanting or needing to make a visual change, I've found a technique that works fairly well. That is to load the page in question into your browser and then do a view source. By doing so you are looking at the HTML code which has been rendered to your browser without the PHP code in the way. The view source will not always be formatted for easy reading, in fact it can still be somewhat difficult to read, so it takes a little patients to find what you are looking for. Lets use an example to more fully explain how the process works. This is taken from the main default osCommerce page: Lets assume that we want to change the text that says "What's New Here?", so that the text is black instead of that gray color. At this point we really don't know what it is that we need to change in the code. So with the page open in a browser, click on the "view" menu, and the "source". The HTML source code for the page opens up in Notepad. We could now scan the code looking for "What's new" but an easier way is to just do a search. Doing so we find this code:
We are concerned with the tags that surround the text, "What's New Here?", and there we see a TD tag which is using the class "pageHeading". So now we know that the formatting for the text is defined in a style class called "pageHeading". Now lets go back to the style sheet and see what we can find. Doing a search on the file for the word "pageHeading" leads us to the following code:
Something interesting about this particular style definition. We know from our previous discussion this is a class definition that is tied to a tag, but its a little different, it has two tags its tied to, TD and DIV. Any changes that we make here are going to effect all TD and DIV tags that have the pageHeading class. We could approach this two ways. One would be to separate this into two different definitions or we can leave them together. However its reasonable to assume that these tags were left together for a reason, so we'll go ahead and leave them that way. The syntax for a style definition is: property:value; The properties themselves are fairly easy to understand. Here we are defining the font "Verdana", font size "20px", font weight "bold", and color "#9a9a9a". Color is the property we are interested in changing, so lets take a closer look there. In a style sheet colors can be defined two ways. The first is to use the English word, such are red, blue, black, etc. The second and more preferred way is to use the Hex value for the color. The Hex value is preferred because there are more options available. There is nothing that says you cannot mix the two, however the code is more uniform and follows a standard if you use one or the other. In Hex color codes, #FFFFFF translates to white and #000000 translates to black. Every other color is something in between. I'm not going to get into how the Hex values work here, but there is plenty of information available on the web concerning the subject as well as color charts. We want to change the color of the text to black, so we change that particular line of code to look like this:
All that's left to do is safe the style sheet and upload it to your web server. Now if we go back and refresh the page we find that "What's New Here?" now appears in black, just that easy. Obviously this was a fairly simple example, there are many others that would be more complex. However the principles all remain the same. The important thing is to take your time, and make small changes at a time. And as always be sure you make a backup of any files you are changing so you always have something to fall back on. Happy coding. |
| < Prev | Next > |
|---|