WordPress.org

1. aplusr
   Member
   Posted 5 months ago #
   

   Hi,

   I would like to remove the gray bar from my twenty eleven theme as I have a custom header with a white background. There is this gray bar at the top of my custom header that won't go away.

   I have tried going to: appearance->editor->style.css and changing `#branding {
   border-top: 2px solid #bbb;
   padding-bottom: 10px;
   position: relative;
   z-index: 2;
   }`
   to `#branding {
   border-top: none;
   }`

   But this did not work. Is there anything else that I can try?

   Thanks,

   Andy

2. WPyogi
   Volunteer Moderator
   Posted 5 months ago #
   

   If you post a link to your site, someone can look at it.

3. aplusr
   Member
   Posted 5 months ago #
   

   Hi,

   My website can be found here: http://www.laptopdealscentral.com/

   Andy

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

   Are you using a child theme or a custom CSS plugin?

5. aplusr
   Member
   Posted 5 months ago #
   

   - I've just been editing the code within #branding style.css from the back-end

6. aplusr
   Member
   Posted 5 months ago #
   

   appearance->editor->style.css is where I've been trying to remove the header

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

   Do not edit the Twenty Eleven theme. First create a child theme for your changes.

8. aplusr
   Member
   Posted 5 months ago #
   

   I've created a Twenty Eleven child theme and got rid of the gray bar but now my search field has fallen to the middle of the page!

   Here is my style.css:

   /*
   Theme Name: Twentyeleven Child Theme
   Description: Child theme for the twentyeleven theme
   Author: Bob
   Template: twentyeleven
   */

   @import url("../twentyeleven/style.css");

   #branding {
   border-top: none;
   padding-bottom: 10px;
   position: relative;
   z-index: 2;
   }

9. Christine
   WP Yogi & Forum Moderator
   Posted 5 months ago #
   

   On line 628 of your styles.css you will find:

   #branding .with-image #searchform {
   top: auto;
   bottom: 20px;
   max-width: 195px;
   }

   Just add these to your child css and fiddle with the top and bottom values.

10. aplusr
    Member
    Posted 5 months ago #
    

    Hi Christine,

    Modifying the top and bottom values doesn't change the location of the search box unfortunately. I've cleared the cache but the search box stays in the same position

11. miri
    Member
    Posted 5 months ago #
    

    Where is it supposed to be? I removed "bottom: -27px;" from the following in Firebug and it moved the box way up, but I think farther up than you want.
    

    #branding .with-image #searchform {
    top: auto;
    bottom: -27px;
    max-width: 195px;
    }

12. aplusr
    Member
    Posted 5 months ago #
    

    Sorry, I think I was having a cache problem. I disabled W3 total cache temporarily while I edit the css, and cleared my web browser history and now I can see it is back in the right place.

    I also deleted an invisible character before #branding that was apparently producing a strange error.

    Thanks!

Reply

You must log in to post.