Community Forums › Forums › Archived Forums › Design Tips and Tricks › how to change text title to logo graphic?
- This topic has 5 replies, 3 voices, and was last updated 11 years, 2 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
February 7, 2013 at 6:12 pm #18794JC2Member
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!
February 7, 2013 at 8:35 pm #18830susanlangenesMemberWhat 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.
February 8, 2013 at 1:53 pm #19029JC2MemberThanks 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..
February 8, 2013 at 4:20 pm #19098Tony @ AlphaBlossomMemberIn 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
February 13, 2013 at 6:48 pm #20189JC2MemberThanks 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%;
}February 13, 2013 at 6:55 pm #20192Tony @ AlphaBlossomMemberHello,
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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.