Add logo and change spacing

acupunctuurpraktijk · Member · Feb 2, 2013 at 1:21 pm
Copy link

Add topic to favorites
Hi guys,

Om my website http://acupunctuurpraktijkutrecht.wordpress.com/ at the top of the page above the “header image” I would like to
1) Add my own logo (jpg) in the centre.
2) Remove the search bar

3) Also I would like to move the “page title” (welkom bij Baidu..) up, so it is closer to the “header image”.

How can I do this in css? Thanks for your help!

Daan

I have the css ugrade.

The blog I need help with is: (visible only to logged in users)
catezapp · Member · Feb 2, 2013 at 3:55 pm
Copy link
go to your settings theme header and upload your image from there,and save it-you can also have your own backround
fusionrm · Member · Feb 2, 2013 at 5:28 pm
Copy link
I am also interested in putting my logo and title above the header image. I can’t figure out how to do it. There are a few tutorials but they are for self hosted blogs on wordpress.org. Anyhelp would be appreciated! Thank you!
designsimply · Member · Feb 14, 2013 at 4:59 pm
Copy link
1) Add my own logo (jpg) in the centre.

You can add a logo using the “background” CSS property. Here is an example that will work for the Twenty Eleven theme:
```
#branding {
	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) center -15px no-repeat;
}
```
Replace the url() value with a link to your logo, and adjust the number values if needed. If your logo is bigger than the space given, you could add a “padding-top” property to the CSS example above to get more space.
designsimply · Member · Feb 14, 2013 at 4:59 pm
Copy link
2) Remove the search bar

To hide the header search form in the Twenty Eleven theme, add this to your Appearance → Custom Design → CSS editor:
```
#branding #searchform {
	display: none;
}
```
designsimply · Member · Feb 14, 2013 at 5:01 pm
Copy link
3) Also I would like to move the “page title” (welkom bij Baidu..) up, so it is closer to the “header image”.

This will adjust the spacing above the main content area for single pages on the Twenty Eleven theme:
```
.singular.page .hentry {
	padding-top: 0;
}
```
acupunctuurpraktijk · Member · Feb 15, 2013 at 10:58 am
Copy link
Hi,

Thanks for your help! I’ve managed to change the padding and remove the search form. Adding my logo hasn’t worked yet though. I want to add the logo above the header image. I’ve added some padding to give the logo more room, but still can’t see it. The image is 489X107. Is it to big?

This is what I’ve written in CSS

#branding {
background: url(http://acupunctuurpraktijkutrecht.wordpress.com/?attachment_id=260) center -15px no-repeat;
designsimply · Member · Feb 21, 2013 at 3:16 pm
Copy link
The value you entered in url() is a link to a web page, but it needs to be an image.

Instead of this:
http://acupunctuurpraktijkutrecht.wordpress.com/?attachment_id=260

Use this:
http://acupunctuurpraktijkutrecht.files.wordpress.com/2013/02/logo-geknipt1.jpg?w=489

Also, you’ll want to adjust the -15px value to work better with your image compared to the logo example I used. Here is an updated example:
```
#branding {
	background: url('http://acupunctuurpraktijkutrecht.files.wordpress.com/2013/02/logo-geknipt1.jpg?w=489') center 25px no-repeat;
}
```
acupunctuurpraktijk · Member · Feb 22, 2013 at 7:21 pm
Copy link
Yep that works. Thanks so much for your help!

Daan
designsimply · Member · Feb 22, 2013 at 7:23 pm
Copy link
You’re welcome!

No items found.