WordPress.org

1. proohu01
   Member
   Posted 5 months ago #

   Does anyone know if the site header of the great Twenty Eleven theme can be made transparent?

   I have some nice background on the site using the "better Backgrounds" plugin, and a site logo in the site title area. I think that they would look even better if the site title and site description area would not be so white.

2. alchymyth
   The Sweeper
   Posted 5 months ago #

   can be done.

   start by creating a child theme (if you haven't already) to work with http://codex.wordpress.org/Child_Themes

   then post a link to your site

3. proohu01
   Member
   Posted 5 months ago #

   I am using a child theme already.
   Site:

4. proohu01
   Member
   Posted 5 months ago #

   oops,

   Site: Here...

5. esmi
   Theme Diva & Forum Moderator
   Posted 5 months ago #

   Try using Firefox with the Firebug add-on for this kind of work.
   http://getfirebug.com/

6. proohu01
   Member
   Posted 5 months ago #

   Thanks for the reply. I'am afraid that my web developer skills are not so great. I was hoping someone could point me in the right direction. Is it something that has to be done in the style.css?

7. esmi
   Theme Diva & Forum Moderator
   Posted 5 months ago #

   Yes - hence the suggestion to use Firebug.

8. alchymyth
   The Sweeper
   Posted 5 months ago #

   the difficulty with twenty eleven is that the background of the div #main does not stretch to the bottom bacause the floats are not cleared;

   try to add this to style.css of the child theme:

   #page { background: transparent; }
   #main { background: #fff; }
   #colophon { background: #eee; }

   and edit footer.php, to add:
   <div style="clear:both;"></div>
   directly before:
   </div><!-- #main -->

   (not cross-browser tested - just evaluated with firefox web developer add-on - a similar tool to firebug)

9. proohu01
   Member
   Posted 5 months ago #

   Thanks! That's almost perfect.

   I tried to fix the last couple of glitches myself by downloading Firefox and Firebug. I can definitely see that this can be a useful tool in the right hands. It took me quit some time to get rid of the blank space between the menu and the main text area. I did that by adding this to the css:
   

   #access {
    margin-bottom: 0;
   }

   I was unable to find out how to move the small grey line, at the top (above the logo), down a bit. I think it would look best if that grey line was just on top of the random header images.

   Could you please help me out with this last bit?
   Site..

10. alchymyth
    The Sweeper
    Posted 5 months ago #

    possibly:

    #branding { border-top: none; } /*remove the grey border at the top*/
    #branding img {
    border-top: 2px solid #bbb; /*add the grey border to the header image*/
    padding-top:5px; /*optional to add a space between the image and the grey border*/ }
    #branding #site-title img { border-top: none; } /*correction to remove the border from the logo image*/

11. proohu01
    Member
    Posted 5 months ago #

    Absolutely perfect! Exactly what I was looking for. Thanks for you input and time.

    To summarize...
    This is what I had to add to the style.css
    

    #page { background: transparent; }
    #main { background: #fff; }
    #colophon { background: #eee; }
    #access { margin-bottom: 0; }
    #branding { border-top: none; } /*remove the grey border at the top*/
    #branding img { border-top: 2px solid #bbb; } /*add the grey border to the header image*/
    #branding #site-title img { border-top: none; } /*correction to remove the border from the logo image*/

    And this is what I had to add to the footer.php
    <div style="clear:both;"></div>
    Directly before:
    </div><!-- #main -->

Reply

You must log in to post.