How do I upload my own custom logo to my blog?

• 

  williamgrovefanning · Member · Oct 17, 2013 at 2:46 am

  • Copy link
  • Add topic to favorites

  I am using Twenty Eleven theme and have the css upgrade.

  I want to have the logo go where the default search box used to be, in the upper right hand corner of my blog, above the header. I don’t want the logo to replace my site name on the upper hand left-hand side of the page. I want it to go to the right of the site name in the open space.

  While I have found instructions on how to replace the site name with a logo (on the left), I can’t find anything in the forums about what I am trying to do.

  Any help is appreciated.

  The blog I need help with is: (visible only to logged in users)

• 

  williamgrovefanning · Member · Oct 17, 2013 at 4:42 pm

  • Copy link

  Does anyone know how to do this?

• 

  thesacredpath · Member · Oct 17, 2013 at 5:28 pm

  • Copy link

  Hi, you can use the following CSS. Create your logo and upload it to your media library. After it uploads, click on the edit link to the right and copy the URL for the image. Add the following code to your custom CSS and replace URL_OF_IMAGE between the double quote marks with the URL of your uploaded logo. To align generally with the title and description to the left, you have about 250px wide by 60px high, but you can go a little taller. If you want to go much taller, it will require some adjustments to the #branding div height, margins and padding.

  #branding hgroup {
      background: url("URL_OF_IMAGE") no-repeat scroll bottom right;
  }

• 

  williamgrovefanning · Member · Oct 17, 2013 at 6:12 pm

  • Copy link

  Thanks, Sacred Path! I am almost there. Now, how do I adjust the image slightly, in this case, push it down and maybe to the right a bit.

  (take a look at the website with the new image).

• 

  williamgrovefanning · Member · Oct 17, 2013 at 6:30 pm

  • Copy link

  I was not able to push down the image, but I did figure how to pull up the header, achieving the same effect.

  Here is what I have, following you:

  #branding hgroup {
  background: url(“http://iseethics.files.wordpress.com/2013/10/isee-logo-125-by-125.png”) no-repeat scroll bottom right;
  margin-bottom: -2em;
  }

• 

  thesacredpath · Member · Oct 17, 2013 at 6:54 pm

  • Copy link

  Hi, replace the code I previously gave you with the following with the following and see what you think.

  #branding hgroup {
      background: url("http://iseethics.files.wordpress.com/2013/10/isee-logo-125-by-125.png") no-repeat scroll right top rgba(0, 0, 0, 0);
      height: 125px;
      margin-bottom: 1em;
      margin-right: 5%;
      margin-top: 15px;
  }
  
  #site-title {
      padding-top: 1em;
  }

• 

  williamgrovefanning · Member · Oct 17, 2013 at 7:06 pm

  • Copy link

  Looks great Sacred Path. I see that I can play with the alignments now as well. Support at WP.com is always great. Cheers!

  (I have another question about closing the space between my header image and the main menu, but I just asked about this in a separate thread.)

• 

  thesacredpath · Member · Oct 17, 2013 at 7:14 pm

  • Copy link

  You are welcome, and I just answered you in the other thread.

  Cheers!