Gravatar profile used as logo

wimbledoneschool · Member · Jul 1, 2014 at 7:18 pm
Copy link

Add topic to favorites
Hi, I would like to know how can I increase the size of the Gravatar profile symbol that appear on my page (on the top left hand side)? I would like it to be seen as my logo. My site is wimbledoneschool.com

I appreciate any help.

Thanks

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jul 2, 2014 at 11:37 am
Copy link
I checked http://wimbledoneschool.com/ and I don’t see a Gravatar profile symbol at the top left.

Have you changed themes?

Do you still need help adding a logo to the header area of your current theme which is Misty Lake?

Keep in mind CSS is theme-specific. You might like to read this help page to learn more about how CSS editing works at WordPress.com: http://en.support.wordpress.com/custom-design/editing-css/
designsimply · Member · Jul 2, 2014 at 1:41 pm
Copy link
I just found a better explanation of what you’re trying to do in another thread:

I would like to add a logo (Image) to the left handside of the site title (similar to the site title of Sugarskullstudios1). Is it possible?

Here is some CSS you can add to your Appearance > Customize > CSS editor to accomplish that in the Misty Lake theme:
```
.site-title a {
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) left center no-repeat;
	padding-left: 40px;
}
```
I used a WordPress logo for the example image. To use your own image, replace the url() value with a link to the image you would like to use instead.

If you want to use a larger image, you could replace “.site-title a” with “.site-branding” and adjust the height and spacing to match the new image. Here is an example:
```
.site-branding {
	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) -36px center no-repeat;
	padding-left: 120px;
	min-height: 100px;
}
```
Don’t forget to change the “-36px” part, you can make it say “left” and that will probably work better for you depending on your image.
wimbledoneschool · Member · Jul 2, 2014 at 7:52 pm
Copy link
Hi, thanks for the help but I’ve tried and it gave me the space on the left but the image (logo) is not showing still. Can you help me?

Thanks again
designsimply · Member · Jul 3, 2014 at 3:21 pm
Copy link
Sure! I checked your custom CSS just now, and I found this:
```
.site-branding {
	background: url (hthttp://wimbledoneschool.files.wordpress.com/2014/07/logo-final2.jpg) left center no-repeat;
	padding-left:130px
}
```
Btw, including specific examples such as the CSS you tried is always really really helpful.

I see a couple mistakes in your CSS. First, it begins with “hthttp” but it should be “http” — looks like just a typo there. Next, there is a space between “url” and “(” and there shouldn’t be a space there (CSS is very picky about spaces!). You forgot to add the “min-height” value. Finally, it looks like the image you referenced in your CSS is 304 x 341 pixels, and that seems too big:
http://wimbledoneschool.files.wordpress.com/2014/07/logo-final2.jpg

WordPress.com has a built in way to resize images. (We are clever like that.) :) And you can trigger it using a parameter on the image URL. For example, if you wanted to use the image you already uploaded but make it 120px wide, you would use this:

Here is an adjusted CSS example using that image URL and with the syntax fixed:
```
.site-branding {
	background: url(http://wimbledoneschool.files.wordpress.com/2014/07/logo-final2.jpg?w=120) left center no-repeat;
	padding-left: 130px;
	min-height: 146px;
}
```
designsimply · Member · Jul 3, 2014 at 3:41 pm
Copy link
If you wanted to make the logo bigger than that, you would want to adjust all three numbers: the one in the image URL as well as the padding-left and min-height values.
wimbledoneschool · Member · Jul 3, 2014 at 5:11 pm
Copy link
That is perfect now!
Thank you ever so much for the help!
:)
designsimply · Member · Jul 3, 2014 at 6:42 pm
Copy link
Yay! I’m so glad.

No items found.