ThemeShaper Forums » Thematic

[closed]

A Trick for Styling the HOME button in your menu

(3 posts)
  • Started 8 years ago by helgatheviking
  • Latest reply from tarpontech
  • This topic is not resolved

Tags:

  1. On a whim I tried something... in my wordpress 3.0 menu I have created a Custom Link for Home. In the label instead of just writing 'Home' I wrapped it in a span.

    <span class="home">Home</span>

    and to my surprise that was properly parsed so that now the Home link has a useful span around it!

    .sf-menu li span.home{
    	display: block;
    	text-indent: -9999px;
            background:url("images/skull-n-crossbones.png") no-repeat;
    }

    with a little css you can whisk away the text and use a background image!! the display: block; is important as the text-indent property doesn't work on inline elements (such as span).

    hope this helps!

    Posted 8 years ago #
  2. oakview
    Member

    Cool idea Helga!

    To add to your tip, easily add span tags to all your nav links:

    wp_list_pages("link_before=<span>&link_after=</span>");

    Then you can style each span however you want.

    Posted 8 years ago #
  3. too cool, thx guys!

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.