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.
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.
#page applies to the entire site IIRC, and it is given a bg colour in the css
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.
You need to amend the theme’s CSS – which means creating a child theme.
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….
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!
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/
You can download a pre-made Twenty Eleven child theme from here
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…
Would removing the header “branding” out of the “page” div and puting it in it’s own div work maybe?Any ideas?
I don’t have access to a test setup… but that sounds like it should work, with a bit of effort
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?
magnifying glass issue fixed…..can anyone please help with the header transparency problem?
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.
