Jump to content

Page and field background colors

Recommended Posts

dreamscape    0


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
catrina    103

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
dreamscape    0


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
Rob    547

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
dreamscape    0

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

    • 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 
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      Hi would like to have the thumbnail photos on the left side and not on the top of the topic to the blog post. Where can i fix that?
      Greetings from Hamburg,
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?