Need help? Check out our Support site, then


Header Text

  1. 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 futbolpulse.com.

  2. 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.

  3. 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?

  4. 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;

  5. 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)?

  6. 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?

  7. Oops, forgot to insert the code. :)

    .site-title a, .site-title a:hover {
        color: rgba(0, 0, 0, 0);
        display: block;
    }
  8. 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?

  9. Turn the above to this:

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

Topic Closed

This topic has been closed to new replies.

About this Topic