- This topic has 20 replies, 4 voices, and was last updated 13 years, 3 months ago by
.
-
Posts
-
So, 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?
If 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
Hey 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.
Ok. 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?
You 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.
Right. 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.... ?
Right 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
Hrm. 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.
No, 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
Sadly, 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... :/
Is 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
OK, 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
Ah. 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?
Hi,
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
I 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?
Do 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
- The topic ‘How to create a "hanging logo" in 1.8+’ is closed to new replies.