How to create a "hanging logo" in 1.8+

[taylorishereParticipant Post count: 4]

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?

[RiavonParticipant Post count: 89]

Which (child) theme are you referring to, here?

---

Twitter: @riavonentprises

• This reply was modified 5 months ago by  Riavon.

• This reply was modified 5 months ago by  Riavon.

[Hard Boiled GregParticipant Post count: 88]

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

[taylorishereParticipant Post count: 4]

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.

[taylorishereParticipant Post count: 4]

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?

[anitacModerator Post count: 2662]

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.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[taylorishereParticipant Post count: 4]

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…. ?

[Hard Boiled GregParticipant Post count: 88]

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

[taylorishereParticipant Post count: 4]

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.

[Hard Boiled GregParticipant Post count: 88]

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

[taylorishereParticipant Post count: 4]

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:

http://i.imgur.com/WXIoH.png

I would imagine it would need to be an <img src> tag, and not a background… :/

• This reply was modified 5 months ago by  taylorishere.
• This reply was modified 5 months ago by  taylorishere.

• This reply was modified 5 months ago by  taylorishere.
• This reply was modified 5 months ago by  taylorishere.

[Hard Boiled GregParticipant Post count: 88]

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

[taylorishereParticipant Post count: 4]

No. I plan on putting the nav in the right widget area.

[Hard Boiled GregParticipant Post count: 88]

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

• This reply was modified 5 months ago by  Hard Boiled Greg.
• This reply was modified 5 months ago by  Hard Boiled Greg.

• This reply was modified 5 months ago by  Hard Boiled Greg.
• This reply was modified 5 months ago by  Hard Boiled Greg.

[taylorishereParticipant Post count: 4]

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?

[Author]

Posts