PDA

Zobacz pełną wersję : Problem z menu szablonu ol_lipe (przerobionego na Joomle 1.5)



Lenio
29-04-2008, 19:20
Przerobilem szablon ol_lipe z Joomlii 1.0.x na 1.5.
Nie udało mi się przerobić menu, które wyświetla się nieprawidłowo.
Powinno wyglądać tak:
http://www.lenio-station.yoyo.pl/menu.jpg

Po zmianie kodu wygląda następująco:
http://www.lenio-station.yoyo.pl/menu1.jpg
Prawdopodobnie zrobiłem błąd w zamianie kodu.
Byłbym wdzięczny gdyby ktoś wskazał i skorygował mój błąd.

Oto kod:


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftvije" rowspan="2" valign="top" ><?php
if ( $this->countModules( 'left' ) ) {
?>
<div style="width:170px">
<jdoc:include type="modules" name="left" style="xhtml" /></div>
<?php
} ?><?php
if ( $this->countModules( 'user8' ) ) {
?>
<div style="width:170px">
<jdoc:include type="modules" name="user8" style="table" /></div>
<?php
} ?><?php
if ( $this->countModules( 'user7' ) ) {
?>
<div style="width:170px">
<jdoc:include type="modules" name="user7" style="table" /></div>
<?php
} ?></td>
<td valign="top">
<table width="97%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="pathway">
<p>Jestes tutaj: <jdoc:include type="modules" name="breadcrumb" style="raw" /></p>
</td>
</tr>
</table>Z góry dzięki.

waderski
30-04-2008, 09:58
Dawno nie widziałem tak paskudnego kodu. :)
Ale tu nie chodzi o index.php a o plik template.css (może mieć inną nazwę wymienioną w index.php).
Tu znajdziesz informacje jak sformatować MENU:
http://www.pomoc.joomla.pl/content/view/620/30/
http://www.pomoc.joomla.pl/content/view/624/30/
Chociaż ja osobiście wolę formatować zgodnie ze składnią css wykorzystując po prostu znaczniki jakie Joomla generuje w html.
Pozdrawiam

waderski
01-05-2008, 11:21
Tu znajdziesz listę selektorów css w Joomli 1.5:
http://joomlatp.com/joomla-css/joomla-1.5-css-files-list.html

Lenio
01-05-2008, 12:42
Dzięki za wszystkie informacje, ale mimo tego nie wiem jak rozwiązać ten problem. Wg. mnie chodzi tu o moduł #active_menu, nie wiem jak go przerobić. Może ktoś z Was będzie wiedział jak to zrobić:


/*for the tag-line*/
.subtitle {
font-family: sans-serif;
font-size: 10px;
font-weight: bold;
color : #666666;
text-transform: uppercase;
letter-spacing: 2px;
margin-left: 20px;
}
#active_menu { color:#000000; font-weight: bold; background-image: url(../images/menu_bg.png); background-repeat: no-repeat; }
a#active_menu:hover { color: #050505; background-position: 0 -50px; }

/* --Default Class Settings-- */

a.mainlevel { margin : 0; padding : 0; font-size : 12px; width : 100%; background-color : #f1f1f1; text-indent : 5px; vertical-align: middle; display: block; }
a.mainlevel: link { padding : 0; font-size : 12px; width : 100%; background-color : #e3e3e3; text-indent : 5px; vertical-align: middle; }
a.mainlevel:link, a.mainlevel:visited { background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-weight: normal; color: #f00; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; overflow: hidden; text-decoration: none; width: 100%; }
a.mainlevel:hover {
background-position: 0 -25px;
text-decoration: none;
color: #fdfdfd;
}
a.mainmenu:link, a.mainmenu:visited {
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 10px;

}
a.mainmenu:hover {
color: #f00;
}
.pollstableborder {
border: 1px solid;
padding: 1px;
}

Lenio
03-05-2008, 20:27
Kurczątko nikt nie jest w stanie mi pomóc? :(

waderski
04-05-2008, 12:30
Mamy długi weekend, no nie?

A teraz poważnie:
Koniecznie przeczytaj tego posta. Jeżeli nauczysz się tej metody to sam łatwo odnajdziesz każdy selektor, naniesiesz poprawkę i dowiesz się od razu czy działa (a inny forumowicz jak to niby ma zrobić?):

http://forum.joomla.pl/showthread.php?t=17912

Selektory można pisać różnie, często nawet inaczej niż na podanych wcześniej listach. Powinny działać np. takie:

#mainlevel {}
#mainlevel ul {}
#mainlevel li {}
#mainlevel li a {}
#mainlevel li a:hover {}
#mainlevel li a:active {}

co do innych modułów to np klasy:

.moduletable {}
.moduletable_menu {}
.menu {}

uszczegółowione odpowiednimi selektorami np:
.moduletable_menu h3 {}

ale to wykaże ci w prosty sposób FIREBUG

a tło wstawiasz np. tak:
background:transparent url(../images/menu_button.png) top left repeat-x;

Naucz się przynajmniej podstaw CSS-a i skorzystaj z powyższego postu. Nie licz w tym na innych. Kończę duży projekt i gubię się już we własnym napisanym od podstaw pliku index.php i template.css chociaż pełno w nim komentarzy. Wyobraź sobie jak trudne jest zrozumienie czyjegoś projektu nie mając na dodatek dostępu do tych plików i samej strony.

Życzę powodzenia

PS:
Możliwe, że lepiej zadziała selektor zgodny z dokumentacją np.
ul#mainlevel li a {}
Ja zwykle korzystam z modułu CustMenu!:
http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,4275/Itemid,35/
Moduł ten ma własny plik mod_customenu.css, który można dowolnie modyfikować.
To skraca pracę przy poziomych menu o ile jest to DRUGIE poziome menu.
Przy jedynym poziomym menu korzystamy z selektorów typu:

#mainlevel-nav {}
ul#mainlevel-nav li a {} itp.

Oczywiście można też dodać przyrostek przy drugim module, jest naprawdę wiele możliwości.

Pozdrawiam

Lenio
08-05-2008, 15:09
Dzięki za pomoc, widzę, że czeka mnie trochę lektury :)

Pozdrawiam

waderski
08-05-2008, 20:56
Niestety tworzenie własnych szablonów nawet dla kogoś kto dobrze zna css-a to droga przez mękę i zgadywanie czy dany selektor zadziała czy nie. Niestety nawet te z dokumentacji Joomli czasem nie działają. Szczególnie dotyczy to poziomych menu, które poprawnie działaja chyba jedynie z modułem Top Menu i selektorami w template.css:
#mainlevel-nav {}
ul#mainlevel-nav {}
ul#mainlevel-nav li {}
ul#mainlevel-nav li a {}
ul#mainlevel-nav li a:hover {}
W innym przypadku lepiej skorzystać z gotowych modułów.

Tu znajdziesz link do ciekawego instruktażu w pdf wraz z plikami:
http://forum.joomla.org/viewtopic.php?f=466&t=219300

Pliki te można wykorzystać jako podstawę swojej własnej templatki.

FIREBUG to podstawowe narzędzie.

Pozdrawiam