Community Forums › Forums › Archived Forums › Design Tips and Tricks › Outreach theme: crazy header!
- This topic has 12 replies, 5 voices, and was last updated 10 years, 9 months ago by damangmedia.
-
AuthorPosts
-
April 11, 2013 at 10:52 pm #34923styzerParticipant
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
April 12, 2013 at 7:16 am #34964styzerParticipantI 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
April 12, 2013 at 8:56 am #34998styzerParticipantI 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
April 12, 2013 at 8:59 am #35000damangmediaMemberHere 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;
}April 20, 2013 at 3:08 pm #36610styzerParticipantHi 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
May 21, 2013 at 3:13 pm #42079MakeYourselfVisibleParticipantDamangmeda, 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 🙂
May 21, 2013 at 4:04 pm #42086damangmediaMemberHey 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!
June 2, 2013 at 3:21 pm #43670mbreslowMemberthis 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?
June 3, 2013 at 11:39 am #43862damangmediaMember@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.comJune 5, 2013 at 7:16 pm #44254Matt@theDIYvillageMember@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!
Thanks in advance!
MattJune 6, 2013 at 8:29 am #44311damangmediaMemberYes 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 BusinessJune 6, 2013 at 3:52 pm #44441Matt@theDIYvillageMemberHey 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?
June 14, 2013 at 6:49 am #45859damangmediaMember@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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.