Forums / Templates, Stylesheets, Page Layout / Changeing the back ground on shipping estimator pop up

Changeing the back ground on shipping estimator pop up

Views: 882

Results 1 to 5 of 5
8 Mar 2013, 9:22 AM
#1
ccmall avatar

ccmall

New Zenner

Join Date:
Feb 2013
Posts:
23
Plugin Contributions:
1

Changeing the back ground on shipping estimator pop up

Hi guys; The people who built my zencart originally put a background image on it. When ever the shipping estimator pops up there is my background image. Problem is, it over powering the text and you can't read the shipping info one the page.

I looked in every single style sheet in my cart for this:

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
   background-color: #f2f7e7;
   

Where ever I found it I added the line: ```
background-image: none;


But no where did I find any reference to an image.  Is there a different .css for the check out, and maybe since its being called from the check out thats where its pulling the image??

If I can't find it, Can I add a line right in the header for teh shipping estimator page that would over write the .css and just put the back ground color of my choice?  Where would I put this?   Thanks
8 Mar 2013, 9:51 AM
#2
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Changeing the back ground on shipping estimator pop up

CCMall:

Hi guys; The people who built my zencart originally put a background image on it. When ever the shipping estimator pops up there is my background image. Problem is, it over powering the text and you can't read the shipping info one the page.

I looked in every single style sheet in my cart for this:

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
background-color: #f2f7e7;

> 
> Where ever I found it I added the line:      ```
 background-image: none;

But no where did I find any reference to an image. Is there a different .css for the check out, and maybe since its being called from the check out thats where its pulling the image??

If I can't find it, Can I add a line right in the header for teh shipping estimator page that would over write the .css and just put the back ground color of my choice? Where would I put this? Thanks

  1. Create a small jpg image of a plain colour (possibly just white) of about 10px X 10px. Call it whiteback.jpg .
  2. FTP it to the images folder in your template.
  3. Open stylesheet.css for editing.
  4. At the bottom of the css file, insert the following:
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {background: url("../images/whiteback.jpg") #FFFFFF;}

20 years a Zencart User

8 Mar 2013, 11:00 AM
#3
ccmall avatar

ccmall

New Zenner

Join Date:
Feb 2013
Posts:
23
Plugin Contributions:
1

Re: Changeing the back ground on shipping estimator pop up

Thanks bro. That worked but then I started thinking. I'm not fluent in CSS yet but. How could I set just the text in those pop ups to white? I know how to do it for the the header tags and body tags, but how do I add so just the text in all those pop ups is changed?

8 Mar 2013, 11:24 AM
#4
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Changeing the back ground on shipping estimator pop up

CCMall:

Thanks bro. That worked but then I started thinking. I'm not fluent in CSS yet but. How could I set just the text in those pop ups to white? I know how to do it for the the header tags and body tags, but how do I add so just the text in all those pop ups is changed?

Style declarations will work "chronologically". This means that a declaration will over-ride an earlier declaration for the same element.

That is why I suggested you add my declaration to the BOTTOM of the stylesheet, because if there is a similar declaration BEFORE it in the stylesheet, the LATER declaration will over-ride it.

TEXT colour is simply:

#xxxxxxxxxx {color: #FFFFFF;}

So if you wanted the TEXT to be white for your popups:

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {color: #FFFFFF;}

You see I have removed the background specs.

If you want white text on only the shipping estimator:

#popupShippingEstimator {color: #FFFFFF;}

So you can SPLIT UP the nesting of elements if you want to.

Just remember that the LAST declaration for any given element will cancel (over-ride) any similar, earlier declaration.

20 years a Zencart User

9 Mar 2013, 10:07 PM
#5
ccmall avatar

ccmall

New Zenner

Join Date:
Feb 2013
Posts:
23
Plugin Contributions:
1

Re: Changeing the back ground on shipping estimator pop up

Great thanks bro!!!