Support » Themes and Templates » Linking a Site-Title Background Image

  • I am using the News Theme at http://www.criticspeak.com.

    In the site-title section of my stylesheet, I have hidden the title text to use a background logo instead, as so:

    #site-title{float:left;height: 150px;text-indent: -9999px !important;margin:0px 0 0 0;font:normal normal normal 525px Lobster,Georgia,Times,’Times New Roman’,serif;background:url(images/logo.png) no-repeat 0 10px}#site-title a{padding:0 0 0 55px;line-height:normal;color:#fafafa}#site-title a:hover{text-decoration:none;color:#fffad2}

    The problem with this is it no longer links back to the home page. Is there any way I can create an invisible block over the background logo that links back? I would appreciate help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Oyyy, looks like the solution above only worked for Safari. In Firefox, I can’t see the logo. Can anyone help me out with why? Thanks!

    WPyogi

    (@wpyogi)

    Forum Moderator

    The text-indent is set to -9999px — why is that? When I got rid of that, the title is visible –though gigantic.

    Clear your cache in Safari — it may be that it is wrongly appearing there because an older stylesheet is cached.

    The indent is -9999px to stop the text from appearing.

    In other words, there is a background logo there that appears in my other browsers (Chrome, Safari). If I don’t have the -9999px set there, then the text appears over that logo.

    This is what it looks like in Chrome/Safari: http://www.criticspeak.com/criticspeakwithlogo.tiff — This is how I WANT it to look (I just want the logo to link). But Firefox does not show that logo (which is set as the background image).

    In order to get the hyperlink working, I would have thought that you’d have to do something like this:

    <a href="http://www.criticspeak.com" title="Critic Speak" rel="home"><h1 id="site-title"><span>Critic Speak</span></h1></a>

    because your negating your text-indent to hide the title text, it’s also taking away the anchor that wraps it.

    On what page would I put this code? (Sorry, I’m very new at this.)

    Oh no, sorry. You’d have to edit the header.php file under Appearance -> Editor.

    Look for this:
    `<h1 id=”site-title”><a href=”http://www.criticspeak.com” title=”Critic Speak” rel=”home”><span>Critic Speak</span></a></h1>’

    And replace it with this:
    <a href="http://www.criticspeak.com" title="Critic Speak" rel="home"><h1 id="site-title"><span>Critic Speak</span></h1></a>

    Hope that helps!

    My bad… it would more than likely look like this:

    <h1 id=”site-title”> title=<?php bloginfo(‘name’); ?> rel=”home”><span><?php bloginfo(‘name’); ?></span></h1>

    I’m sure you’ll find it. 🙂

    The header.php file looks much different than what I’m used to:

    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

    The code was moderated because it was more than 10 lines of code. You’ll have to use pastebin.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Linking a Site-Title Background Image’ is closed to new replies.