Header Image Position in bp-fun theme

When I updated my theme to the latest version, it moved the header image that I had above the menus to below the menu and then displayed another header block with the site title and catchphrase in it above the menus. How do I move my header image back to the top?

See screenshot here: http://screencast.com/t/LyqW8lTOm

  • Patrick
    • Support Monkey

    Hi Jeff,

    I just checked your site, but you seem to have reinstalled the previous version 1.4.2. (and your navigation background color seems to have disappeared...)

    Could you install the update again? It's much easier that way to inspect the code directly through Firebug to see what can be done.

  • Jeff
    • Design Lord, Child of Thor

    Hi pcwriter!

    Actually I have version 1.4.3 installed, but my child theme still shows 1.4.2. I removed the custom header.php file that is in our child theme so you should now see what the default version of the header.php file does.

    http://www.bravegirlsclub.com

    Thanks for taking a look at this! Let me know if you need me to do anything else.

  • Patrick
    • Support Monkey

    Hi again Jeff,

    3 easy steps to get you back on track:

    1. You can either remove <div class="custom-img-header"><img...></div> from your header.php or add the following to your stylesheet to hide it:

    #header .custom-img-header {
    display:none;
    }

    2. Then add your header background image to the top-h div like so:

    #top-header .top-h {
    background:url("http://bravegirlsclub.com/blog/wp-content/uploads/blog-header-image11.jpg") repeat scroll 0 0 transparent;
    height:195px;
    }

    3. Finally, hide the site title:

    #top-header .site-title {
    display:none;
    }

    I also noticed that you're using bp-fun rather than bp-fun-child. Whenever you customize a theme, it's always preferable to activate a child-theme rather than the parent. That way, you don't run into problems like this when the theme updates, and you don't have to redo your customizations either.

    Hope this helps! :o)

  • Kimberly
    • Champion of Loops

    Again with the stellar support!

    @pcwriter I may actually get to bed before midnight with you helping me out like this!

    That's worth a pan of cookies or something, more points than I can give!

    @Jeff, please reopen if this doesn't solve your issue and I will promptly hunt down Patrick to fix it :wink:

  • Jeff
    • Design Lord, Child of Thor

    Thanks Patrick and Kimberly... I made those changes and it looks like the header area is now the right size, and the site title is hidden, but the image still isn't showing up above the menu.

    (I actually only did numbers 2 and 3 from your post above... I removed the custom header image that was showing up below the menu by removing the header image from the theme options.)

    Thanks again for your help... we are definitely on the right track - just need to figure out why the header image is not showing up now! :slight_smile:

    (I'm gonna owe both of you a pan of cookies!)

  • Jeff
    • Design Lord, Child of Thor

    Ok it looks like there were two settings that were overriding the header image... I was able to get rid of the first one by deleting the header background color out of the Header Settings under "Appearance" > "Theme Options". I found the other one using the inspect element function in Chrome, but I can't figure out how to change it... it is the following code that I can't locate:

    #call-action {
    color: #636363!important;
    background: white!important;
    }

    (It says that it is in the in line 624 of http://www.bravegirlsclub.com, but I don't know what file that means.)

    How would I overwrite that? I tried adding !important to the code you provided but it didn't change anything...

    Here is what is in my child-style.css file:

    #top-header .top-h {
    background:url("http://bravegirlsclub.com/blog/wp-content/uploads/blog-header-image11.jpg") repeat scroll 0 0 transparent !important;
    height:195px ;
    }
    
    #top-header .site-title {
    display:none;
    }
  • Jeff
    • Design Lord, Child of Thor

    Figured it out... I just had to add #custom to the front... here is what I ended up with:

    #custom #top-header .top-h {
    background:url("http://bravegirlsclub.com/blog/wp-content/uploads/blog-header-image11.jpg") repeat scroll 0 0 transparent !important;
    height:195px ;
    }

    Thanks again for your help on this!

  • Patrick
    • Support Monkey

    @Jeff

    Yup, #custom is a wrapper div that's available in most WPMUdev child-themes so you can add weight to your custom stylerules to increase their specificity.

    Good job... it looks great! Glad things worked out. :o)

    @Kimberly

    I've gotten into the habit of checking in before bed too... and sometimes lose a bit of sleep :o)

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.