Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Remove Site Title and add logo

  1. hrintuitive
    Member

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

  2. panaghiotisadam
    Member

    You don't need CSS to hide the title: the theme you're using has that option in Appearance > Header.

  3. hrintuitive
    Member

    I want to keep the header. I want to remove the title and when I choose that option in settings then it removes everything.

  4. hrintuitive
    Member

    Sorry I guess I was not clear in that I want to add a logo INSTEAD of having a site title.
    Thanks!!

  5. timethief
    Member

    That option removes only the text. It does not remove the header image.
    Appearance > Header
    Display Text
    __ No __Yes

  6. hrintuitive
    Member

    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!

  7. hrintuitive
    Member

    I figured it out:

    #site-title a {
    color: transparent;
    font-weight: bold;
    text-decoration: none;
    }

  8. timethief
    Member

    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?

  9. panaghiotisadam
    Member

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

  10. hrintuitive
    Member

    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!

  11. designsimply
    Staff

    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.

  12. hrintuitive
    Member

    Wow Thank you DesignSimply. That definitely helped ALOT. I really appreciate it!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags