ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   de
   Member

   I would like to insert images into the page navigation menu instead of the text. I don't want to anything other than hide the text and show the graphic. How can I do this and still maintain the SEO characteristics?

   Posted 3 years ago #
2. 

   Ian Stewart
   Key Master

   With CSS Image Replacement.

   Posted 3 years ago #
3. 

   de
   Member

   thank you, I see that this topic has been looked at a number of times. I think I've got it.

   my next question, in what area would I tell the page link which background image to use?

   thank you

   Posted 3 years ago #
4. 

   Ian Stewart
   Key Master

   I'm not sure I understand the question.

   Posted 3 years ago #
5. 

   de
   Member

   where would I find the individual page links so that I could call out which background image to use? is that any more clear

   Posted 3 years ago #
6. 

   Ian Stewart
   Key Master

   Here's a sample menu in xhtml

   <div id="access">
   	<div class="skip-link"><a href="#content" title="Skip navigation to the content">Skip to content</a></div>
       <div id="menu">
           <ul>
               <li class="page_item"><a href="/about/" title="About">About</a>
                   <ul>
                       <li class="page_item"><a href="/about/archives/" title="Archives">Archives</a></li>
                       <li class="page_item"><a href="/about/links/" title="Links">Links</a></li>
                   </ul></li>
               <li class="page_item"><a href="/element-examples/" title="Element Examples">Element Examples</a></li>
               <li class="page_item"><a href="/example-images/" title="Example Images">Example Images</a></li>
           </ul>
       </div>
   </div><!-- #access -->

   Here's the hierarchy in CSS

   #access #menu ul li a

   Typically background images are applied to the a tags in menus for hover effects. Like on ThemeShaper:

   #menu ul {
       margin:0;
       position:absolute;
       bottom:0px;
   }
   #menu ul ul {
       display:none;
   }
   #menu li {
       display:inline;
   }
   #menu a {
       display:block;
       float:left;
       text-decoration:none;
       color:#fff;
       font-style:italic;
       letter-spacing:.05em;
       font-size:10px;
       line-height:28px;
       background:url(images/menu.png) repeat-x 0px 0px;
       padding:0 18px;
       border-right:1px solid #090F13;
   }
   #menu a:hover {
       background-position:0px -28px;
   }
   #menu .current_page_item a {
       background-position:0px -56px;
   }
   #menu a:focus {
       background-position:0px -84px;
   }

   Does that help?

   N.B. The ThemeShaper menu is currently wonky in IE. The CSS above isn't the reason it's wonky. Also note, I'm currently not too concerned that it's wonky in IE. ;)

   Posted 3 years ago #
7. 

   kidslovemusic
   Member

   amazing! thank you :) Ian, with thematic finally I can say, I'm able to make my own wordpress themes! amazing stuff, thanks!

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.