how to change text title to logo graphic?

[JC2]

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!

[susanlangenes]

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.

 

[JC2]

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

 

[Tony @ AlphaBlossom]

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.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[JC2]

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%;
}

[Tony @ AlphaBlossom]

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.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts