PDA

Zobacz pełną wersję : Menu - zmiana koloru linku



st1ik
21-08-2012, 15:06
Witam.
Tworze sobie właśnie szablon do joomli 1.5 i napotkałem problem którego nie potrfię obejść. Mianowicie nie ptrafię zmienić koloru tekstu(linku) w menu. Kolor cały czas jest domyślny - ten przypisany w CSS jako:

a
i

a:hover

CSS do menu wygląda tak:


.moduletable_menu li {
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: -10px;
margin-left:-40px;
list-style-type:none;
text-align:left;
color:#03538A;
font-size:12px;
background-image: url(../bg-menuu.jpg);
background-repeat: repeat;
height: 18px;
padding-right: 0.6em;
padding-bottom: 0.5em;
padding-left: 0.6em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ccc;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
padding-top: 0.5px;
margin-bottom: 12px;
display: block;
}

.moduletable_menu li li {

background:#fff;

border:none;

}

.moduletable_menu li:hover{

background:#fff;

}


.moduletable li {
list-style-type:none;
}

W parematrach modułu tego menu w pozycji "Przyrostek klas CSS modułu" dodana klasa "_menu". Wszystko niby działa po za tym, że nie mogę zmienić koloru czcionki.

W szablonie mam taki wpis:


<?php if ($this->countModules('left')): ?>
<div class="mods_left">

<jdoc:include type="modules" name="left" style="xhtml" />

</div>



<?php endif; ?>




Proszę o jakąś podpowiedź jak można to zrobić.

deviapps
21-08-2012, 18:25
a próbowałeś

.moduletable_menu li a {
color:#03538A;
}
lub
.moduletable_menu li a span {
color:#03538A;
}

ewentualnie (nie wiem jaki tam class się generuje, czy na pewno moduletable_menu)
.mods_left li a, .mods_left li a span {
color:#03538A;
}

st1ik
21-08-2012, 19:18
Tak, kolory zaskoczyły. Zmodyfikowałem style w ten sposób:


.moduletable_menu li a {
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: -10px;
margin-left:-40px;
list-style-type:none;
text-align:left;
color:#03538A;
font-size:12px;
background-image: url(../bg-menuu.jpg);
background-repeat: repeat;
height: 18px;
padding-right: 0.6em;
padding-bottom: 0.5em;
padding-left: 0.6em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ccc;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
padding-top: 0.5px;
margin-bottom: 12px;
display: block;
}



.moduletable_menu li a:hover{

background:#fff;
display: block;
list-style-type:none;

}


Nazwy klas są raczej poprawne. Początek kodu wyciągnięty z firefoxa przy przegądaniu strony:



<div class="mods_left">

<div class="moduletable_menu">
<ul class="menu"><li id="current" class="active item1"><a href="
/szablon/index.php?option=com_content&amp;view=article&amp;id=63&amp;It emid=46"><span>Start</span></a></li>


Powstał natomiast inny problem. Wyświetla mi się teraz przy każdym linku menu kropka listy, pomimo, że przecież w css jest linijka: list-style-type:none;
5754
Jak się tego pozbyć w takim razie ?

deviapps
21-08-2012, 19:25
Zrób sobie intensywny kurs CSS przez kilka dni, a problemy zaczną się same rozwiązywać :)
Co do tego:
przypisz do elementów listy wszystkie style, które wypisałeś powyżej, a odnośnikom nadaj tylko kolor.