Remove Site Title and add logo

hrintuitive · Member · Jan 31, 2012 at 11:22 pm
Copy link

Add topic to favorites
Hi,
I have modified the CSS using (see below): however, the original site title is still there. When I add the css to remove it then it removes everything. Here is what I have added:

My site is http://www.hrintuitive.com

/* =Header
————————————————————– */

#header {
padding: 30px 0 0 0;
}
#site-title {
float: left;
margin: 0 0 18px 0;
width: 700px;
font-size: 30px;
line-height: 56px;
background-image: url(http://hrintuitive.files.wordpress.com/2012/01/logoproof.jpg);
background-repeat: no-repeat;
text-indent: 68px;

Thanks!!

The blog I need help with is: (visible only to logged in users)
panaghiotisadam · Member · Jan 31, 2012 at 11:28 pm
Copy link
You don’t need CSS to hide the title: the theme you’re using has that option in Appearance > Header.
hrintuitive · Member · Jan 31, 2012 at 11:34 pm
Copy link
I want to keep the header. I want to remove the title and when I choose that option in settings then it removes everything.
hrintuitive · Member · Jan 31, 2012 at 11:37 pm
Copy link
Sorry I guess I was not clear in that I want to add a logo INSTEAD of having a site title.
Thanks!!
timethief · Member · Jan 31, 2012 at 11:39 pm
Copy link
That option removes only the text. It does not remove the header image.
Appearance > Header
Display Text
__ No __Yes
hrintuitive · Member · Jan 31, 2012 at 11:54 pm
Copy link
Hi Timethief, when I do that, it also overwrites the logo. I have coded a custom logo. I am not worried about the header. I want to replace the site title with a logo. http://www.hrintuitive.com Thanks!
hrintuitive · Member · Feb 1, 2012 at 12:03 am
Copy link
I figured it out:

#site-title a {
color: transparent;
font-weight: bold;
text-decoration: none;
}
timethief · Member · Feb 1, 2012 at 12:07 am
Copy link
Hi again,
The blog is looking very nice. I’m a nit picky type and I see a little gray squiggle on the header image on the top left just above the logo but to the left of it. Do you see it too?
panaghiotisadam · Member · Feb 1, 2012 at 12:15 am
Copy link
@hrintuitive: Sorry for my initial reply – didn’t look at your CSS carefully to realize what you were trying to do, and thought you wanted to eliminate the regular blog title and add it to the header image.

@TT: Right. The squiggle is on the image, so the image needs to be edited and re-uploaded.
hrintuitive · Member · Feb 1, 2012 at 12:34 am
Copy link
HI- Thank you so much! I appreciate the feedback. The image is just a proof and is very rough. I havent received the file back from the graphic artist but I may need to do some resizing of the borders but that gray mark will definitely be gone with the final.
Thank you!
designsimply · Member · Feb 1, 2012 at 12:52 am
Copy link
color: transparent won’t work in IE. Try this as an alternative:
```
#site-title {
height: 82px;
text-indent: -9999px !important;
}
```
In your current “#site-title a” rule, you don’t need any of the font display or text decoration rules if you’re just going to hide that text with transparency or a large text-indent anyway.
```
#site-title a {
font-family:Le Monde Sans;
font-size:1.3em;
color:transparent;
font-weight:bold;
text-decoration:none;
}
```
You could change it to this to keep the clickable area large:
```
#site-title a {
display: block;
height: 82px;
}
```
In both examples, adjust the height numbers as necessary after you change out the image.
hrintuitive · Member · Feb 4, 2012 at 4:20 am
Copy link
Wow Thank you DesignSimply. That definitely helped ALOT. I really appreciate it!

No items found.