Header Text

• 

  futbolpulse · Member · Dec 11, 2013 at 11:48 pm

  • Copy link
  • Add topic to favorites

  Hi guys,

  I recently switched my blog over to the Twenty Fourteen theme. Everything is great, however I do have a small question. Is there any way to put in my site logo to replace the header text (site title) on the top left using css?

  Thanks!

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

• 

  thesacredpath · Member · Dec 12, 2013 at 3:53 am

  • Copy link

  Yes, that can be done although the site title is in the masthead div which means it has the same height as the menu, which is about 48px. It could be made bigger, but it may get a little involved to get things to flow properly when viewed on smaller devices.

  An option to replacing the site title would be to put the logo into the top of the sidebar (in a text widget) and then hide the existing site title/description by deselecting “Show header text with your image.” The sidebar width is 162px.

• 

  futbolpulse · Member · Dec 13, 2013 at 2:43 am

  • Copy link

  Thank you, but how exactly can I put the logo into my blog? I want it to replace exactly where the site title is now, is there any way to do that?

• 

  thesacredpath · Member · Dec 13, 2013 at 3:47 am

  • Copy link

  Create your logo image at about 48px tall by about 100px in width (if you want it the same size as the existing text site title), upload it to your media library, get the URL of that image and replace URL_OF_IMAGE between the quotes in the CSS below and then paste the following at the end of your custom CSS.

  .site-title {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
  
  .site-title a, .site-title a:hover {
      color: rgba(0, 0, 0, 0);
  }

  You can go up to about 192px in width in the title area. If you do that, add the following width declaration to the first rule above.

  width: 192px;

• 

  futbolpulse · Member · Dec 13, 2013 at 9:50 pm

  • Copy link

  Thanks, done that! Just two more questions, how can I prevent the original title from showing up when I drag my mouse over it, and how can I make the actual logo link to the homepage (futbolpulse.com)?

• 

  thesacredpath · Member · Dec 16, 2013 at 5:20 pm

  • Copy link

  Modify the following to include “display: block;” to get the entire image to link to the site.

  I’m not seeing the site name show up when I hover in Chrome, Firefox or Safari. What browser are you seeing this in?

• 

  thesacredpath · Member · Dec 16, 2013 at 5:20 pm

  • Copy link

  Oops, forgot to insert the code. :)

  .site-title a, .site-title a:hover {
      color: rgba(0, 0, 0, 0);
      display: block;
  }

• 

  futbolpulse · Member · Dec 17, 2013 at 7:24 pm

  • Copy link

  Thanks again. The site name shows up when you click your mouse and drag it over the logo like you’re trying to select text, not when you hover over it. How can I prevent it from showing up?

• 

  justpi · Member · Dec 17, 2013 at 8:07 pm

  • Copy link

  Turn the above to this:

  .site-title a, .site-title a:hover {
  color: rgba(0, 0, 0, 0);
  display: block;
  text-indent: -9999px;
  }