Guest Posted July 1, 2010 Posted July 1, 2010 I've installed OCS to CSS which is great, but I'm finding that the product detail pages and review pages are not following the CSS as shown on the main page and cart pages. I'm not sure which .php pages I need to check to see what to adjust so they follow the css styling set by the stylesheet. Any pointers would be appreciated. Quote
npn2531 Posted July 1, 2010 Posted July 1, 2010 I've installed OCS to CSS which is great, but I'm finding that the product detail pages and review pages are not following the CSS as shown on the main page and cart pages. I'm not sure which .php pages I need to check to see what to adjust so they follow the css styling set by the stylesheet. Any pointers would be appreciated. There are different CSS selectors for the product listings and for the product description or shopping cart. These selectors are added in includes/classes/boxes and on the page itself. Probably the most difficult way to match up selectors to what you see on the screen is to go through the programming. An easier way is the toolbar on Firefox, ( I'm sure other browsers have something similar as well). You just go to the page you want to locate the css selectors for in Firefox and then on the toolbar go information>Display ID & Class details. Then every element on the page is tagged with it's css selector. For example the product listing (includes/modules/product-listings.php) are selectors like .pl-name, .pl-buynow, .pl-image, etc. On product description (product_info.php) you will see selectors like .productprice On the shopping cart (shopping_cart.php) you will see selectors like .cartlisting-image, .cart-product, .cart-qty, .cartlisting-data Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120
Guest Posted July 1, 2010 Posted July 1, 2010 (edited) There are different CSS selectors for the product listings and for the product description or shopping cart. These selectors are added in includes/classes/boxes and on the page itself. Probably the most difficult way to match up selectors to what you see on the screen is to go through the programming. An easier way is the toolbar on Firefox, ( I'm sure other browsers have something similar as well). You just go to the page you want to locate the css selectors for in Firefox and then on the toolbar go information>Display ID & Class details. Then every element on the page is tagged with it's css selector. For example the product listing (includes/modules/product-listings.php) are selectors like .pl-name, .pl-buynow, .pl-image, etc. On product description (product_info.php) you will see selectors like .productprice On the shopping cart (shopping_cart.php) you will see selectors like .cartlisting-image, .cart-product, .cart-qty, .cartlisting-data Thanks very much for your reply npn :) I've tried having a look at that. But it's not helping in that the style sheet has p listed with a load of other elements so that if I change the padding on it so it gives more white space around the text and looks a bit more centered, then other stuff changes and it looks horrible. I've tried setting attibutes for p on it's own but that didn't work either. I'm trying to find if there's another way - there must be! I've thought of changing the styling directly in a .php file, but I can't find which one is for writing the product info. I've tried product attibutes but am not sure that's the right one. Edited July 1, 2010 by Dali45 Quote
Guest Posted July 1, 2010 Posted July 1, 2010 Correction!! I tried again to change the css for the p element and I got it to work. Thanks very much for your help - I forgot I've got lots of development tools in Firefox which really helps, so that was a great idea of yours, thank you so much. Still alot of tweaking to do, but at least I'm making progress :D Quote
npn2531 Posted July 1, 2010 Posted July 1, 2010 (edited) Correction!! I tried again to change the css for the p element and I got it to work. Thanks very much for your help - I forgot I've got lots of development tools in Firefox which really helps, so that was a great idea of yours, thank you so much. Still alot of tweaking to do, but at least I'm making progress :D You can always remove the p element from the group it is in and style it separately. A better alternative may be to create a p element for a particular selector. For example p.pl-image Then that p element will only affect the class pl-image. A pretty good primer on this and other CSS issues is at http://www.w3schools.com/css/default.asp Edited July 1, 2010 by npn2531 Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.