how to change text title to logo graphic?

Community Forums Forums Design Tips and Tricks how to change text title to logo graphic?

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  Tony @ AlphaBlossom 1 year, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18794

    JC2
    Participant
    Post count: 8

    Newbie here, just learning, and working on the logo in the header.  Is there a way to change the text title to a graphic logo? I’ve found the settings to change the whole header graphic, but I was hoping to only add a logo to the left top.

    Thanks!

    #18830

    susanlangenes
    Participant
    Post count: 28

    What theme are you using?  Do you mean you want the title text AND the logo graphic, like this? http://americanclothingexperiment.org/

    (nevermind that the logo is to the right of the text).

    In the above site, I created the logo as a 960px by 100px file with the logo image over a transparent background, uploaded that via the header image uploader, and checked the box for “show header text with your image”.

    So that’s one way you could do it.

     

    #19029

    JC2
    Participant
    Post count: 8

    Thanks Susan!

    I just want the logo, which is not the full width of the header.  I suppose I could work around like you and use a transparent background for the rest of the header graphic. I was wondering if there was a more straightforward way to do this that I had overlooked in the settings..

     

    #19098

    Tony @ AlphaBlossom
    Participant
    Post count: 536

    In your admin panel, under Genesis > Theme settings, for the header select “Image logo.”

    Then in your child-theme css you can change #title a:


    #header #title a {
    background: url("images/my-image.png") no-repeat center center;
    display: block;
    height: 100px;
    width: 200px;
    }

    You can adjust the width and height to your needs. You may also have to adjust #title-area and #title.

    That will replace your text with a “clickable” logo image.


    #20189

    JC2
    Participant
    Post count: 8

    Thanks Tony.  I’m still working on this…  My version of Genesis doesn’t have that option, but there is a way to upload a header image in appearance/header.

    I looked into the theme css, but couldn’t figure out where to add or replace code with the code you recommended.  What do you think?  This is the code I think I should be working on, but not sure what to do:

     

    /* Header
    ———————————————————— */

    #header {
    margin: 0 auto;
    min-height: 100px;
    width: 100%;
    }

    #title-area {
    float: left;
    overflow: hidden;
    width: 25%;
    }

    #title {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.25;
    margin: 0 0 5px;
    }

    #title a,
    #title a:hover {
    color: #222;
    display: block;
    padding: 27px 0 0;
    text-decoration: none;
    }

    #header .widget-area {
    float: right;
    width: 75%;
    }
    /* Image Header – Partial Width
    ———————————————————— */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 100px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 25%;
    }
    /* Image Header – Full Width
    ———————————————————— */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    #20192

    Tony @ AlphaBlossom
    Participant
    Post count: 536

    Hello,

    That looks like the right place, as long as it’s your child-theme css (NOT the Genesis parent css). I would change the #title a, #title a:hover to:


    #title a {
    background: url("images/my-image.png") no-repeat center center;
    display: block;
    height: 100px;
    width: 200px;
    text-indent: -9999px;
    }


    #title a:hover {
    text-decoration: none;
    }

    Adding the text-indent will hide the text, and all you will see is the background image/logo.

    You might have to play with or remove the #title-area width, but hard to tell without seeing the site.


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.