Tworzenie templatek do Joomla

Zgodnie z obietnicą opiszę sposób na przerobienie dowolnego szablonu strony tak, aby ten działał pod kontrolą Joomla. Nie będzie to więc kurs html, ale łopatologiczny kurs oswajania gotowych, pociętych szablonów. Chciałem pokazać to na jakimś przykładzie, ale nie mam pod ręką wolnej instalacji Joomla, ba! nie mam żadnej – ale obejdzie się, ponieważ oswojenie zwykłej skórki html+css do Joomla jest bardzo proste. Odrobina teorii i troszkę więcej znajomości html i css powinno wystarczyć :) Zaczynamy!

Z pliku index.php naszej nowo tworzonej templatki wywalamy całą sekcję head i w jej miejsce wstawiamy:

Na screenie mojej strony zaznaczyłem pozycje: top, left, right oraz mainbody, gdzie:




tworzenie templatek joomla

A teraz jaśniej :)
W divie (na zrzucie podpisanym mainbody) zainkludowałem plik mainbody.php, który odpowiada za wyświetlanie komponentów (artykuły, kontakt, katalog linków itd.), natomiast w divach top, left i right znalazły się pozycje modułów ( php mosLoadModules ( ‘pozycja_modulu’ ); ), które w PA przypisujemy poszczególnym modułom. W ten prosty sposób rozmieściłem najważniejsze elementy witryny.

Każdy z wypełnionych przeze mnie divów ma zdefiniowany swój wygląd (tło, czcionki, odstępy itp.) w pliku template_css.css i w tym przypadku nazewnictwo klas nie gra roli, bo to w końcu nasza templatka. Możemy sobie nazwać div lewej kolumny “lewy_div”, prawy “prawy_div”, top może się nazywać “gorne_menu”, a część zarezerwowana dla komponentów “tabela_glowna”.

Ale już nie możemy sobie pozwolić na dowolność w nazywaniu tytułu modułu, ponieważ tutaj musimy przestrzegać standardu Joomla. Większość (powiedzmy to tak: dodatki przestrzegające standardu Joomla) korzystają z jednego, głównego arkuszu styli – pliku template_css.css (choć bardziej rozbudowane komponenty siłą rzeczy posiadają własne css-y). Z tego też powodu z góry określono nazewnictwo konkretnych klas: modułów, dat publikacji i edycji, tytułów artykułów i komponentów, linków nawigacji, formularzy itp.

Jeśli więc w szablonie, który przerabiamy, tytuł wpisu w pliku css nazwany jest “tytul_wpisu”, musimy go zmienić na contentheading, data wpisu musi nazywać się “createdate” itd.

Teraz może wymienię najważniejsze klasy (resztę, czyli te rzadziej używane, można w razie potrzeby znaleźć zaglądając do źródła i dopisać):

contentheading – tytuł artykułu/materiału statycznego
componentheading – nazwa komponentu
pagenav – przyciski nawigacji
small – mała czcionka, używana często w podpisach autorów komponentu na dole
button – wygląd przycisku m.in. pod formularzem kontaktowym, w księdze gości, logowaniem
inputbox – wygląd formularza
readon – link „czytaj całość”
createdate – data utworzenia
modifydate – data modyfikacji
sectiontableentry1 i sectiontableentry2 – te dwa pola występują z reguły razem, np. w księdze gości na przemian co drugi wpis.

Jeśli dla odpowiednio uzyjecie w/w nazw, wasza nowa templatka nie powinna Was przestraszyć :) Tych wspólnych klas jest dużo więcej, ale w/w to podstawa ładu i składu.

Strukturę katalogów/plików templatki Joomla znamy :) Ale tak dla przypomnienia:
katalog nazwa_templatki powinien zawierać:

– folder o nazwie css a w nim plik template_css.css
– folder images z obrazkami
– plik index.php
– plik template_thumbnail.png – opcjonalnie, jesli chcemy w panelu widzieć miniaturkę templatki
– plik templateDetails.xml – plik ten pełni dwie role: dostarcza informacji o templatce w panelu (pierwsza czesc pliku) oraz udziela instrukcji instalatorowi odnośnie zawartości katalogu templatki (druga część pliku). Jeśli chcemy instalować templatkę przez panel administracyjny, nie możemy sobie pozwolić na żadne błędy w tym pliku. Poniżej wzór prawidłowo napisanego pliku templateDetails.xml:

dla przykładu:

tworzenie templatek Joomla

Lista plików nie jest wymagana, jeśli rozpakowany katalog templatki wrzucamy na serwer przez ftp.

Folder z plikami templatki pakujemy w .zip i jest on gotowy do instalacji przez panel administracyjny. W tym wpisie to wszystko. Starałem się pisać zwięźle, w razie wątpliwości pytajcie w komentarzach.

Przy okazji wszystkim zainteresowanym gorąco polecam książkę “Joomla! Budowa i modyfikacja szablonów” autorstwa Pawła Frankowskiego. Paweł, to prywatnie mój kolega, z którym wspólnie napisaliśmy dzieło “Joomla! Podręcznik administratora systemu” (wyd. Helion).

Subskrybcja
Powiadom o
guest

41 komentarzy
Wbudowane komentarze zwrotne
Pokaż wszystkie komentarze
Adam

Dzięki Szuman za ten wpis. Bardzo praktycznie to opisałeś, ta wiedza bardzo mi się przyda.
Jak będziesz pisał o “głębszej ingerencji” w wygląd joomla miałbym prośbę, abyś wspomniał o następujących zagadnieniach:
– dodawanie kolumny, do templatki 2 kolumnowej
– dodawanie module hilite
– tworzenie menu 3 poziomowego poziomego (top)
– tworzenie jakiś fajnych butoników i wstawianie ich
– tworzenie wypełnień graficznych pól np. search

Wielkie dzięki za tak zajmujący wpis i serdeczne pozdro.

szuman

dzięki, bo prawdzę mówiąc pisałem to “na kolanie” (tamte notatki gdzies zapodziałem :( ). Odnosnie Twoich próśb: 1) rozumiem, że chodzi Ci o rozbudowanie templatki o dodatkową kolumnę, której w tej chwili w ogóle nie ma? Jeśli tak, to html+css się kłania + to, co oppisałem w tym wpisie ;) 2) albo nie kojarze, albo pierwszy raz słyszę o tym (można jaśniej?:P) 3) takie coś, jak na portalach, gdzie po najechaniu np. na “Aktualności” pojawiają się aktualności? Nie wiem, czy do tego nie ma dotowego modułu wykorzystującego pozycje “submenu” 4) to raczej pod grafikę podbiega :) Zależy gdzie te buttoniki,… Czytaj więcej »

Adam

ad2) Zakładając, że w templatce mam kilka pozycji na moduły. Wyglądają one standardowo. Jeden z nich jest np. w kolumnie right jako np.
advert1. I teraz chodzi mi o ustalenie dodatkowych klas tylko dla tego modułu, żeby był wyróżniony graficznie.

ad3) chodzi mi o takie menu jak macie na wudeka.net.Najeżdżam np. na skład->Szuman->i tutaj jeszcze jakieś rozwinięcie po Szuman np. bboing, rap. Chciałbym mieć tylko to menu
pod nagłówkiem, ale potrzebuję trzech poziomów np. Czytelnia>Polecamy>Film :)

Pozdro

Adam

Szuman mam jeszcze takie pytania:

1) Jakie Twoim zdaniem są wady joomla?
2) Jak na wudeka ustawiłeś menu, żeby było tylko to pod nagłówkiem (poziome)?

Pozdrawiam

Zajawkarz

Cześć Szuman, fajnie, że znowu wróciłeś i to jak ładnie, bo blog prezentuje się extra, takie to wszystko schludne (mniam).

Szuman wciąż mam prośbę, o napisanie dokładnie jak np. w coreldraw x3 zrobić własny szablon pod joomla i żeby templatka dostosowywała się do rozdzielczości ustawionej na komputerze.

Pozdrawiam

szuman

wady? Domyslna zamiana linków na te SEO-friendly jest dośc słaba, z kolei komponenty SEF nie sprawdzaja sie w rozbudowanych witrynach i sa zbyt skomplikowane w konfiguracji. Powinno byc prosto i przyjemnie w PA – taki wybor linkow: – standardowe linki – linki w postaci /ID_sekcji/ID_kat/ID_artykulu/ – /komponent_lub_sekcja/ID_tresci-Pelny-tytul_artykulu.html SEF to moim zdaniem jedyna bolaczka Joomla, choc z drugiej strony duzym plusem jest to, ze Joomla nie potrzebuje mod_rewrite, by zamieniac linki na przyjazne wyszukiwarkom :) Nic wiecej do glowy mi nie przychodzi ;) To menu na wudeka.net to modul rozwijanego menu JA Transmenu 2.0 :) U mnie to wyglada tak: –… Czytaj więcej »

szuman

dzieki za pochwaly :)

a na twoje pytanie nie jestem w stanie odpowiedziec, bo nie uzywam tego programum, poza tym to temat grafiki www, ktory w ostatnim etapie podchodzi pod templatki Joomla :)

Poczytaj tutoriale/fora dyskusyjne omawiajace tworzenie szablonow stron w tym programie. Gdy juz bedziesz mial gotowy, zwykly szablon, wtedy pomoze ci mój wpis na temat dostosowywania zwykłych szablonów do Joomla ;)

Pozdrawiam

szuman

ad2) kazdy modul posiada klasę (zapomnialem o niej w tutku) o nazwie “moduletable”. W pliku template_css.css skopiuj ta klase i dopisz do niej np. “-zielony” (moduletable-zielony) i to samo zrob w ustawieniach tego modulu w PA: w polu “Przyrostek klasy CSS modułu” rowniez wpisz “-zielony” – wtedy ten modul bedzie korzystal z oddzielnej klasy o nazwie “moduletable-zielony” :)

ad3) użyj modułu JA_Transmenu (Joomla.pl – Pobierz – Moduły – druga podstrona :) )

Adam

Szuman wielkie dzięki za pomoc. Jeśli uda mi się założyć serwis to będą Ci się należały specjalne podziękowania:) Sorry, że tak Ci zawracam głowę, ale jestem zajarany tym wszystkim. Na razie pracuję lokalnie, stąd moje pytanie. Czy da się zrobić kopię bazy lokalnej tak, aby przenieść ustawienia (konfigurację) modułów,
komponentów, przykładowe (moje pierwsze wpisy) na konto na serwerze? Krótko mówiąc czy da się jakoś przenieść wszystko, tak by tam znowu nie zaczynać od zera?

szuman

nie ma za co i nie zawracasz glowy ;)

Jesli chodzi o przeniesienie swojego lokalnego serwisu na zewnetrzny serwer, to nic trudnego: trzy rzeczy do zrobienia przed toba:

1) swoja baze danych (najlepiej przez phpMyAdmina) zgraj sobie uzywajac opcji “Export”. W panelu serwera utworz nowa, pusta baze i pozniej w phpMyAdminie uzyj opcji “Import” i wgraj lokalną bazę: pusta baza ładnie się wypełni :)

2) przenies wszystkie pliki

3) wyedytuj plik configuration.php i w nim popraw zmienne dotyczace ścieżek, domeny i danych do bazy. Bedzie działać (i nie zapomnij o CHMOD-ach)

Adam

Cześc Szuman:)

Standardowo, pytania na dziś (he,he)

1) Zmartwiłeś mnie trochę tym, że joomla nie nadaje się na duży
portal, bo taki właśnie zamierzałem stworzyc:(
2) Szuman jak w przybliżeniu określasz limit transferu jakiego
potrzebujesz na stronę?
3) Wybrałeś już jakiś dodatek na serwis społ.?
4) Znasz jakiś plugin do edytorów kodu, który widziałby w bibliotece klasy charakterystyczne dla joomla?

Pozdro

Adam

1) Rozumiem, że wyszukiwarki mają problem z joomla przez to, że generuje
sporo kodu przed , bo “hedera” to faktycznie ma rozbudowanego. Znalazłem
na joomla.pl tutorial, w którym header jakoś jest przesuwany. Robiłeś coś kiedyś na podstawie tego tutka?

2)Odnośnie tego co mnie drażni w joomla: wyszukiwarka jest za wrażliwa na błędy np. wpiszę AcoComent zamiast AkoComment i już niczego nie znajdzie. Trochę przykre to jest, że nie ma świetnej galerii, dobrego modułu do recenzji płyt, słabo jest rozwiązana stopka.

Adam

I jeszcze jedno. Nie wiem czy zostawiłeś te wpisu o Tokio Hotel i o definicji miłości, ale one nieźle namieszały:) Ten o miłości to zrozumiałe, ale ten o Tokio, to już tylko wynik
choroby małolatów co dali się zmanipulować zręcznym marketingowcom.Ale wpisów było…od groma hehe. Ja myślałem, że ten wokalista, to laska, poza tym jak facet może malować oczy hehee. A co do rapu to sam pisałem.

szuman

1)Adam, to nie tak, że Joomla się nie nadaje na duży serwis, chodziło mi tylko o to, że komponenty zamieniające linki do postaci nazwa_podstrony.html nie podołają, bo standardowa translacja URL-i w Joomla jak najbardziej sobie poradzi (przykład: serwis joomla.pl) :) 2)Kupuję na zaś ;) Nie ma sensu liczyć, bo nigdy dokładnie nie wyliczysz, najwyżesz oszacować możesz: pomnóż wagę strony (dokument+pliki graficzne) przez ilość odsłon. Zużycia transferu dla downloadu nigdy nie oszacujesz, bo czasem w jednym dniu może jeden plik mieć tyle ściągnięć, ile w ciagu całego miesiąca (np. ktoś roześle link znajomym, znajomi znajomym itp) 3)jeszcze nie, bo dodatków będzie… Czytaj więcej »

szuman

1) nie wiem dokładnie co masz na myśli, ale jeśli wygenerujesz sitemap.xml i wyslesz do Google, to ułatwisz robotom “życie” ;) Na poprzednim blogu tak miałem i strona bardzo ładnie była zaindeksowana więc nie ma się czym martwić. A co do modyfikacji, to jedynie zamieniłem miejscami tytuł podstrony z tytułem witryny :)

2)bo to nie Google, żeby się domyślać ;) Szukajka szuka w bazie i gdy nie znajdzie danego ciągu znaków, to nic nie zwróci

szuman

haha, z tych komentarzy do “Stop Tokio Hotel” miałem zajebistą beke, kiedy poprawiałem w nich polskie znaki ;) Czytając je bez trudu mozna wyrobic sobie zdanie, kim są odbiorcy takich komercyjnych produktów kierowanych do nastolat/któw/ek jak TH ;) Wpis nadal jest (wpisz sobie w szukajke na mojej stronie słowo “hotel” albo “tokio hotel”, to znajdziesz :)), ale jeszcze Google nie podchwyciło nowego linku, a stary index spadł z top10 ;) Hehe ja też przez długi czas myślałem, że do nowy girlband typu Vanilla Ninja :D Dopiero brat mnie uświadomił ;)

Paweł

Witam!

Właściwie to szukałem gotowych, prostych templatek, ale w przystępny sposób wytłumaczyłeś budowę tychże, dlatego chyba zrobię sobie własną :-) Mam nadzieję, że się uda, bo po tym opisie wydaje się to banalnie proste :-)

Dziękuję i pozdrawiam
Paweł

Walczak

super! dzięki ze to opisales! zamowilem sobie layout, slono za niego zaplacilem. Nastepnie zlecilem pewnemu specowi przerobienie go to ten zazyczyl sobie za robote 150 zł. nie skorzystałem z tej oferty i chyba nie skorzystam. Mam nadzieje ze poradze sobie. Jeszcze raz dzieki za poradnik. Zdrowia zycze!

szuman

@Walczak: spoko, nie ma sprawy :) Obiecałem ten tekst paru osobom, ale mam nadzieję, że innym też się przyda (choćby tobie). Swoją drogą 150 zł za przerobienie templatki to jak na mój gust drogo (chyba, że baaardzo rozbudowany szablon kupiłes, ale nie wyobrażam sobie takiego, za który sam bym zawołał 150 zł). Ale różnie ludzie wyceniają swój czas :) Powodzenia

Walczak

A Ty na ile wyceniasz swój czas poświęcony na przerobienie szablonu? Napiszę wprost: szablon, który zamówiłem, sporo mnie kosztował i nie chcę go zepsuć! Ile chciałbyś za dostosowanie mojego szablonu do Joomli? Bo rozumiem, że mniej niż 150 zł? Będę wdzięczny za szybką odpowiedź.
Pozdrawiam, Waldek

Walczak

To jeszcze raz ja. Wiem, że Joomla ma swoje, że się tak wyrażę, reguły i niektóre elementy muszą wyglądać tak, a nie inaczej. Jesteś w stanie odpowiedzieć w jakim stopniu możliwe jest odwzorowanie projektu grafika przy przystosowywaniu templatki do Joomli? Dziękuję

szuman

Trudno powiedzieć w jakim stopniu, kiedy nie ma się przed oczami szablonu :) Ale pod konkretny pojekt mogę dodatkowo zmodyfikować pliki Joomla, dzięki czemu nawet 100% jest realne. Wyślij mi, proszę, zrzut Twojego szablonu wypełniony przykładową treścią (jpg, png – obojętne) na pocztę: szuman@wudeka.net_NO_SPAMM, to powiem Ci jak z odwzorowaniem i podam cenę. Pozdrawiam

Walczak

OK. Dzięki. Zależy mi na tym, aby moja strona wyglądała tak jak na projekcie, za który słono zapłaciłem.
Pozdrawiam

Krzysiek W-w

pytanie do autora:
w jaki sposob zrobic, aby na poczatku kazdego tytułu była niewielka ikonka? Cos w rodzaju arrow

szuman

nie wiem czy ucieło Ci komentarz, czy to wszystko. Jeśli chodzi Ci o stałą ikonkę, to możesz to zrobić na dwa sposoby:
1) w css w klasie contentheading ustawic swoja ikone jako tło z atrybutem no-repeat i odpowiednią wartość dla padding-left
2) w components/com_content w pliku content.html.php mozesz odszukac (gdzies w polowie) fragment kodu odpowiedzialny za wyświetlanie newsow i przed tytułem wstawic ikone jako zwykły obrazek: img src…

Bogacz

przyda mi się bardzo, dzięki.

mrx28

Super artykul

czekamy na wiecej … :)

Jony Walker

Jak można zmienić sposób wyświetlania artykułów w gotowej templatce. Zmorą gotowych templatek jest wyświetlanie artykułów w dwóch kolumnach, a ja chciałby aby Joomla wyświetlała tylko w jednej kolumnie.

szuman

W górnym menu w zakładce “Menu” wybierz “mainmenu” i edytuj pierwszą pozycję na liście (jest to strona główna). Po prawej stronie ekranu będziesz miał preferencje: liczbę kolumn – to te słupki, domyślnie 2 i ilość wprowadzeń. Zobacz na tym zrzucie:
http://www.iv.pl/view/38747.html

Jony Walker

Jak można zmienić kolor tła templatki? Gdzie z reguły ustala kolor tła templatki?

szuman
Arek

Jony Walker poczytaj fora i pomoc.joomla.pl a nie zadawaj takich podstawowych pytan jak to o kolor tła. Kurs html poczytaj najpierw.

Ninka

W nagłówku wystarczy wpisać

Wszelkie niezbędne definicje znajdują się w pliku includes/frontend.php, który jest włączany automatycznie. Funkcja mosShowHead generuje automatycznie metadane, dotyczące autora, tytułu, słów kluczowych, opisu, generatora oraz dostępności dla robotów, na podstawie informacji wprowadzonych za pomocą panelu administracyjnego. Ręcznie należy wpisać przede wszystkim znacznik meta dotyczący kodowania znaków. Ścieżki do templatki też nie trzeba specjalnie podawać. Wystarczy wrzucić ją do odpowiedniego folderu i ustawić jako domyślną w panelu administracyjnym.

Brom

Witam.Bardzo fajny blog i poradnik bardzo mi pomógł ale mam mały problem:postępuje zgodnie z opisem ale niepokazuje mi top menu,a robie stronke klasową wraz z kolegą.Prosze o pomoc i Pozdrawiam

procek

Fajny wpis, ale jeśli chodzi o Joomlę to różne dziwne rzeczy mogą się nam przytrafić. Dla osób, które bezskutecznie próbowały sobie poradzić ze środkowaniem top-menu coś ode mnie:
[url=http://7pl.info/poziome-menu-zawsze-wysrodkowane.html]Poziome menu w CSS zawsze wyśrodkowane[/url]

poznaje_joomle

Kiedy będzie wersja dla joomli 1.5?? Trochę jest zmian w nowej wersji.

szuman

@[b]Poznaje_joomle[/b], czy ja wiem, czy jest sens? Zmian nie ma takich, aby na nowo to opisywać; system funkcjonowania ten sam, więc można sobie porównać szablon z 1.0.x do 1.5.x i popróbować.

Choć gdybym opisał to bardziej szczegółowo i w sposób bardziej zaawansowany, to ten wpis faktycznie zdezaktualizowałby się, ale tu jest z grubsza i wystarczy ruszyć nieco główką (znam takich, którzy na bazie tego wpisu kodowali szablon do 1.5).

siteimpulse

“Nie mam wolnej instalacji Joomla” – czyli pisałeś to wszystko z głowy, nie weryfikując?

Trochę jak kucharz, który nie próbuje gotowanej potrawy…

szuman

@[b]Siteimpulse[/b], a po co po raz enty “weryfikować”? Pisałem to z głowy mając w zasięgu kliknięcia kilka działających przykładów i jeszcze więcej zakodowanych szablonów :)

Jak robisz herbatę, to za każdym razem słodzisz po troszku i kosztujesz, czy już dobre?

Paweł F.

książka: Joomla! Budowa i modyfikacja szablonów – jest już dostępna i od razu po 3 dniach sprzedaży trafiła na TOP 10

CigoMagesee

Good Evening

I am worrying to pique a restore to health as this[url=http://www.ringinginearstoday.com] ringing in my ears[/url]. I identify that this is a medical requirement but, this is getting gone from of control. I know that I should see a doctor but I straight cannot give it. I call for the ringing in my ears to depot already and destitution some advice from those on the forum here that can help. Do you know how to get this ringing to stop?