Jump to content

Page and field background colors

Recommended Posts



Per one of the other threads in this forum, I have used the following code to set the background color for the page content to 80% white:


.canvas .page-canvas, .thepage .content, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even {
background-color: rgba(255, 255, 255, 0.80);

While this worked in Firefox, it has no effect in IE8 which shows a completely transparent page/content background, allowing the large image background to shine through and reduce readability.

At the same time, the input fields on the contact form seem to have gone black (#1a1a1a, actually). I've searched the main CSS file and can find no reference to 1a1a1a. Are the two issues related? I have no idea. The site is live, however, so any expedient advice is appreciated.

The site is http://eastlansingallergy.org .

Thank you in advance!


Share this post

Link to post
Share on other sites

IE8 by default doesn't support transparency very well. There might be a chance that it would work in IE9, so I would advise updating.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites


IE8 doesn't do much very well, but unfortunately it's out there enough to be a concern. Any other ideas beyond "upgrade your browser and hopefully you won't see it anymore"?

Share this post

Link to post
Share on other sites

I totally understand that it's not as easy as just upgrading a browser. Many people are stuck with older computers, particularly in business or government,

As you can see here: http://www.w3schools.com/cssref/css_colors_legal.asp

RGBA isn't supported before IE9. That's unfortunately something we cannot fix. If a browser cannot read a version of CSS, then its simply a browser issue. I apologize for that.

However, we have something called Browser Specific CSS, which might allow you to apply different CSS for the same element detected by different browsers. http://pagelines.com/store/plugins/browser-css

This might be your solution, since you could apply a CSS solution that might work. What that is, I don't know. A guess might be image transparency/opacity... http://www.w3schools.com/css/css_image_transparency.asp

This might help too: http://www.w3schools.com/cssref/css3_pr_opacity.asp

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Thank you for your response, Rob. The information about the bleeding edge CSS used by Pagelines was enough to inspire me to simply set the background to a faded white transparent PNG. That does the trick across all browsers, it seems.

That whole backward-compatibility thing might be something you guys want to consider as you continue to work on Pagelines. The client picked this theme themselves and at first blush, it looked like a good idea to us. After using it, however, we'll happily go back to using the Genesis framework and themes for all our clients. ;)

Response time on Pagelines support is pretty solid, though, so thank you again!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • gregory.guz
      By gregory.guz+
      Hi ,
      I just noticed that the color picker has stopped showing up on my PL5 site ( please see attached image ) 
      Any idea what could be causing the problem?

    • greatthingsllc
      By greatthingsllc+
      In Platform 5, Using Framework Section for Content , I have set the hyperlink colors in the CUSTOMIZE section.   However, none of the pages are properly displaying the link colors.   Just defaulting to black, and underline on hover.   I did not see where this would be controlled at the page level or lower
      Site    doritbrauer.com

    • Houston Haynes
      By Houston Haynes+
      Hey folks - I'm trying to get right of some 'dead space' at the bottom of the page in the Material Theme. (see attached) Those two gray lines have an "Edit" button in between them when the browser has a login cookie for the site. Here I created a screenshot from a browser session that doesn't have context for my main login, so you can see that the "Edit" indicator is gone, but the bars and the space it occupies still remains. Can someone help me isolate this so I can make it *completely* disappear? Thanks.

    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
    • j powers
      By j powers+
      Looking to fond the best way to add in some javascript, the script is from Salesforce to add a chat button, ie Chat available / chat offline.  I need to add this to a specific page though.
      Much apprciated