How to create a "hanging logo" in 1.8+

Community Forums Forums Design Tips and Tricks How to create a "hanging logo" in 1.8+

This topic is: not resolved

Tagged: ,

This topic contains 20 replies, has 4 voices, and was last updated by  taylorishere 1 year, 8 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #6559

    taylorishere
    Participant
    Post count: 8

    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?

    #6734

    Riavon
    Participant
    Post count: 95

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


    Twitter: @riavonentprises

    • This reply was modified 1 year, 8 months ago by  Riavon.
    • This reply was modified 1 year, 8 months ago by  Riavon.
    #6758

    Hard Boiled Greg
    Participant
    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

    #6808

    taylorishere
    Participant
    Post count: 8

    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.

    #6820

    taylorishere
    Participant
    Post count: 8

    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?

    #6822

    Anita
    Participant
    Post count: 7429

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #6824

    taylorishere
    Participant
    Post count: 8

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

    #6830

    Hard Boiled Greg
    Participant
    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

    #6848

    taylorishere
    Participant
    Post count: 8

    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.

    #6849

    Hard Boiled Greg
    Participant
    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

    #6852

    taylorishere
    Participant
    Post count: 8

    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 1 year, 8 months ago by  taylorishere.
    • This reply was modified 1 year, 8 months ago by  taylorishere.
    • This reply was modified 1 year, 8 months ago by  taylorishere.
    • This reply was modified 1 year, 8 months ago by  taylorishere.
    #6860

    Hard Boiled Greg
    Participant
    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

    #6862

    taylorishere
    Participant
    Post count: 8

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

    #6867

    Hard Boiled Greg
    Participant
    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

    #6989

    taylorishere
    Participant
    Post count: 8

    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?

Viewing 15 posts - 1 through 15 (of 21 total)

The topic ‘How to create a &quot;hanging logo&quot; in 1.8+’ is closed to new replies.