Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Greyzed theme adding my logo where the text site name is at the top.

  1. mikexc82
    Member

    I am trying to add my logo on my Greyzed theme and am not sure how to do it. I want to get rid of the text/title of site and add my logo. Can you help? Thanks! my current site is http://www.constantrunner.org. The logo is http://www.constantrunner.org/wp-content/uploads/2012/03/Screen-shot-2012-02-29-at-12.28.21-PM1-e1330992461678.png

    The blog I need help with is constantrunnerblog.wordpress.com.

  2. designsimply
    Staff

    Thanks for including the logo image link!

    To replace the site title with your image in the Greyzed theme, try this:

    #header h1 {
padding-top: 55px;
}
#header h1 a {
text-indent: -9999px;
background: url(http://www.constantrunner.org/wp-content/uploads/2012/03/Screen-shot-2012-02-29-at-12.28.21-PM1-e1330992461678.png) no-repeat;
display: block;
width: 546px;
height: 165px;
}

  3. mikexc82
    Member

    I tried this and there are two logos that post. one on top of each other. I like the bottom one but it needs to be pulled up and to the left just a little. Can you help? Thanks for everything!! Mike

  4. mikexc82
    Member

    actually just a little higher and without the one above it. Thanks!!

  5. mikexc82
    Member

    ok.. so I got the 2nd off.. now I just need to raise it up a little. http://www.constantrunner.org. Thanks!

  6. designsimply
    Staff

    Find this block:

    h1 {
padding-top: 115px;
margin: 0;
}

    And change '115' to '80'.

    Whoops, I didn't realize your site wasn't setup here at WordPress.com. This forum is for WordPress.com blogs, and so if you need further help, please ask at http://wordpress.org/support/

    Go to http://en.support.wordpress.com/com-vs-org/ to learn more about the differences.

  7. apodacapaving
    Member

    i have this same theme and would like to substitute my company logo instead of having the title...how can this been done anyone? Please and thank you in advance!!!

    Blog: http://apodacapaving.wordpress.com/

    Logo: http://apodacapaving.files.wordpress.com/2012/04/apodaca_logo_v8.pdf

  8. designsimply
    Staff

    The logo link you provided is a pdf, and not all browsers will display a pdf as an image. So the first thing you should do is get a hold of a logo image that is a PNG, JPG, or GIF format, upload it to your media library, and copy the image URL.

    Then add this to your Appearance → Custom Design → CSS page:

    #header h1 {
padding-top: 55px;
}

#header h1 a {
text-indent: -9999px;
background: url(YOUR_IMAGE_URL) no-repeat;
display: block;
width: YOUR_IMAGE_WIDTH;
height: YOUR_IMAGE_HEIGHT;
}

    Replace YOUR_IMAGE_URL with the image URL of your logo. Replace YOUR_IMAGE_WIDTH and YOUR_IMAGE_HEIGHT with your image width and height. Then adjust the padding-top value until the image is placed where you want in the header.

  9. apodacapaving
    Member

    Thanks...but when I save and plug in the code as you provided above...the image background is not compatible...like as in a vector image...? The pdf image lays on top of the theme with no change of 'image background' color like when I changed my logo to a png as you instructed. Please help!

  10. designsimply
    Staff

    You need to use an image that all browsers will display, and not all browsers will display PDFs. You should make sure to use a JPG, GIF, or PNG file instead.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags