twenty eleven opaque page

  • Resolved Beaverman

    (@beaverman)


    12 years, 5 months ago

    OK, so I know enough about WP to create something with it but i’m not great with the whole CSS stuff.

    Im using a twenty eleven child theme and i really want to be able to see the background through the page but all the things i have tried do not work as i would like them too.

    The closest i get to what i want is this:

    #main {
	background: #fff;
	clear: both;
	overflow: hidden;
	opacity:0.8;
	padding: 40px 0 0 0;

    But this makes everything opaque and is not quite what i want to do.

    Is there any way to get the background to be visible through the page and leave all the text and images alone?

    Im currently also using Twenty Eleven Theme Extensions in case that makes any difference and have tried adding code to both the standard stylesheet editor and adding to the “custom CSS” in the plugin.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Beaverman

    (@beaverman)

    OK, i figured it out and thought the solution might benefit others here.

    I basically used this:

    #page{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.*);

    This worked a treat on twenty eleven and made the page transparent. Make sure you change the * to a number 1 to 9 as this will affect how transparent it is. Experiment!

    For all those other noobs out there make sure that if you use the dark option you use:

    #page{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.*)!important;

    Otherwise the parent theme insists on overwriting your changes.

    Oh, it will help you loads if you install the firebug plugin for firefox too (And take a moment to work out what it does). I would not have been able to figure this out without it.

    And if you are using Theme Extension plugin like I am, this will NOT work if you have the custom colours switch on.

    Beaverman:

    I am using the white option and not using any extensions/plugins. I added the #page{} from above to my child style.css. However, there are still white panels behind any content on new pages I create.

    I then added the below styles with no success:
    ‘#main{ background-color: transparent;}
    #primary{ background-color: transparent;}
    #content{ background-color: transparent;}
    #entry-content{ background-color: transparent;}?’

    Did you run into this problem? And if so, how did you resolve it?

    Screenshot

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘twenty eleven opaque page’ is closed to new replies.