Community Forums › Forums › Archived Forums › General Discussion › Outreach Theme: Using a custom logo/header
- This topic has 33 replies, 6 voices, and was last updated 11 years, 7 months ago by
dev.
-
AuthorPosts
-
May 22, 2013 at 10:09 am #42213
lgeraty
MemberI'm trying to upload a custom logo/header and every time I do, it looks really messed up. Is there a way to upload a logo that would utilize the original background that is something like 350 by 120?
If so, how would I do that? Every time I upload it in the header section of the dashboard, it tries to resize it.
Thanks!
May 22, 2013 at 11:10 am #42219dev
ParticipantThis has to be the most-asked question on this forum. It would be nice for SP to put up a page showing all the different ways to do a logo/header.
Here is how I do it.
1. Upload your logo/header to the Media Lib
2. Find the size (width x height) in px of your logo/header.
3. In functions.php of your theme add the following code, using your own sizes:
add_theme_support( 'genesis-custom-header', array( 'width' => 385, 'height' => 100 ) );
4. In WP Admin go to Appearance, Header and choose the file from the Media Lib.
5. Uncheck the "Show text..." box on the above page.
May 22, 2013 at 12:53 pm #42231lgeraty
MemberAh... that makes sense now... when I did the search there were so many different ways that I was completely confused... ha ha.
May 22, 2013 at 1:13 pm #42235dev
ParticipantYes, I know about the confusion. I had it too.
On some themes you can simply upload your logo/banner to the theme's /image directory and rename it to logo.png and it will work.
Most Gen themes now have support for the "WP way" but you still have to code the size or WP wants you to crop it to some default size or something. All I know is that this code has always worked for us... so far.
June 2, 2013 at 2:58 pm #43661mbreslow
MemberOk, I did that, but when it goes mobile, it looks AWFUL. http://www.mainsite.digitaloatmeal.net
June 18, 2013 at 7:48 am #46518tonyjalicea
MemberI followed the instructions from "dev" and I still can't get this working correctly. I added the code to my functions.php file, uploaded my logo.png file and unchecked the "Show header text with your image" option and this is what I get:
http://harbourchurch.tonyjalicea.com/
What am I missing?
June 18, 2013 at 8:19 am #46521dev
ParticipantWhat were you expecting? Looked good to me.
For mbreslow: Why not try the Genesis Responsive Header plugin:
June 18, 2013 at 8:20 am #46523tonyjalicea
MemberI was hoping to have the original textured background behind the logo. Is that possible?
June 18, 2013 at 8:40 am #46525dev
ParticipantI see what you are saying. You want your logo on top of the textured background image that comes with theme? The best and easiest way to do this is to create a "banner" that has your logo as a "layer" on top of a background image, fused into a .jpg or .png file. Either you need some skills with a graphic program (I use Pixelmator on the Mac, but GIMP works well on PCs) or you should have a graphic person do this for you... won't cost you much.
Your background is here:
http://harbourchurch.tonyjalicea.com/wp-content/themes/outreach/images/header.png
The size is 1200x120 so have your graphics person create a .png file of your logo (maybe with a transparent background) and pop it on top of the header.png and flatten it.
There is a way you can position your logo on top of the image with CSS using 'postion,' 'top', and 'left' but it won't be responsive and is not a good way to do it.
If you are willing to forego the texture, you can always just use a color via
#header { background: url(http://harbourchurch.tonyjalicea.com/wp-content/uploads/2013/06/logo1.png) no-repeat; background-color: #F00; }
... but since your logo is not transparent, the white white background will show... but maybe that is a good thing.
The best way is to create a banner with your logo and background texture all in one .jpg or .png.
June 18, 2013 at 10:52 am #46564tonyjalicea
MemberThanks for your help! I created a graphic with that header image with my logo over it. I inverted the colors and gave it a transparent background. It looks good but I lose the responsiveness (it gets wonky when I drag my browser window smaller) and my header menu drops to the next line.
http://harbourchurch.tonyjalicea.com/
Any thoughts on that? Or do I just lose the responsiveness with what I'm trying to do?
June 18, 2013 at 11:23 am #46573dev
ParticipantFor responsiveness, as I said above, try:
Making a textured graphic background banner works but there are always header responsive issues with most graphics. We always suggest people use a small logo graphic and just choose a background color. Make life easy!
However, your method might work with the plugin above. Try it and let us know.
July 4, 2013 at 12:05 pm #49223John
ParticipantRegarding the header - logo issue you might want to give this a try: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉July 15, 2013 at 10:51 am #50800Kim
MemberOh my goodness! Thank you Dev! I've been messing with this for days! Followed your instructions and got my logo which is 430 x 120 to actually show up! Progress. But it's too far left...I know it's got to be something easy that I'm missing. Any suggestions. Thanks!
Kim
July 15, 2013 at 11:28 am #50807Kim
Member....and now my black background is gone! Grrrr!!!!
July 15, 2013 at 11:31 am #50808dev
ParticipantToo far left? It's way on the right side of the header... because you but it in the Header Right widget area. Is that what you want? Did you follow the instructions in:
above? I don't think so... but I"m not sure.
If want it on the right and want it more to the right edge you could do (note the minus sign):
#text-2 { margin-right: -4em; }
or
#text-2 { margin-right: -70px; }
Personally, I think it should go on the left, using the standard WP protocol, but it is up to you.
July 15, 2013 at 11:36 am #50810Kim
MemberNo, that's my header widget. My logo isn't showing up anymore on the left. This is really been frustrating.
July 15, 2013 at 11:37 am #50811dev
Participant#header { background: #000; }
will put your header background to black.
July 15, 2013 at 11:38 am #50812Kim
Member...and it's got a gray background instead of the #090909....so weird.
July 15, 2013 at 11:41 am #50814Kim
MemberOkay, the logo is there now, but the background is still gray (and logo is too far to the left). Here's the code for my header below.
#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; }
July 15, 2013 at 11:45 am #50818dev
Participantadd:
background-color: black;
to the #header stuff above.
#header { background: #090909 url(images/header.png) center repeat-y; margin: 0 auto; min-height: 120px; overflow: hidden; width: 100%; background-color: black; }
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.