WordPress.com

1. 1dctcb
   Member
   Dec 6, 2012, 9:22 AM

   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. designsimply
   Staff
   Dec 27, 2012, 5:48 AM

   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. 1dctcb
   Member
   Dec 27, 2012, 8:36 AM

   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. designsimply
   Staff
   Dec 27, 2012, 9:30 AM

   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
   Feb 4, 2013, 1:24 PM

   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. kardotim
   Happiness Engineer
   Mar 4, 2013, 6:07 AM

   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. designsimply
   Staff
   Mar 4, 2013, 10:54 PM

   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.