Logo in the site title

• 

  1dctcb · Member · Dec 6, 2012 at 9:22 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Dec 27, 2012 at 5:48 am

  • Copy link

  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.

• 

  1dctcb · Member · Dec 27, 2012 at 8:36 am

  • Copy link

  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.

• 

  designsimply · Member · Dec 27, 2012 at 9:30 am

  • Copy link

  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.

• 

  michaeljchilds · Member · Feb 4, 2013 at 1:24 pm

  • Copy link

  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

• 

  kardotim · Member · Mar 4, 2013 at 6:07 am

  • Copy link

  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.

• 

  designsimply · Member · Mar 4, 2013 at 10:54 pm

  • Copy link

  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.