Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

Posted

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.

Posted

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

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted (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 by Dali45
Posted

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

Posted (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 by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

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.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...