Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Add logo and change spacing

  1. acupunctuurpraktijk
    Member

    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 acupunctuurpraktijkutrecht.wordpress.com.

  2. catezapp
    Member

    go to your settings theme header and upload your image from there,and save it-you can also have your own backround

  3. fusionrm
    Member

    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!

  4. designsimply
    Staff

    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.

  5. designsimply
    Staff

    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;
}

  6. designsimply
    Staff

    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;
}

  7. acupunctuurpraktijk
    Member

    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;

  8. designsimply
    Staff

    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;
}

  9. acupunctuurpraktijk
    Member

    Yep that works. Thanks so much for your help!

    Daan

  10. designsimply
    Staff

    You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags