Joomla User
19-11-2005, 03:07
Jeśli korzystacie z templatki MadeYourWeb to na pewno spostrzegliście, że tworzenie podpozycji w menu poniżej 1-go stopnia zagłębienia obarczone jest poważnym błędem - pozycja ta wystaje ponad ramkę modułu (załączony obrazek) i nie tylko psuje estetykę, ale przesuwa całą środkową zawartość w prawo i powoduje przez to uciekanie prawej kolumny w dół.
Wada ta spowodowana jest tym, że autorzy zdefiniowali klasy dla stopnia głównego i 1-go stopnia zagłębienia menu (mainlevel i sublevel), a nie zrobili tego dla wyższych stopni zagnieżdżenia. Aby to poprawić to najpierw należy wziąć na warsztat modules/mod_mainmenu.php i odszukać wiersze 68-70:
if ($level > 0) {
$menuclass = 'sublevel'. $params->get( 'class_sfx');
}
które odpowiadają za przypisanie klasy "sublevel" podpunktom 1-go stopnia. Zaraz za tym należy dodać
if ($level > 1) {
$menuclass = 'subsublevel'. $params->get( 'class_sfx');
}
który to fragment kodu przypisze klasę "subsublevel" pozycjom menu 2-go stopnia. Hardkorowcy mogą jeszcze raz powtórzyć tą operację i zdefiniować sobie "subsubsublevel" dla ($level > 2) itd.
Teraz wystarczy tylko dopisać te nowe klasy w plikach styli. Bierzemy więc najpierw plik template_css.css i odszukujemy definicję klasy "sublevel":
a.sublevel {
padding: 0px;
margin: 0px;
font-size: 10px;
padding-left: 12px;
width: 139px;
display: block;
line-height: 20px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 123px;
}
html>body a.sublevel {width:123px;} /* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 139px;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 123px;
}
html>body a.sublevel:hover, a.sublevel#active_menu { /* Opera5-Fix-fix ;-) */
width: 123px;
}
Kopiujemy to i wklejamy kawałek dalej, a następnie zmieniamy wszędzie sublevel na subsublevel oraz zmniejszamy o 8 pikseli wszystkie wartości 139px (na 131px) oraz 123px (na 115 px). To samo robimy z plikiem css_color_green.css, gdzie znajdujemy
a.sublevel {
color: #005E31;
background: url(../images_green/submenu_back.gif) left center no-repeat;
}
a.sublevel:hover, a.sublevel#active_menu {
background: #F1F1F1 url(../images_green/submenu_back.gif) left center no-repeat;
border-right: 4px solid #669E83;
}
a następnie powielamy ten fragment kawałek dalej i zamieniamy wszędzie sublevel na subsublevel.
Uff, gotowe! Trochę roboty z tym jest, ale moim zdaniem warto. Poprawka działa bez zastrzeżeń w Internet Explorerze, Firefoxie i Operze.
Wada ta spowodowana jest tym, że autorzy zdefiniowali klasy dla stopnia głównego i 1-go stopnia zagłębienia menu (mainlevel i sublevel), a nie zrobili tego dla wyższych stopni zagnieżdżenia. Aby to poprawić to najpierw należy wziąć na warsztat modules/mod_mainmenu.php i odszukać wiersze 68-70:
if ($level > 0) {
$menuclass = 'sublevel'. $params->get( 'class_sfx');
}
które odpowiadają za przypisanie klasy "sublevel" podpunktom 1-go stopnia. Zaraz za tym należy dodać
if ($level > 1) {
$menuclass = 'subsublevel'. $params->get( 'class_sfx');
}
który to fragment kodu przypisze klasę "subsublevel" pozycjom menu 2-go stopnia. Hardkorowcy mogą jeszcze raz powtórzyć tą operację i zdefiniować sobie "subsubsublevel" dla ($level > 2) itd.
Teraz wystarczy tylko dopisać te nowe klasy w plikach styli. Bierzemy więc najpierw plik template_css.css i odszukujemy definicję klasy "sublevel":
a.sublevel {
padding: 0px;
margin: 0px;
font-size: 10px;
padding-left: 12px;
width: 139px;
display: block;
line-height: 20px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 123px;
}
html>body a.sublevel {width:123px;} /* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 139px;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 123px;
}
html>body a.sublevel:hover, a.sublevel#active_menu { /* Opera5-Fix-fix ;-) */
width: 123px;
}
Kopiujemy to i wklejamy kawałek dalej, a następnie zmieniamy wszędzie sublevel na subsublevel oraz zmniejszamy o 8 pikseli wszystkie wartości 139px (na 131px) oraz 123px (na 115 px). To samo robimy z plikiem css_color_green.css, gdzie znajdujemy
a.sublevel {
color: #005E31;
background: url(../images_green/submenu_back.gif) left center no-repeat;
}
a.sublevel:hover, a.sublevel#active_menu {
background: #F1F1F1 url(../images_green/submenu_back.gif) left center no-repeat;
border-right: 4px solid #669E83;
}
a następnie powielamy ten fragment kawałek dalej i zamieniamy wszędzie sublevel na subsublevel.
Uff, gotowe! Trochę roboty z tym jest, ale moim zdaniem warto. Poprawka działa bez zastrzeżeń w Internet Explorerze, Firefoxie i Operze.