Outreach theme: crazy header!

Community Forums Forums Design Tips and Tricks Outreach theme: crazy header!

This topic is: not resolved

This topic contains 12 replies, has 5 voices, and was last updated by  damangmedia 1 year, 4 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #34923

    styzer
    Participant
    Post count: 97

    Hi all,

    I’ve been battling for hours with a stupid issue that I shouldn’t have to. I am asking for help now because it’s getting ridiculous.

    I installed Genesis and Outreach on http://www.musicmondayca.barefootheart.com .

    I just want to recreate the header found here: http://www.musicmakesus.ca/musicmonday

    So there are 2 headers: one background with the gradient, and the music notes. Plus I need to insert the logo on top of that. I’ve tried so many configurations and css modifications it’s not even funny. If anyone could help I’d be grateful.

    This is my first site with Genesis, and would love to be able to find how to do this.

    thanks!

    Andre

    #34964

    styzer
    Participant
    Post count: 97

    I apologize for the strong language, I was pretty frustrated at the time of writing… I am sure the issue isn’t with the theme, but with me, something I’m missing somewhere. I started exploring the use of hooks and will see if this can help my situation.

    Hope you all have a great day!

    Regards,

    Andre

    #34998

    styzer
    Participant
    Post count: 97

    I was offered this solution, so I’m going to try it. I’m sharing it here so others could potentially benefit from it.

    In your style.css file, find the following css:
    #header {
    background: url(images/header.png) repeat-y center center #090909;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    Change this to:
    #header {
    background: url(images/header.png) repeat-y center center #090909;
    background-position: center top !important;
    background-color: #090909 !important;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    The person said: “This will allow you to upload a custom header without it aligning left or removing the background color.”

    Thank you!

    Regards,

    Andre

    #35000

    damangmedia
    Participant
    Post count: 5

    Here is what I did and it worked fine. The repeat is set to y in outreach, however I want it to repeat x.

    Replace header.png with the head you want to use and replace logo.png with the logo you want to use. The go into wordpress appearance - header – and uncheck the “show header text with your image”

    #header {
    background: #090909 url(images/header.png) center repeat-x;
    background-position: center !important;
    background-repeat:repeat-x !important;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    #title-area {
    background: url(images/logo.png) no-repeat;
    float: left;
    overflow: hidden;
    width: 430px;
    }

    #36610

    styzer
    Participant
    Post count: 97

    Hi damangmeda,

    Sorry I just saw your post today… I saved your reply though as it may come in handy! Here is the completed site (transfer into Genesis and Outreach from a custom multi-site): http://www.musicmonday.ca

    Regards,

    Andre

    • This reply was modified 1 year, 6 months ago by  styzer.
    • This reply was modified 1 year, 6 months ago by  styzer.
    #42079

    MakeYourselfVisible
    Participant
    Post count: 33

    Damangmeda, thank you for that solution; worked like a charm for me! As someone with limited coding experience, I found the Outreach Header hard to work with out of the box but this was simple enough.

    Thanks again, let me know if I can Paypal you a beer :)

    #42086

    damangmedia
    Participant
    Post count: 5

    Hey Happy it worked out. Thanks for the offer for the beer. I will save that for the next time I am pulling my hair out and I need one!

    #43670

    mbreslow
    Participant
    Post count: 5

    this worked well for me as far as the logo goes, but I find that the header.png just acts like an image and not a background image. I’d like to make it stay in the background where it belongs, and cover everything. any ideas?

    #43862

    damangmedia
    Participant
    Post count: 5

    @mbreslow it should be a background image is you followed the process in the css. If you are using the custom header then it will add the image to the page as an image. What is the site so I can have a look at it for you.

    Make it great,
    Matt
    http://damangmedia.com

    #44254

    Matt@theDIYvillage
    Participant
    Post count: 14

    @damangmedia, would you care to take a look at my site and point me in the right direction?  I seem to have done something to the header.png where it’s not covering the full width of the page.  It’s leaving a small space on the right hand side.  I’ve got a logo that I’d like to lay on top of the header.png or I’ve considered just modifying it in illustrator so that the logo and the header are just one image.  In any case, I’m at a loss and could use some help!

    http://www.theDIYvillage.com

    Thanks in advance!
    Matt

    #44311

    damangmedia
    Participant
    Post count: 5

    @theDIYvillage

    Yes you have to update the following section on your style.css

    #header {
    background: #090909 url(images/header.png) center repeat-y;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    #title-area {
    float: left;
    overflow: hidden;
    width: 430px;
    }

    to the following:

    #header {
    background: #090909 url(images/header.png) center repeat-x;
    background-position: center !important;
    background-repeat:repeat-x !important;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    #title-area {
    background: url(images/logo.png) no-repeat; 
    float: left;
    overflow: hidden;
    width: 430px;
    }

    Make sure you upload the logo file to the images directory. And you can not use the custom header, you have to reset that in the theme options. Make sense?

    Make it great,
    Matt Clark
    Inbound Marketing for Business

    #44441

    Matt@theDIYvillage
    Participant
    Post count: 14

    Hey Matt!  Thanks for the tips, but I seem to still be having trouble.  I modified the stylesheet as instructed, restored the header image, and uploaded my logo.png to the images file for the theme, but I’ve got a blank space on the right side of my header still and no logo…

    And how come my header and footer ads have blank backgrounds?

    Anybody have any thoughts?

    #45859

    damangmedia
    Participant
    Post count: 5

    @theDIYvillage sorry for the delay in getting back to you. I went and checked the site and looks like you go it figured out. Let me know if you I can help with anything else.

    Make it great,
    Matt

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.