ugrás a tartalomhoz

Ikonok beillesztése menünevek helyett

takashi · 2010. Okt. 14. (Cs), 19.21
Sziasztok,

a menüsávban szereplő szövegeket szeretném lecserélni képekre (kézírás hatású ikonokra).
Találtam egy leírást, ami a WP3 menü szerkesztőjével működik a menünevek ID azonosítója alapján, de a sablonom sajnos nem támogatja a natív menüket.
Tudtok erre megoldást?
‹ Galéria képkiválasztással szöveg pozicionálása html textfield-ben ›
 ■
1

CSS

Poetro · 2010. Okt. 14. (Cs), 19.42
Nem tudom mi az a WP3 menüszerkesztő, de CSS-sel természetesen megoldható. Olvasd el a Revised Image Replacement képcserélési technikákat.
2

css

takashi · 2010. Okt. 14. (Cs), 22.45
Köszi, ezek jó leckék css-hez. A menüpontokat egy ID-vel látja el a wordpress, és ezek alapján tudnám lecserélni a szöveget képekre, csak nem tudom hogyan kell ezt .css-ben megoldani.
3

css

ironwill · 2010. Okt. 15. (P), 10.01
  1. #menu1 {  
  2.   background: url(images/menu1.png) center no-repeat;  
  3.   text-indent: -9999px;  
  4.   outline: none;  
  5. }  
  6.   
  7. #menu2 {  
  8.   background: url(images/menu2.png) center no-repeat;  
  9.   text-indent: -9999px;  
  10.   outline: none;  
  11. }  
.. és így tovább.

Így nem is kell lecserélned a szöveget képre. Ez SEO szempontból is jobb megoldás.
Nem ismerem a WP menu struktúráját, ha megmutatod a menü rész html forrását, akkor többet tudok segíteni.
4

php

takashi · 2010. Okt. 15. (P), 11.44
A header.php-ből másoltam ki a kódot, ennél a sablonnál ez végzi
  1. <div id="navbg">  
  2.   <ul id="nav" >  
  3.     <li class="hometab <?php if ( is_home() ) { ?>current_page_item <?php } ?>"><a href="<?php echo get_option('home'); ?>/"><?php echo get_option('bizzthemes_home_name'); ?></a></li>  
  4.     <?php wp_list_categories ('title_li=&depth=0&include=' . get_option('bizzthemes_categories_id') . '&sort_column=menu_order'); ?>  
  5.     <?php wp_list_pages('title_li=&depth=0&exclude=' . get_inc_pages("pag_exclude_") .'&sort_column=menu_order'); ?>  
  6.      <?php  if ( get_option('bizzthemes_blogcategory') <> "" ) { ?>  
  7.      <li <?php if (!$bizzthemes_categories_id_flag) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home');?>/?cat=<?php echo $catid; ?>" title="<?php echo $blogcatname; ?>"><?php echo $blogcatname; ?></a></li>  
  8.     <?php } ?>  
  9.   </ul>  
  10.   <!--/page-menu-->  
  11. </div>  
5

én így csinálnám..

ironwill · 2010. Okt. 15. (P), 12.45
  1. div#navbg ul#nav > li a {  
  2.   text-indent: -9999px;  
  3.   outline: none;  
  4.   display: block;  
  5.   width: 100%;  
  6.   height: 100%;  
  7.   line-height: 16px;  
  8. }  
  9.   
  10. div#navbg ul#nav > li a.menu1 {  
  11.   background: url(images/menu1.png) center no-repeat;  
  12. }  
+Ki kellene egészíteni a php kódot:
  1. <a class="menu<?php echo $valtozo ?>" href="<?php echo get_option('home'); ?>/"><?php echo get_option('bizzthemes_home_name'); ?></a>  
  2.   
  3. //a $valtozó növekszik a menüpontok számának megfelelően  
6

csak háttér

takashi · 2010. Nov. 11. (Cs), 20.06
köszönöm a segítséget. Igazából ehhez hasonló menüt szeretnék csinálni, minden egyes menüponthoz más színt társítani, de nem tudom hogyan lehetne a színeket társítani a menünevek azonosítójához .css-ben.
7

CSS

Poetro · 2010. Nov. 11. (Cs), 20.10
  1. #home {   
  2.   background-color: #991427;  
  3. }  
  4. #services {   
  5.   background-color: #bfbfbd;  
  6. }  
Hozzá tartozó HTML:
  1. <ul>  
  2.   <li id="home">Home</li>  
  3.   <li id="service">Services</li>  
  4. </ul>