how to change logo image in NotesIL theme

pstrapp · Member · May 8, 2013 at 11:24 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Member · May 8, 2013 at 11:48 pm
Copy link
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.
pstrapp · Member · May 9, 2013 at 12:49 am
Copy link
I was hoping to use an image of any size rather than having to pre-convert the image to 50×50, so if people zoom in, the logo won’t get chunky. Is that possible to do?
thesacredpath · Member · May 9, 2013 at 1:00 am
Copy link
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.
pstrapp · Member · May 9, 2013 at 1:50 am
Copy link
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?
thesacredpath · Member · May 9, 2013 at 2:34 am
Copy link
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;
}
```
pstrapp · Member · May 10, 2013 at 3:15 am
Copy link
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.
thesacredpath · Member · May 10, 2013 at 3:24 am
Copy link
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.
pstrapp · Member · May 13, 2013 at 1:05 am
Copy link
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 50×50 image size.
thesacredpath · Member · May 13, 2013 at 4:41 am
Copy link
Add this to #blog-title and play with the sizing.

font-size: 220%;
pstrapp · Member · May 13, 2013 at 4:52 am
Copy link
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.
thesacredpath · Member · May 13, 2013 at 4:57 am
Copy link
Here you go.
```
#header {
height: 80px;
}
```

No items found.