Logo above header

• 

  grosmontweb · Member · Mar 21, 2017 at 6:17 pm

  • Copy link
  • Add topic to favorites

  Hi
  What would we do without this Forum?!
  I am using the twenty ten theme and wondered if it is possible to put a logo above the feature image – at the far right of the page, in line with and in addition to the site title, not instead of. I am a relative newbie so may need gentle guidance!
  Thank you
  Gaynor

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

• 

  dianakcury · Member · Mar 21, 2017 at 10:41 pm

  • Copy link

  Hi there,

  This is possible with some CSS code yes, for example:

  #site-description { margin: 0 }
  
  #site-description:after {
      display: block;
      content: '';
      width: 55px;
      height: 55px;
      float: right;
      position: relative;
      top: -14px;
      background-image: url(https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png);
      background-size: 55px auto;
      background-position: center top;
      background-repeat: no-repeat;
  }

  In order to use your logo, upload the image file to your site then copy and paste the full URL to the image to the code.

  I hope this helps.

• 

  grosmontweb · Member · Mar 22, 2017 at 1:58 pm

  • Copy link

  Hi dianakcury
  Thank you very much for doing this for me but, unfortunately, I don’t seem to be able to get it to work – I’m not sure what I am doing wrong.
  The image I am trying to insert is the logo (a smaller version of) in the fourth widget at the bottom of the page.
  Sorry to be a nuisance – this is such a steep learning curve for me because I have never done anything like it before!
  Gaynor

• 

  dianakcury · Member · Mar 22, 2017 at 11:53 pm

  • Copy link

  Hi Gaynor!

  We’re almost there, just need to replace the image on the code with the image you said:

  #site-description { margin: 0 }
  
  #site-description:after {
      display: block;
      content: '';
      width: 55px;
      height: 55px;
      float: right;
      position: relative;
      top: -14px;
      background-image: url('https://i2.wp.com/grosmontsite.files.wordpress.com/2017/03/img_22961.jpg');
      background-size: 55px auto;
      background-position: center top;
      background-repeat: no-repeat;
  }

  I see that you added the code but the image is not showing because is not available.

• 

  grosmontweb · Member · Mar 23, 2017 at 5:47 am

  • Copy link

  Hi dianakcury
  Brilliant!! Thank you so much (especially for your patience!)
  That is twice now you have helped me with this website. I really do appreciate your time.
  Gaynor.

• 

  dianakcury · Member · Mar 23, 2017 at 2:44 pm

  • Copy link

  You’re welcome =)