Need help? Check out our Support site, then


how to change logo image in NotesIL theme

  1. I`d like to change the logo from the first-aid-ish image to one of my own. My image could be any size, so I need to have some CSS code to accommodate a variable size image and display it within the header, where the default image is.

    My blog is bodyconnections.wordpress.com. Thanks!

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

  2. The existing image is 50px x 50px. Will that work for you? If so, create your image, upload it to your media library and post the URL of that image here and I'll see what I can do. The existing image is set in the theme PHP script files, so I have to do some CSS trickery and it's easier if I have an image to work with.

  3. I was hoping to use an image of any size rather than having to pre-convert the image to 50x50, so if people zoom in, the logo won't get chunky. Is that possible to do?

  4. There are some ways of having the image adjust, but the problem is, you are going to be asking the browser to do the resizing of the image and browsers are very lousy at that. All they do is resize and either throw away or add in pixels as needed.

    If you wish to use a larger image, we can do that as long as it isn't too much larger. The red area is about 100px in height. If you want something that is longer than it is high, we can do that also.

  5. OK, good to know the qualifiers. The image I want to use is at http://bodyconnections.files.wordpress.com/2013/03/dancers.png and my trouble is I don't have a program that will allow me to resize .png files. I can get it done by someone, though.

    I'm assuming that regardless of the image file, it'll be the same CSS code, yes?

  6. This could probably be a little cleaner, but it gets the job done. I resized the image to 80px tall using Photoshop for you. Download this image, then upload it to your media library, get the URL of that uploaded image and replace the URL in the background declaration between the double quote marks.

    #blog-title {
        background: url("http://flippintestblog.files.wordpress.com/2013/05/dancers-80h.png") no-repeat scroll top left transparent;
        text-indent: 70px;
        height: 80px;
        position: relative;
        top: -10px;
        line-height: 40px;
    }
    
    #blog-description {
        text-indent: 70px;
        position: relative;
        top: -50px;
    }
  7. Thanks, that has the new logo added, but on my CSS preview, the old logo still appears as well.

    I'm guessing it doesn't display that way on yours, so I'm not sure how my setup is different from yours.

  8. There seems to be something going on with the custom design at the moment because the custom CSS for several people isn't saving and the code they are using is correct. Perhaps staff are tinkering.

  9. OK, I got rid of the original header by adding some CSS code. Now I'd like to make the header text a bit bigger to balance the 50x50 image size.

  10. Add this to #blog-title and play with the sizing.

    font-size: 220%;

  11. Great stuff, thanks! Almost there...

    Now I need to make the header a bit larger to balance the "white space" top and bottom of the text.

  12. Here you go.

    #header {
    height: 80px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic