Stylesheet.css

[Nigel Brown]

Hello fellow oscers

 

Newish to oscommerce and learning fast.

 

quick question, hope its a quick answer,

 

Sytlesheet.css, if I change fonts and colours in there, will it apply itself to all the pages that I amend for?

 

Many thanks

 

Nigel

[Guest]

Nigel,

 

Changing fonts for a class will change all of the files with that class in it.

 

For example:

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

 

with the class, you can change the font, font size, font color and background color as well as font weight. (This is the class for the breadcrumb and navigation bar just under the header).

 

 

Chris

[Nigel Brown]

Thanks very much Chris

 

Could you just clarify the word "class" and its context.

 

Sorry, just not a word I m familiar with in oscommerce.

 

Thanks again

 

Nigel

[Guest]

Hi Nigel,

 

Sure......look at this code from the header.php file:

 

<table border="0" width="100%" cellspacing="0" cellpadding="1">

<tr class="headerNavigation">

<td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>

<td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   </td>

</tr>

</table>

 

Notice this class="headerNavigation"

 

so, everything with the class="headerNavigation" that is within a <TD> will be effected if you change this code in the stylesheet.css:

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

 

 

Chris

[Nigel Brown]

ok, think I am getting there.

 

So to recap.

 

Everything with Class= and within TD will be changed if I change stylesheet.

 

So I will have to look in files to see if it is affected by the sytlesheet change?

 

 

Thanks again

 

Nigel

[Guest]

Nigel,

 

Yes, if you want to specify a particular change then look at the file and the stylesheet.

 

 

 

Chris

[Nigel Brown]

I don't suppose someone has drawn up a list of what the different php files do, where they appear and what they are called on the stylesheet have they? or is that just wishful thinking.

 

Thanks

 

Nigel

[Guest]

Wishful thinking Nigel :D

 

 

 

Chris

[npn2531]

Actually it has been done:

http://addons.oscommerce.com/info/4692

 

And here is a nifty tool you can install in the admin that will list the pages a given css selector from the stylesheet appears on. Kind of like a reverse phone book for the above.

http://addons.oscommerce.com/info/6007

[Guest]

Hey George,

 

I never knew that. Learn something new every day !

 

 

 

Chris

[MrPhil]

Everything with Class= and within TD will be changed if I change stylesheet.

Um, not quite.

 

What you are playing with is "Cascading Style Sheets" (CSS). At this point, what you need to know is that there are "selectors" which have a list of "properties" to be applied to them. Properties are things like color, font-weight, etc. Selectors determine what the properties apply to. You can list HTML elements (e.g., td for table cell contents), ids (specific element on a page, identified by id="name" in the HTML, and #name in the CSS), and classes (a type/class of element, identified by class="name" in the HTML, and .name in the CSS).

 

TD.headerNavigation would apply to table cells (TD) with class="headerNavigation". There are a number of complicated rules for chaining selectors (elements, ids, classes, descendents-of, parent-child, etc.) and there are rules for how properties are inherited and which rule applies if multiple selectors apply to one element. Have fun learning!

[npn2531]

Maybe even more useful is in Firefox when viewing a page you can use the tools>webdeveloper to display all kinds of CSS and page info. For example it will superimpose all the class and id labels from the stylesheet on each element. I would imagine other browsers have something similar as well. In Firefox, I can't remember if I had to go and add it to the toolbar, but it is really handy.

[npn2531]

Hey George,

 

I never knew that. Learn something new every day !

 

 

 

Chris

This will make us both feel ignorant: This description of the stylesheet definitions has been in the knowledge base all along. Knifeman just posted it on another thread.

 

http://216.92.47.228/kb/osCommerce/Catalog_Area/Design_and_Layout/54