Adding logo to hosted theme

andray · Member · Sep 6, 2011 at 2:35 am
Copy link

Add topic to favorites
Is there a way to add a custom logo above the header image on Twenty Eleven hosted theme? Maybe through custom CSS? Thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 6, 2011 at 2:39 am
Copy link
Yes there is, can we have a link to the site you are talking about please.
designsimply · Member · Sep 6, 2011 at 2:47 am
Copy link
It would be helpful if you provided a direct link to a logo file too. If you need to upload one, you can add it to your media library and then get the image URL from there.
andray · Member · Sep 6, 2011 at 6:23 am
Copy link
thanks guys, my site is:
http://iddiction.wordpress.com
andray · Member · Sep 6, 2011 at 6:26 am
Copy link
I’d like to add the logo above the header image – instead of the title of the blog. Again, this is a hosted them and I have purchase the custom CSS upgrade.
thesacredpath · Member · Sep 6, 2011 at 6:41 am
Copy link
Without adjusting the size of the area up there, you have about 100px in height to work with and still have good white space.

Have you designed your logo yet?
andray · Member · Sep 6, 2011 at 6:43 am
Copy link
Sure. But how do you do that?
thesacredpath · Member · Sep 6, 2011 at 6:48 am
Copy link
In general, you would do the following and then replace URL OF IMAGE between the double quotes with the URL of the logo you upload to your media library. It could require some margins and padding, and possibly even a height declaration just depending on the nature and size of your image.
```
#branding hgroup {
background: url("URL OF IMAGE") repeat scroll 0 0 red;
}

#site-title, #site-description {
display: none;
}
```
thesacredpath · Member · Sep 6, 2011 at 6:49 am
Copy link
Upload the image to your media library (media > add new in the dashboard) when it uploads, toward the bottom of the upload page will be the URL of the image in a grey field. Get that URL and post it here in this thread and then we can get it worked out for you.
andray · Member · Sep 6, 2011 at 6:56 am
Copy link
how do you do the height declaration?
thesacredpath · Member · Sep 6, 2011 at 7:25 am
Copy link
As below. You can adjust the 140px value as needed.
```
#branding hgroup {
background: url("URL OF IMAGE") repeat scroll 0 0 red;
height: 140px;
}
```

No items found.