How to edit Product More Information Page CSS

General ShopSite user discussion

How to edit Product More Information Page CSS

Postby hammer » Fri Dec 11, 2015 12:21 pm

i want to have a non-scrolling background image on the product more information page. The trouble is I can not find the CSS or include that controls that product more information page. I can't find where to put the code.

I can't use the "add background image" in the product editor as it only provides for an image that will repeat. I need to add a fixed image.

The non-scrolling background image css I added to the defaults.css works perfectly. But I can't find where to edit the style tags for the product more information page.

Here is more info page link I am trying to add non-scrolling background page image to:

http://www.lobsters-online.com/catalog/lobster-chowder-combo.html

I want to add the following style tag to control the back ground image on the product more info page :

<style>
body {
background-image: url("/media/lobster-boat-bg.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
</style>

Please help :)
hammer
 
Posts: 127
Joined: Thu Mar 17, 2011 8:22 am

Re: How to edit Product More Information Page CSS

Postby Jim » Fri Dec 11, 2015 2:50 pm

That page is using the DefaultCustomProductTemplate which uses the following include files
Code: Select all
-1 [ShopSite] Subproduct-Name
-1 [ShopSite] Product-Price
-1 [ShopSite] Subproduct-AddToCartButton
-1 [ShopSite] Product-GraphicAlign
-1 [ShopSite] Product-Graphic
-1 [ShopSite] Product-Name
-1 [ShopSite] Product-Description
-1 [*ShopSite] Product-Price
-1 [ShopSite] Product-Sku
-1 [*ShopSite] Product-Description
-1 [ShopSite] Product-AddToCartButton
-1 [ShopSite] Product-GraphicRight
-1 [ShopSite] Classic-MoreInfoPage
--2 [ShopSite] MoreInfo-Head
---3 [ShopSite] MiniCart.js
--2 [ShopSite] Head-Browser-Required.sst
--2 [ShopSite] MoreInfo-Body
--2 [*ShopSite] Product-Price
--2 [*ShopSite] Product-Sku
--2 [*ShopSite] Product-AddToCartButton
--2 [ShopSite] ProductDetailFields.sst
--2 [ShopSite] QuickAjaxAddToCart.sst

I would check in the Classic-MoreInfoPage or the MoreInfo-Head or the ClassicMoreInfo.css include files to see if you can add your css there. Also have you tried putting the image in the Preferences > More Info Pages > Background image field.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: How to edit Product More Information Page CSS

Postby hammer » Fri Dec 11, 2015 4:44 pm

Thank you Jim, for the quick reply. As always, you are the man.

I added the new background image CSS code to the Classic-Moreinfopage and then regenerated the store and the fixe- background image displays perfectly with the content scrolling.

As a note, I could not use the Preferences > More info Pages > background image field because that field publishes the image in "repeat" instead of fixed. Repeat published the image over and over again when you scroll. A good upgrade to consider would be to provide a choice of" fixed" or "repeat" for the background image. Not all web sites want the background image to repeat.

Thanks again,

Hamme
hammer
 
Posts: 127
Joined: Thu Mar 17, 2011 8:22 am


Return to User Forum

Who is online

Users browsing this forum: Google [Bot] and 48 guests

cron