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
#menu1 {
  background: url(images/menu1.png) center no-repeat;
  text-indent: -9999px;
  outline: none;
}

#menu2 {
  background: url(images/menu2.png) center no-repeat;
  text-indent: -9999px;
  outline: none;
}
.. é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
<div id="navbg">
  <ul id="nav" >
    <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>
    <?php wp_list_categories ('title_li=&depth=0&include=' . get_option('bizzthemes_categories_id') . '&sort_column=menu_order'); ?>
    <?php wp_list_pages('title_li=&depth=0&exclude=' . get_inc_pages("pag_exclude_") .'&sort_column=menu_order'); ?>
     <?php  if ( get_option('bizzthemes_blogcategory') <> "" ) { ?>
     <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>
    <?php } ?>
  </ul>
  <!--/page-menu-->
</div>
5

én így csinálnám..

ironwill · 2010. Okt. 15. (P), 12.45

div#navbg ul#nav > li a {
  text-indent: -9999px;
  outline: none;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 16px;
}

div#navbg ul#nav > li a.menu1 {
  background: url(images/menu1.png) center no-repeat;
}
+Ki kellene egészíteni a php kódot:
<a class="menu<?php echo $valtozo ?>" href="<?php echo get_option('home'); ?>/"><?php echo get_option('bizzthemes_home_name'); ?></a>

//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
#home { 
  background-color: #991427;
}
#services { 
  background-color: #bfbfbd;
}
Hozzá tartozó HTML:
<ul>
  <li id="home">Home</li>
  <li id="service">Services</li>
</ul>