Need help? Check out our Support site, then


Logo in the site title

  1. hi, i would like to know if it's possible to put an image in the site title of my blog. http://www.chiropractie-nijmegen.com
    i want to put a logo where it says A.H. Harter Chiropractie. Does anyone know if there's a code for that?

    thanks.

    The blog I need help with is chiropractie-nijmegen.com.

  2. Here is an example using a WordPress logo as the image:

    .site-header h1 a {
    	background: url('http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png') left center no-repeat;
    	padding-left: 40px;
    }

    Add that to your Appearance → Custom Design → CSS page and click the Preview button.

    Note that you can change out the url() value to use a different image and adjust the padding as necessary.

  3. Thanks for the help,
    but it doesn't show the logo... it just say's "Preview: save changes before they get lost" where it should show the logo, and i have saved it.
    I tried it with the wp logo and my own logo.

  4. I checked your cpAppearance → Custom Design → CSS edit page and you currently have the CSS you added commented out like this:

    /*
    .site-header h1 a {
        background: url('http://chiropractienijmegen.files.wordpress.com/2012/12/logo-06.jpg') left center no-repeat;
    	padding-left: 40px;
    }
    */

    Get rid of the /* and */ on the first and last lines.

  5. michaeljchilds
    Member

    Hi designsimply

    Thanks for the info, helped me! Please could you advise on how I would centre the logo, along with the header text.

    Cheers,
    Mike

  6. Hi Michael, sorry for the delay. I added something to your CSS, this will centralize the header. See: https://chiropractienijmegen.wordpress.com/wp-admin/themes.php?page=editcss

    Feel free to contact us if you have any other questions.

  7. Thanks kardotim! It looks like you shifted the site title area to the left to simulate making it look centered with this CSS:

    .site-header h1 {
    	margin-left: 15%;
    }

    I think a better approach would be to make a smaller image that doesn't have extra white space on the right like the one you're currently using:
    http://chiropractienijmegen.files.wordpress.com/2012/12/site-header2.jpg

    Then you could remove the "left" keyword from the "background" property. Here is an example, replace this:

    background: url('http://chiropractienijmegen.files.wordpress.com/2012/12/site-header2.jpg') left center no-repeat;

    With this, and click preview:

    background: url('http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png') center no-repeat;

    I also noticed that using the image technique I first recommended, it won't adjust for small screen sizes like mobile devices. You can make a smaller version of the image and upload that as well to use for cases like that. Here is the CSS you would add:

    @media screen and (min-width: 600px) {
    	.site-title {
    		background: url('320_PIXEL_WIDE_VERSION_OF_THE_IMAGE') center no-repeat;
    	}
    }

    Replace 320_PIXEL_WIDE_VERSION_OF_THE_IMAGE with a link to a smaller version of your logo.

Topic Closed

This topic has been closed to new replies.

About this Topic