Nigel Brown Posted August 8, 2010 Posted August 8, 2010 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 Posted August 8, 2010 Posted August 8, 2010 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 Posted August 8, 2010 Author Posted August 8, 2010 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 Posted August 8, 2010 Posted August 8, 2010 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 Posted August 8, 2010 Author Posted August 8, 2010 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 Posted August 8, 2010 Posted August 8, 2010 Nigel, Yes, if you want to specify a particular change then look at the file and the stylesheet. Chris
Nigel Brown Posted August 8, 2010 Author Posted August 8, 2010 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
npn2531 Posted August 8, 2010 Posted August 8, 2010 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 Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120
Guest Posted August 8, 2010 Posted August 8, 2010 Hey George, I never knew that. Learn something new every day ! Chris
MrPhil Posted August 8, 2010 Posted August 8, 2010 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 Posted August 8, 2010 Posted August 8, 2010 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. Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120
npn2531 Posted August 10, 2010 Posted August 10, 2010 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 Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120
Recommended Posts
Archived
This topic is now archived and is closed to further replies.