Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to create a "hanging logo" in 1.8+
- This topic has 20 replies, 4 voices, and was last updated 12 years, 1 month ago by
taylorishere.
-
AuthorPosts
-
December 20, 2012 at 7:37 pm #6559
taylorishere
MemberSo, back when Genesis had a logo to replace (and a header text/logo section in the Genesis preferences), this was easy to do.
Now, I'm a bit confused of how I can inject an image into the title area, while allowing it to hang over (overflow:visible to the image itself) the header and onto the #inner.
Help please?
December 21, 2012 at 2:34 pm #6734Riavon
MemberWhich (child) theme are you referring to, here?
Twitter: @riavonentprises
December 21, 2012 at 3:38 pm #6758Hard Boiled Greg
MemberIf it would be easier for you, you can "de-activate" the WordPress header support by deleting:
/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );from you functions.php file. Then the header text/logo section will be back in the Genesis preferences.
If you'd like to keep the WordPress custom header, drop a link to your site and I'd be happy to help.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
December 21, 2012 at 5:18 pm #6808taylorishere
MemberHey guys. Thanks for getting back to me.
I'm using plain ol' Genesis. Custom child theme.
And the removal of adding the custom header function was the trick. I just deleted it, and I'll see how it pans out with replacing the logo with a custom logo.
December 21, 2012 at 6:44 pm #6820taylorishere
MemberOk. I'm back, and I tried installing a fresh copy of the theme to check it, and low and behold... there's no default logo. Just blank.
Any thoughts? Does there need to be a logo.png anywhere? Anywhere I can change the image source path?
December 21, 2012 at 6:52 pm #6822AnitaC
KeymasterYou indicated you are doing a Custom theme. Are you using the child theme as your starting point? If so, there wouldn't be a logo inside the child theme.
Need help with customization or troubleshooting? Reach out to me.
December 21, 2012 at 6:57 pm #6824taylorishere
MemberRight. I reverted back to vanilla Genesis, and it's missing from there. In fact, I just opened the zip on my hard drive, and there isn't a logo in the images folder. Soooooo.... ?
December 21, 2012 at 7:15 pm #6830Hard Boiled Greg
MemberRight below:
/***** Image Header - Partial Width ********************/
in your style sheet, add:
.header-image #header #title-area {
background: url(images/logo.png) left top no-repeat;
}Make sure you add logo.png (your logo image file) to your images folder in your child theme.
You may need to make other changes to your CSS depending on the height etc. of your logo.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
December 21, 2012 at 8:50 pm #6848taylorishere
MemberHrm. That does inject the logo, but doesn't allow me to "hang" it over the bottom of the header: I can't do a "overflow:display" thing there. Would I have to create a new widget area? I'm also fine with reconstructing the header by removing the function, but I'd want to keep the "right widget" area, and any SEO that exists in there.
I know this may be asking a lot, so I thank you for your continued help.
December 21, 2012 at 8:56 pm #6849Hard Boiled Greg
MemberNo, I don't think you would need a new widget area, and your header right widget should still be there.
If you'd like to post a link to your site and describe how you want it to hang over, I'll give you a hand with the CSS.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
December 21, 2012 at 9:04 pm #6852taylorishere
MemberSadly, I have to develop locally because it's a "secret project" from my bosses. But I can post some screenshots of what I'm looking for:
I would imagine it would need to be an <img src> tag, and not a background... :/
December 21, 2012 at 9:11 pm #6860Hard Boiled Greg
MemberIs there going to be a nav bar below the header and menu items that must be protected from being overlapped by the logo?
Website: Hard Boiled Greg Twitter: @hbgreg
December 21, 2012 at 9:12 pm #6862taylorishere
MemberNo. I plan on putting the nav in the right widget area.
December 21, 2012 at 9:31 pm #6867Hard Boiled Greg
MemberOK, so you have two images. The grey "header" and the pink "logo".
Add
background: url(images/header.png) right top no-repeat;
after #header {
(make sure to add the header.png to the images folder)
Add height: ***px;
to the:
.header-image #header #title-area {
background: url(images/logo.png) left top no-repeat;
}we added last time. (replace ***px with the height of your logo.
Change the height in:
.header-image #title-area,
.header-image #title,
.header-image #title a {to the height of your logo too.
add clear:both;
to #inner {
I think I covered everything. Let me know if something is wonky.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
December 22, 2012 at 12:42 pm #6989taylorishere
MemberAh. I think I have maybe confused the issue with the image I gave. (btw.. thanks for ALL your help.)
Here's a better image of what I'm looking to do: http://i.imgur.com/z8FjC.png
So, you have the header area, which contains the "text/logo" area and the right widget. For the logo area, a lot of people do the ol' "background image" thing. What I'm looking to do is have an image exist within the title area. And because it's round (and a png with transparency), it should allow the color of the header to exist behind it, and also dip below the boundary of the header area (which I remember being able to do with a previous version of Genesis).
Is there a way to put an image <img src> into that title area, without making it a background element?
December 22, 2012 at 12:51 pm #6992Riavon
MemberHi,
You can try adding this to your functions.php file, set the dimensions to the size of the logo you'll use:
/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );That should generate an area in your Dashboard under Appearance/Header where you can upload an actual image file. Does that help you?
EDIT: Woops, after reading through this entire thread, I see that it was suggested that you remove this from your functions.php ...
Twitter: @riavonentprises
December 22, 2012 at 12:56 pm #6996taylorishere
MemberI had that before, and it was another background image in the header. I think I may remove the header function and rebuild it myself, or add another widget area to the header. I think those are my only choices...
Unless there's a function I can remove (instead of removing the entire header), and replace to add an <img> tag. Like title-area or something like that. Can I do a remove/add function to just the title area?
December 22, 2012 at 1:25 pm #7007Hard Boiled Greg
MemberDecember 22, 2012 at 1:30 pm #7010taylorishere
MemberThere's the winner HBG! Thanks so much for that. So... wadda I do?
December 22, 2012 at 1:38 pm #7012Hard Boiled Greg
MemberDo everything I said previously and add:
margin-top: **px;
to the
.header-image #header #title-area {
we added earlier. If you use Chrome Developer Tools (or Firebug for Firefox) you can view the CSS on my test site.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
-
AuthorPosts
- The topic ‘How to create a "hanging logo" in 1.8+’ is closed to new replies.