Adding Logo CSS

ftforphans · Member · Mar 22, 2015 at 12:22 am
Copy link

Add topic to favorites
I’m Wondering if there is some CSS editing I can do to add a logo to my site, the misty lake theme. If so could you get me that code? Thanks.

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Mar 22, 2015 at 7:43 am
Copy link
Have you identified the logo you wish to use? If so, could you please upload it to your Media Library and link it so I can substitute its url in the following CSS:
```
h1.site-title:before {
    display: block;
    content: url('https://chaittestpress.files.wordpress.com/2015/01/wordpress-logo-resized.png');
}
```
This CSS adds the WordPress logo from my Media Library but will be ultimately replaced with your logo. Also please let me know if you need to display the logo in a specific way so we can work out the CSS to get your desired result.
ftforphans · Member · Mar 23, 2015 at 2:09 am
Copy link
https://ftforphans.files.wordpress.com/2014/10/cropped-ftf-logo-2.png is the url for the image. I would like it to appear on the left hand side of the site title. I tried using the code that you gave me, replacing the WordPress picture with mine and it was way too large, and at the top of the site title. Thank you for your help. :-)
staff-happychia · Staff · Mar 23, 2015 at 7:30 pm
Copy link
Are you able to downsize the image and use the following CSS:
```
h1.site-title:before {
    padding-right: 10px;
    content: url('https://ftforphans.files.wordpress.com/2014/10/cropped-ftf-logo-2.png');
}
```
Removed the following rule as you want the logo to the left of the site title and added some right padding.
```
display: block;
```
ftforphans · Member · Mar 23, 2015 at 8:12 pm
Copy link
I’m not sure how to downsize the image, it still comes huge. I tried downsizing the number of px, (assuming this means Pixels) if this would do the trick but it did nothing. The Image was displayed on the right hand side of the text however. Thanks
staff-happychia · Staff · Mar 23, 2015 at 9:29 pm
Copy link
I resized the image to 150px by 150px and uploaded it here: https://cloudup.com/cOnACIid58g

Please download it, upload to your Media Library and replace its url in the above CSS and see how it turns up.

Please note that the text won’t be clear at 150×150 size which is the typical logo image size.
ftforphans · Member · Mar 23, 2015 at 10:03 pm
Copy link
It looks pretty good. The only thing I didn’t think about was the fact the the image has a white background and the logo is a circle. Is there a way to crop out the circle logo so it matches the color of the background of the site? The other thing is, can I move the logo down so the tagline of the site is not below the logo but directly under the site title. look here and see what I mean: https://ftforphans.files.wordpress.com/2015/03/screen-shot-2015-03-23-at-2-43-28-pm.png

Thanks
staff-happychia · Staff · Mar 25, 2015 at 3:22 am
Copy link
You should be able to edit the image in some image manipulation program like GIMP or even a basic program like Microsoft Paint to change its background to whatever color you wish.

can I move the logo down so the tagline of the site is not below the logo but directly under the site title.

Please add the following property so the logo, site title and the tagline appear in their new lines.
```
display: block;
```
Please don’t hesitate to let me know if this is not what you wanted.
ftforphans · Member · Apr 2, 2015 at 6:55 pm
Copy link
I added the code:
`display: block;
and the logo appears above the site title and the tagline. Can I change that so the logo appears in line with the site title and tagline. I appreciate your help.

Thanks.

thesacredpath · Member · Apr 6, 2015 at 9:21 pm

Hi, I have another suggestion for handling this, and it is to add the image as a background image to the .site-branding div. That I think will work a little better. The following keeps the text to the right of the image down to 710px where things start to go awry. On screens/windows narrower than 710px, I’ve centered the image and the text below it and also made the site title a bit smaller so that it flows better on smaller screens. See what you think and make sure and view things on a tablet and phone so you can see how things look.

.site-branding {
    background: url('https://ftforphans.files.wordpress.com/2015/04/screen-shot-2015-04-02-at-6-26-26-pm-copy.png') no-repeat scroll 0 0 transparent;
    height: 150px;
	margin-top: 20px;
}
.site-title, .site-description {
    padding-left: 180px;
}

@media screen and (max-width: 710px) {
	.site-branding {
		background-position: center top;
		height: 290px;
		background-size: 100px auto
	}
	.site-title {
		padding-left: 0;
		text-align: center;
		padding-top: 100px;
	}
	.site-description {
		text-align: center;
		padding-left: 0;
	}
	.site-title a {
		font-size: 80% !important;
	}
}
@media screen and (max-width: 425px) {
	.site-branding {
		height: 320px;
	}
}

ftforphans · Member · Apr 7, 2015 at 4:32 pm
Copy link
That looks really good. I haven’t got a chance yet to look at it on a tablet or on a phone though which I will do soon. The only thing I’m wondering now is if I can move the site title down a tad, so it is centered with the logo background. If it is too complicated, it looks fine the way it is.
Thank you for your help : )
thesacredpath · Member · Apr 9, 2015 at 5:14 pm
Copy link
You are welcome and give this a try on the site title alignment.
```
@media screen and (min-width: 711px) {
.site-title {
    padding-top: 25px !important;
}
}
```

The topic ‘Adding Logo CSS’ is closed to new replies.

WordPress.com forums

Adding Logo CSS