baner

zmiany w szablonie joomla 3

Czasami potrzebujemy wykonać drobne poprawki w szablonie już zainstalowanym w Joomla, pisze tutaj o drobnych poprawkach. Niestety tych poprawek nie możemy wykonać z poziomu panelu administracyjnego szablonu, wtedy trzeba edytować kod szablonu i nie ma w tym nic strasznego bo zasadniczo jest to proste – zależy co chcemy zrobić. Jednak trzeba najpierw wiedzieć gdzie szukać wpisu który odpowiada za dany element szablonu a potem już z górki, chociaż nie do końca bo często szablon używa less.

 

Edytor szablonów w Joomla

Joomla już od dawna posiada prosty edytor szablonów, a dokładnie mówiąc edytor kodu szablonu, z poziomu tego edytora mamy dostęp do wszystkich plików danego szablonu, mowa tutaj o plikach PHP, CSS, LESS plików graficznych, możemy w tym edytorze kasować, zmieniać i tworzyć nowe  pliki PHP, CSS lub tez wgrywać pliki graficzne, kasować je czy też przenosić. Możliwości jakie daje edytor szablonów w Joomla jak widać są bardzo duże. To pozwala nam na nawet diametralne przebudowanie szablonu, jednak tego nie warto robić w tym edytorze bo ma kilka wad, dla nie największą jest brak możliwości cofnięcia operacji. Kolejna jest brak łatwej możliwości zrobienia widoku pełno ekranowego okna edycji.  W jaki sposób otwieramy edytor szablonów w Joomla? Klikamy kolejno, rozszerzenia, dalej szablony i jeszcze raz szablony. Otworzy nam się lista z szablonami.  Klikamy na nazwę danego szablonu. Widzimy teraz okno, po lewej stronie widzimy foldery i pliki danego szablonu 2, zaś w centralnej części jest okno edytora 3. Na górze jest przybornik z narzędziami 1, pojawiają się różne zależnie od tego co robimy.

edytor szablonów joomla 3

Co zmieniamy w szablonie joomla

Zasadniczo w tym edytorze możemy wszystko, ale tutaj napisze tylko o drobnych poprawkach stylu. Szablony korzystają z arkuszy styli css, ale nie do końca, bo często twórcy szablonów korzystają z języka LESS, który generuje określony css, wtedy to co zapiszemy w css zostanie nadpisane i stracimy zapisane zmiany, stad najpierw musimy określić czy nasz szablon ma less, sprawdzimy to łatwo w drzewie szablonu po lewej stronie edytora powinien być taki folder LESS jeśli jest no to mamy dwie drogi albo edycja LESS albo stworzenie pliku custom css, który nadpisuje ustawienia less. Niestety nie ma łatwo, bo ten plik custom.css nie zawsze musi się tak nazywać, czasami nazywa się inaczej. Trzeba to sprawdzić w dokumentacji. Przyjmujemy założenie, że mamy już plik custom css lub nasz szablon ma tylko css.

Joomla, Firebug, Firefox

Osobiście taka konfiguracja jak w tym podtytule dla mnie jest idealna. Jeśli nie macie zainstalowanego rozszerzenia do Firefoxa o nazwie Firebug to koniecznie trzeba doinstalować to wtyczkę. Po zainstalowaniu mamy komplet narzędzi który pozwoli nam zrobić drobne poprawki w stylu szablonu. Klikamy na obiekt, który chcemy poprawić prawym przyciskiem i wybieramy opcje zbadaj za pomocą firebug. I teraz otwiera się okno jak poniżej.
To co jest po prawej stronie interesuje nas najbardziej, to jest opis interesującego nas elementu, który chcemy zmienić lub poprawić.

firebug i joomla 3

Wykonanie poprawki w szablonie Joomla

Jak widać na rysunku powyżej wybrałem czarne tło, tytyłu modułu 1, w dolnej części przeglądarki otworzył sie firebug i pokazałnam w jakim pliku i której linii jest styl odpowiedzialny za ten element szablonu. Firebug pokazał nam, że styli dla tego obiektu mamy szukać w pliku templates.css, w wierszu 660. To informacja mów nam wszystko co trzeba. Przechodzimy teraz do menadżera szablonów w Joomla, klikamy kolejno rozszerzenia, szablony i szablony. Otwieramy interesujący nasz szablon. Jeśli chwilę przytrzymamy kursor myszy nad nazwą pliku w którym jest zapisany styl to pojawi się nam ścieżka dostępu do tego pliku. W tym przypadku jest to folder css, tam znajdziemy plik o nazwie template.css, klikamy na niego i w centralnej części pojawi się nam on do edycji. Przewijamy do linii 660 i tam mamy wpis, który możemy poprawić, jest on trochę szerszy niż firebug ale to nic, poprawiamy kolor wpisując w w background odpowiednią wartość, skąd tą wartość wziąć – tutaj kłania się znajomość css.
W przypadku gdy mamy plik custom css, to postępujemy inaczej, tam jeszcze nie ma żadnego wpisu, najlepiej więć skopiować ten wpis z firebug’a w moim przypadku będzie to:
.module_round_box-inset .s5_mod_h3_outer {
    background: #373737 none repeat scroll 0 0;
    color: #ffffff;
    margin: -28px -28px 28px;
    padding: 14px 24px 12px;
}
I ten plik wpis wklejamy do pliku custom.css, a ścile mówiąć tylko wartość która chcemy zmienić. Czyli w moim przypadku:
.module_round_box-inset .s5_mod_h3_outer {
    background: #373737 none repeat scroll 0 0;
}
No bo skoro nic więcej nie zmieniamy to po co to kopiować i teraz backgraund opisujemy własnym kolorem.
Podobnie postępujemy ze innymi elementami strony.
Na koniec mała uwaga. Nie zawsze jest to takie proste, czasami kliknięcie na dany element na stronie nie daje efektu i jest pokazywany styl zupełnie innego elementu. Wtedy na żywo w oknie firebuga w jego lewej części przechodzimy bo drzewie dokumentu, aż natrafimy na interesujący nas element.
Jest też inna sytuacja, nie ma pokazanego pliku w którym jest dany zapis, ale o tym kiedy indziej.

 

 


Ebook Joomla 3

ebook 2 okladka

Tutaj jest drugie wydanie ebooka o Joomla 3, dopisane jest kilka rozdziałów, jest ponad 270 stron