Úvodní stránka › Fórum podpory WordPressu › Problémy s WordPressem › Vertikální menu a stylování barev
Štítky: Barvy, CSS, Menu, Zobrazení menu
Zvolené téma obsahuje celkem 12 odpovědí. Do diskuze (4 účastníci) se naposledy zapojil uživatel admin a poslední změna je stará 11 let, 10 měsíců.
-
AutorPříspěvky
-
6. června 2012 (16:22) #1706
Ahoj, řeším teď jeden problém.. Mám vertikální menu a to se řídí podle nějákého stylu.
ul.art-hmenu>li>a
{
position: relative;
display: block;
height: 94px;
cursor: pointer;
text-decoration: none;
color: #4E6983;
padding: 0 12px;
line-height: 94px;
text-align: center;
}
ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('images/menuitem.png');
}a přemýšlím jak pro každé tlačítko udělat jinou barvu.
Představa je taková že bych udělal několik pozadí a ty bych přidal do stylu. Ale nevím jak to rozdělit aby 1odkaz 1pozadí atd… Díky za nápady.
11. června 2012 (9:25) #11659Pokud používáte vlastní menu, tak každá jeho položka má definovanou vlastní třídu a identifikátor
menu-item-ID
, který můžete libovolně nastylovat v souboru style.css, např. tedy definovat pro každou položku vlastnost background-image.Případně můžete ke každé položce menu přidat vlastní třídu s názvem barvy (návod). To je vhodné zejména pokud budete mít více položek se stejnou barvou…
17. června 2012 (20:10) #11660Tak jsem zkoušel
.item-20: { color:pink; }
pak přidat podle návodu u každé položky css třídu a v css taky přidal
.red { color:red }
a bez úzpěchu.tak nevím co dělám špatně..
17. června 2012 (20:21) #1166118. června 2012 (18:35) #11662Tak ani tohle nepomohlo.. :-(
Přidal jsem do ccs .menu-item-20: { color:pink; }
Zavolal jsem to pink i menu-item-20 ale barva je pořád stejná. Default barvu jsem vyhodil.
Tak nevím, a id je opravdu 20…
19. června 2012 (11:53) #11663To byl jen obecný příklad, který musíte přizpůsobit na svou šablonu :-)
Pro Twenty Eleven mi to funguje např. takto:
#access ul li.menu-item-20 a { color:pink; }
Pokud se stále nezadaří, tak budu potřebovat přístupové údaje (nebo alespoň URL adresu), abych to mohl vyzkoušet konkrétně…
19. června 2012 (22:12) #11664na artisteer a ten balast co produkuje je lék
!important;
Takže bych zkusilul li.menu-item-20 { color:pink!important; }
…a nejlépe někde úplně na konec CSS souboru pro jistotu :)
26. června 2012 (7:26) #11665Prosím pomůže mi někdo? Vidím, že se to tu již řešilo, ale není tu výsledek Potřebuji na stránce
http://www.hanak.bluefile.cz/ udělat různobarevné menu pomocí css. Vyzkoušel jsem už snad všechny možnosti včetně
ul li.menu-item-45 { color:#00a74b!important; }
Uměl by mi prosím někdo poradit?26. června 2012 (12:45) #11666Zapomněli jste možná na odkaz (html a) a !important a ul tam asi ani být nemusí, tedy:
li.menu-item-45 a { color:#00a74b; }
A pokud jde o pozadí, tak by to mělo jít také vcelku jednoduše:
li.menu-item-45 a { background-color: red; }
P.S. Duplicitní dotaz nalezen zde.
26. června 2012 (14:13) #1166726. června 2012 (16:08) #11668Tak to tu je i s názorným příkladem :-)
Podle toho zmiňovaného ID 45 (“Kuchyně”) ale soudím, že šlo patrně o levé postranní menu a podle obrázku je to už asi funkční – místo barvy jsou tam ale načítány obrázky v podobě barevného pozadí, což je asi zbytečné…
26. června 2012 (18:33) #11669Moc děkuji, podařilo se mi to vyřešit stylem pokus – omyl. Výsledek je zde.
li.menu-item-45 a {
color: #030303 !important;
background-image: url(images/vmenuitem_a.png)!important;
background-repeat: repeat-x;
}28. června 2012 (10:51) #11670Díky za reakci, ale proč tam používáte ten obrázek? Nestačilo by pouze výše uvedená vlastnost background-color? Nemusíte pak načítat obrázek a zrychlíte tím načítání celého webu. A podle toho, co jsem viděl na webu by celý uvedený zápis stačilo zkrátit na:
li.menu-item-45 a {
background-image: url(images/vmenuitem_a.png);
} -
AutorPříspěvky
Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.