WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[closed] HELP Please!!Header Transparency Issues=Headache! (31 posts)

  1. Wolfman1000
    Member
    Posted 2 years ago #

    Hi,

    I was wondering if anyone could help me.

    I'm using the latest TwentyEleven Theme for my site and am desperatly attempting to get the header image to be transparent and allow my tile main background image to come through.

    I have saved my Header image as a .PNG 24 with transparancy at the specified dimensions required for the image of 1000x288.However when it's applied to the site it will either have a black or white background behind it,depending on whether the dark or light theme is selected.

    I have tried to root through the CSS using Google Chromes Developer tools to hunt out any background color settings for the header but am getting nowhere!!

    Please someone be a hero and save me another 6 hours of banging my head against the wall and help this poor soul!!

    Thanks in advance.

    http://wordpress.org/extend/themes/twentyeleven/

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes. Once your child theme is active, we should be able to help with the customisation.

  3. Wolfman1000
    Member
    Posted 2 years ago #

    Hi Esmi,

    I haven't edited the theme,I was just attempting to find where the issue with the transparency lies.I have backed up the 2011 theme and just paste it back after attempting any changes.

    I will now create a child theme so maybe I can receive a little help with this incredibly irritating issue.

    Thanks for getting back to me.

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    #page applies to the entire site IIRC, and it is given a bg colour in the css

  5. Wolfman1000
    Member
    Posted 2 years ago #

    Hi Rev.Voodoo

    I'm actually using a tiled background image for the site which is being displayed correctly,but when I add a transparent PNG as the header image rather than displaying the tiled background underneath it,it dislays either a black or white background which are the dimensions of the header image.

  6. esmi
    Forum Moderator
    Posted 2 years ago #

    You need to amend the theme's CSS - which means creating a child theme.

  7. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    right, if you look at 2011s layout, starting in header.php

    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">

    your tiled bg gets applied to the body

    A white or black bg gets applied to #page depending on scheme. Notice that page contains the header and everything else, so it all gets that white/black bg

    you could remove the bg from #page in your child theme, but then you would have to find a way to get it back in to the various elements excluding the header. I'm not 100% sure it would work well with how 2011 is configured....

  8. Wolfman1000
    Member
    Posted 2 years ago #

    I'm currently trying to create a child theme and have followed the guide to do so.I have created a child them stylesheet with instructions in it to import the parent stylesheet.However when I got to the themes in wordpress it says that the .css style sheet for twentyelevenchild is missing.

    I'm actually a little baffled as to why it's so comlicated to add something as simple as a transparent header image as the whole reason I've switched over to WordPress was that everyone told me how simple it was to use and modify!

  9. Wolfman1000
    Member
    Posted 2 years ago #

    Ooops.My bad,style sheet was called twentyelevenchild.css rather than style.css Doh!

    This is the site by the way if you want to see what I mean:

    http://www.braveandboldindustries.com/blog/

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    You can download a pre-made Twenty Eleven child theme from here

  11. Wolfman1000
    Member
    Posted 2 years ago #

    I have now made my child theme and wordpress is seeing it correctly.I falsely assumed that it need the full path for the parent theme...which I've now ofund out it didn't!

    Now to try and sort out this transparency issue...

  12. Wolfman1000
    Member
    Posted 2 years ago #

    Would removing the header "branding" out of the "page" div and puting it in it's own div work maybe?Any ideas?

  13. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    I don't have access to a test setup... but that sounds like it should work, with a bit of effort

  14. Wolfman1000
    Member
    Posted 2 years ago #

    I've also noticed that when using a child theme that the little magnifying glass image is missing from the search form.Im presuming that this is because it is referencing an image from the parent stylesheet?

  15. Wolfman1000
    Member
    Posted 2 years ago #

    magnifying glass issue fixed.....can anyone please help with the header transparency problem?

  16. esmi
    Forum Moderator
    Posted 2 years ago #

    You need to remove the background color on #page and re-apply it to #primary, so something like:

    #page {background:transparent;}
    #primary {background-color:#fff;}

    should work.

  17. Wolfman1000
    Member
    Posted 2 years ago #

    @esmi

    Unfortunately this doesn't work,I tried something similar before but it only changes the colour for the main page....arggghhh!!

  18. esmi
    Forum Moderator
    Posted 2 years ago #

    It works just fine for me.

  19. Wolfman1000
    Member
    Posted 2 years ago #

    It's working for you?really?thats wierd.

    #primary adjusts the color of the main page but

    #page does not make anything transparent when set to do so.

    Where are you putting the code?This is where I put it:

    '/* =Global
    ----------------------------------------------- */

    body, input, textarea {
    color: #373737;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.625;
    }
    body {
    background: #e2e2e2;
    }
    #page {
    background:transparent;

    }

    /* Headings */
    h1,h2,h3,h4,h5,h6 {
    clear: both;
    }
    hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.625em;'

  20. esmi
    Forum Moderator
    Posted 2 years ago #

    Just add the CSS I suggested above to the child's style.css file

  21. Wolfman1000
    Member
    Posted 2 years ago #

    Ok I've tried that and same thing happens,only the main page content changes to white.The header background doesn't go transparent.

    Are you doing with a transparent .PNG as the header image?

  22. esmi
    Forum Moderator
    Posted 2 years ago #

    Hmm.. your child's CSS is being over-written by the CSS for the dark skin - which might be classed as a bug. Try using body #page instead.

  23. Wolfman1000
    Member
    Posted 2 years ago #

    Baddabing!!!Tried that and now it works.Thankyou sooooooooooo much esmi!Much appreciated.I should have thought of that though!

    Only thing is now the black between the nav bar and the main page has also gone transparent.Which im presuming means that the nav was floating over the header background which is a bit strange.

    check it out at:

    http://www.braveandboldindustries.com/blog

  24. esmi
    Forum Moderator
    Posted 2 years ago #

    Change #primary {background-color:#000;} to #main,#primary {background-color:#000;}. Then try adding:

    #access {margin-bottom:0;}

  25. Wolfman1000
    Member
    Posted 2 years ago #

    Tried that,almost works but still a little gap.

    Check the link out and see.Kind of looks cool though having a slightly seperated nav bar...might even keep it like that,but il have a findle and see if I can actually control the amount.I've gotta try removing the bit of padding at the top above the header aswell,I did it before but got to hunt it down again!

    Do you have any idea of how I can make the height of the header a little smaller aswell by any chance?

    Thanks again for your help by the way,actually feels like something has been achieved today and some incredibly infuriating has been conquered!hurrah!

  26. esmi
    Forum Moderator
    Posted 2 years ago #

    Tried that,almost works but still a little gap.

    Have you tried using Firefox with the Firebug add-on for this kind of work. It's incredibly useful.
    http://getfirebug.com/

    any idea of how I can make the height of the header a little smaller

    Resize the Header in a Twenty Eleven Child Theme

  27. Wolfman1000
    Member
    Posted 2 years ago #

    Excellent!

    Will give Firebug a shot,looks great.

    Thanks and thanks again!

  28. monahowell
    Member
    Posted 2 years ago #

    I've lost my magnifying glass as well...how did you fix yours?

  29. MickWP
    Member
    Posted 2 years ago #

    I've lost my magnifying glass as well...how did you fix yours?

    Would like to know this too please.

    The only things I have done to the default theme is:

    - Create child theme
    - Remove header image
    - Enable dark colour scheme

    Thanks for any help.

  30. pappe
    Member
    Posted 2 years ago #

    Hi,

    this code work for me to get the header transparent:

    body #page {background:transparent;}

    Now the complete body is transparent and I have to add the following, to get the content background white again:

    #primary {background-color:#fff;}

    This works but there is one poor issue. A small bar between the navigation bar and the content is still transparent. I have searched and tried to find the responsible CSS code, but there are several lines for that in the css file.

    Is there any other "easy" way to get only the header image background transparent?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic