Własny szablon dla Joomla! Gantry - cz. 3

Własny szablon dla Joomla! Gantry - cz. 3

Pomimo, że w Internecie można znaleźć tysiące różnych szablonów dla Joomla!, zarówno płatnych, jak i bezpłatnych, jest wiele osób, które pragną samodzielnie utworzyć własny szablon dla swojego serwisu. Niestety spora część z nich zdaje sobie sprawę, że ich umiejętności programowania nie są wystarczające, aby to było możliwe!

Na szczęście obecne technologie pozwalają utworzyć własny szablon, nawet osobom, które na kodowaniu nie znają się wcale!

W tym artykule pokażę Ci na konkretnym przykładzie, jak niemal nie dotykając kodu, wykorzystując DARMOWY framework Gantry i DARMOWY szablon Gantry, stworzyć własny szablon dostosowany do wymagań konkretnego serwisu.

Wykorzystam do tego celu przykładowy serwis wykonany jako przykład dla Joomla! 2.5. Praktyczny kurs oraz zaktualizowany do najnowszej wersji Joomla! z serii 3. Dzięki temu skorzystają także uczestnicy DARMOWEGO Kursu Joomla! 2.5, którzy po lekturze tutoriala: Jak zaktualizować Joomla! 2.5 do Joomla! 3.x? będą mogli płynnie przejść na Joomla! 3 i cieszyć się nowymi funkcjonalnościami.

No to co? Do roboty!

Przykładowy serwis poświęcony jest recenzjom książek i e-booków na temat e-biznesu i rozwoju osobistego. Zobacz, jak prezentuje się on z domyślnym szablonem beez3:

Wygląd przykładowego serwisu na temat recenzji książek i e-booków

A teraz zobacz, jak będzie wyglądał ten serwis z własnym szablonem wykonanym za pomocą frameworka Gantry:

Wygląd serwisu z szablonem utworzonym za pomocą frameworka Gantry

Zupełnie inny wygląd prawda?

Pokażę Ci krok po kroku, jak wykonać taki szablon! W takim razie zarezerwuj sobie godzinkę lub dwie, wyłącz Facebook'a, sprawdź, czy nic Cię nie rozprasza i... do dzieła!

Krok 1. Pobierz framework, szablon i dodatkowe rozszerzenia Gantry

Wpisz w pasku adresu swojej przeglądarki adres: www.gantry-framework.org/download, a następnie kliknij logo Joomla! znajdujące się na środku ekranu:

Wybór CMSa podczas pobierania framework'a Gantry

Pobierz Gantry Template Bundfle for Joomla! 2.5 + 3.3 i zapisz plik w dowolnej lokalizacji na swoim komputerze.

Pobieranie plików Gantry Template Bundle for Joomla

Dlaczego akurat Gantry Template Bundle? Ponieważ w jednym pliku instalacyjnym znajduje się wszystko, co będzie Ci potrzebne:

  • framework Gantry;
  • szablon Gantry;
  • dodatkowe rozszerzenia:
    • moduł RokNavMenu;
    • dodatek RokExtender;

Krok 2. Zainstaluj framework, szablon i dodatkowe rozszerzenia Gantry

Zaloguj się do  zaplecza Twojego serwisu, a następnie kliknij w menu Rozszerzenia pozycję Instalacje, a następnie w zakładce Instaluj z pakietu, kliknij przycisk Przeglądaj i wskaż pobrany w kroku 1 plik. W moim przypadku to: gantry-4.1.29-bundle.zip. Pamiętaj, że kiedy będziesz korzystać z tej instrukcji, może być dostępna inna wersja ;-) Na koniec kliknij przycisk Wczytaj plik i zainstaluj.

Instalacja Gantry Template Bundle for Joomla!

Po instalacji, wszystkie niezbędne dodatki są automatycznie włączone!

Jednak na wszelki wypadek możesz to sprawdzić ;-) Kliknij w menu Rozszerzenia pozycję Dodatki, a następnie z filtra Wybierz typ, wybierz pozycję system. Odszukaj na liście dodatków: System - RokExtender oraz System - Gantry i sprawdź czy w kolumnie Stan wyświetlana jest ikonka z zielonym znaczkiem (ptaszkiem) - jeżeli tak, to oba dodatki są opublikowane i nie musisz nic robić ;-)

Sprawdzenie czy zainstalowane dodatki Gantry są włączone

Krok 3. Ustaw szablon Gantry, jako szablon domyślny

Aby zorientować się, jak Twój serwis wygląda z domyślnymi ustawieniami szablonu Gantry, kliknij w menu Rozszerzenia, pozycję Szablony, a następnie na liście odszukaj: Gantry - Default, kliknij pole wyboru obok nazwy szablonu, a następnie kliknij przycisk Domyślny. Możesz także od razu w kolumnie Domyślny kliknąć ikonkę gwiazdki ;-)

Ustawienie szablonu Gantry, jako szablonu domyślnego

Teraz możesz zobaczyć, jak prezentuje się serwis. W przypadku mojego przykładowego serwisu, widoczny jest tylko widok przeglądu artykułów:

Wygląd serwisu po zdefiniowaniu szablony Gantry jako domyślnego

Krok 4. Zdefiniuj podstawowy styl szablonu

W menadżerze szablonów (menu Rozszerzenia -> Szablony), na liście szablonów kliknij nazwę: Gantry - Default. W oknie Templates Manager / Edit Style kliknij zakładkę Style. Znajdziesz tutaj podstawowe opcje ustawień dla Twojego szablonu.

Jeżeli masz grafikę z logo Twojego serwisu, w wierszu Logo, wybierz z pola Type pozycję: Custom, a następnie w wierszu Custom Logo kliknij przycisk Select i wczytaj lub od razu wskaż plik z logo i kliknij przycisk Wstaw.

Jeżeli nie posiadasz pliku z logo możesz wyłączyć wyświetlanie grafiki w nagłówku strony. Wystarczy, że w wierszu Logo klikniesz suwak Show na pozycję OFF.

W wierszu Header Style wybierz z listy czy chcesz, aby nagłówek serwisu był ciemny (Dark), czy jasny (Light). Ja wybieram: Dark ;-)

W wierszu Link Color wybierz domyślny kolor wszystkich linków i przycisków w witrynie. Ja wybieram kolor: #a30018.

W wierszu Font Settings wybierz z listy Font Family krój czcionki wyświetlanej w tytułach modułów i artykułów, natomiast z listy Font Size, jej rozmiar. Ja wybrałem czcionkę Jockey One z sekcji Google Fonts oraz rozmiar: Default.

Ustawienia Style w szablonie Gantry

Zapisz swoje ustawienia klikając niebieski przycisk Zapisz i sprawdź, jak teraz prezentuje się Twój serwis. U mnie wygląda to tak:

Wyglą serwisu po zmianach w zakładce Style

Krok 5. Zdefiniuj menu górne (Top Menu)

W oknie Templates Manager / Edit Style, kliknij zakładkę Menu. W tym miejscu możesz zdecydować o włączeniu lub wyłączeniu wyświetlania menu poziomego (Top Menu) oraz wyborze menu, które ma być w ten sposób wyświetlane.

W wierszu Menu Control za pomocą przełącznika Show, zdecyduj, czy menu poziome powinno wyświetlać się w Twoim serwisie, natomiast za pomocą listy Type wybierz typ wyświetlanego menu. Jeżeli wybierzesz pozycję Split-Menu, to wówczas pozycje podrzędne menu będą wyświetlały się w innej pozycji szablonu. Ja wybieram: Dropdown-Menu ponieważ uważam, że menu wygląda wówczas znacznie ciekawiej.

W wierszu Select a Menu wybierz z listy menu, które ma być wyświetlane, jako menu poziome. Ja wybieram menu o nazwie: Menu Główne.

W wierszu Position wybierz z listy pozycję, na której to menu ma być wyświetlane. Na razie pozostawiam domyślną pozycję: header-b.

W wierszu Responsive Menu wybierz sposób wyświetlania menu na urządzeniach mobilnych. Jeżeli wybierzesz z listy pozycję Panel, po kliknięciu menu będzie wyświetlane w formie struktury hierarchicznej, natomiast jeżeli wybierzesz z listy pozycję Selectbox, po kliknięciu menu będzie wyświetlane w formie listy pozycji. Ja wybieram pozycję Selectbox.

W wierszu Enable ID, za pomocą przełącznika możesz włączyć lub wyłączyć domyślne korzystanie przez Joomla! z Active ID.

W wierszu Module Cache, za pomocą przełącznika włącz lub wyłącz buforowanie modułów. Kiedy testujesz serwis na komputerze lokalnym wyłącz tą opcję, natomiast, kiedy serwis jest już widoczny w Internecie, warto ją włączyć, aby zwiększyć szybkość wczytywania się strony.

Ustawnia menu w szablonie Gantry

Zapisz wprowadzone zmiany klikając niebieski przycisk Save i sprawdź teraz, jak prezentuje się Twój serwis. W moim przykładowym serwisie, wygląda to tak:

Wygląd serwisu po zdefiniowaniu opcji Menu w szablonie Gantry

Zauważ, że menu rozpoczyna się od połowy strony i nie mieści wszystkich pozycji w jednym wierszu! Jeżeli w Twoim serwisie masz podobnie, to nie martw się, jest na to rozwiązanie :-) Pokażę Ci co i jak w kolejnym kroku ;-)

Pamiętaj, że menu główne powinno zawierać tylko najważniejsze pozycje. W moim przypadku pozycja: Wyszukiwarka jest niepotrzebna, ponieważ pole wyszukiwania umieszczę później w module i opublikuję w innym miejscu serwisu. Pozycja: Mapa serwisu zostanie także umieszczona w innym miejscu. Tak więc udało mi się odchudzić menu o dwie pozycje ;-)

Jeżeli chcesz, aby w menu górnym wyświetlały się także ikonki graficzne, wystarczy, że do każdej pozycji menu przypiszesz odpowiedni obrazek. Jak to zrobić? To bardzo proste!

Kliknij w menu Menu, nazwę menu, które wyświetlane jest jakoTop Menu, a następnie kliknij nazwę pozycji menu, dla której chcesz przypisać obrazek.

Edycja menu: Menu główne

W oknie Projektant pozycji menu: Dostosuj kliknij zakładkę Dropdown Menu Opcions a następnie w polu Menu Image wybierz z listy nazwę pliku. Twórcy szablonu Gantry przygotowaniu sporą ilość grafik, które możesz wykorzystać w swoim serwisie. Pliki te umieszczone są w lokalizacji: /templates/gantry/images/icons. Jeżeli chcesz zastosować własne pliki graficzne, musisz je umieścić właśnie w tej lokalizacji, aby były widoczne na liście w polu Menu Image ;-)

Możesz także skorzystać z ikon dostępnych w serwisie Font Awesome. Wystarczy w polu Menu Icon wybrać z listy odpowiednią nazwę ikonki.

Po wybraniu pliku graficznego lub ikonki kliknij przycisk Zapisz i zamknij, aby zapisać wprowadzone zmiany.

Umieszczanie grafiki w pozycji menu: Start

Podobne czynności wykonaj dla każdej pozycji menu.

Teraz sprawdź, jak prezentuje się Twój serwis z grafiką w Top Menu. U mnie to wygląda tak:

Wygląd Top Menu z dodatkowymi ikonkami graficznymi

Krok 6. Zdefiniuj układ szablonu Gantry (Layouts)

Pora na zdefiniowanie układu szablonu! W oknie Template Manager / Edit Style (menu Rozszerzenia -> Szablony, szablon: Gantry - Default), kliknij zakładkę Layouts. To jedna z najciekawszych opcji framework'a Gantry,  dzięki której możesz przebudować całkowicie wygląd szablonu.

Jak z niego korzystać, przeczytasz w poprzedniej części tej serii artykułów na temat Gantry: Własny szablon dla Joomla!? Z Gantry to proste! - cz. 2.

Poświęć trochę czasu, aby poeksperymentować z różnymi układami.

Ponieważ mój przykładowy serwis nie jest zbytnio rozbudowany, mój układ wygląda tak:

Wygląd zdefiniowanego układu w szablonie Gantry

Zwróć uwagę na ustawienia w wierszu Header Positions. Ponieważ w tej pozycji znajduje się plik z logo oraz Top Menu, ograniczyłem ilość dostępnych pozycji do 2 a następnie za pomocą suwaka zwiększyłem szerokość pozycji b, aby ilość pozycji w moim Top Menu zmieściła się w jednym wierszu.

Zapisz ustawienia układu szablonu klikając przycisk Save. W moim przykładzie, niewiele zmian widać w serwisie, ponieważ nie zostały jeszcze przypisane moduły do odpowiednich pozycji. Obecnie, najbardziej widoczna zmiana jest w Top Menu. W końcu wszystkie pozycje mieszczą się w jednym wierszu!

Wygląd Top Menu po zmianie konfiguracji Layoutu w szablonie Gantry

Krok 7. Zdefiniuj ustawienia zaawansowane szablonu Gantry

W oknie Template Manager / Edit Style (menu Rozszerzenia -> Szablony, szablon: Gantry - Default), kliknij zakładkę Advanced. Opcje dostępne w tej zakładce umożliwiają włączenie lub wyłączenie kilku dodatkowych opcji dla bardziej doświadczonych webmasterów.

Jeżeli chcesz, aby Twój szablon prawidłowo wyświetlał się na różnych urządzeniach i wielkościach ekranów, takich jak typowe ekrany komputerowe, laptopy, tablety, smartfony, itp., w sekcji Layout Mode pozostaw opcję Responsive.

W sekcji Load Transition, za pomocą suwaka możesz włączyć lub wyłączyć animacje podczas ładowania się strony. Efekt ten jest szczególnie widoczny przy dosyć rozbudowanych witrynach.

Strona startowa, to najważniejsza część serwisu. Jak pisze Steve Krug w swojej książce: Nie każ mi myśleć. O życiowym podejściu do funkcjonalności stron internetowych:

Każdy element strony głównej może brać udział w wyjaśnianiu odbiorcom celu istnienia serwisu.

Strona główna ma zachęcać internautę do zagłębienia się w jego zasoby ;-)

Jeżeli chcesz, aby na stronie startowej wyświetlane były tylko same moduły (bez przeglądu artykułów), to w sekcji Display Component za pomocą suwaka wybierz pozycję OFF

Jeżeli chcesz, aby na stronie startowej nie były widoczne także moduły umieszczone w pozycjach: Content Top, Content Bottom i Sidebar, to w sekcji Mainbody Enabled, za pomocą suwaka wybierz pozycję OFF.

W moim przykładzie wyłączam obie opcje, zarówno Display Component, jak i Mainbody Enabled.

W sekcji RTL Support, za pomocą suwaka wybieram pozycję OFF, ponieważ odbiorcami mojego przykładowego serwisu nie są użytkownicy, którzy czytają tekst od prawej do lewej (hebrajski lub arabski).

Sekcję Page Suffix pozostawiam z ustawieniami domyślnymi, natomiast w sekcji Selectvizr, wybieram pozycję ON, aby zapewnić prawidłowe wyświetlanie serwisu w przeglądarkach IE8 i starszych.

Sekcja Less Compiler pozostaje w moim przykładzie z ustawieniami domyślnymi.

Ustawienia: Advanced w szablonie Gantry przykładowego serwisu

Zapisz swoje ustawienia klikając przycisk Save i sprawdź, jak teraz prezentuje się Twój serwis. Wygląd może Cię zaskoczyć, ponieważ zniknie widok przeglądu artykułów i pozostaną same moduły. U mnie wygląda to tak: 

wygląd serwisu po zmianie ustawień Advanced w szablonie Gantry

Krok 8. Blok Showcase

Jeżeli pod menu chcesz umieścić wyróżniające się informacje, możesz zastosować efektowny slider (zerknij do artykułu DJ Image Slider) lub utworzyć moduły typu Własny HTML w których treść możesz dowolnie edytować za pomocą domyślnego edytora.

Tym razem wybrałem opcję z zastosowaniem modułów ;-)

Ponieważ definiując układ szablonu w kroku 6 w sekcji Showcase Positions zdefiniowałem dwie pozycje, potrzebuję dwóch modułów. No to do pracy!

Kliknij w menu Rozszerzenia, pozycję Moduły, a następnie utwórz nowy moduł typu Własny HTML. W polu Tytuł wpisz tytuł swojego modułu, ja wpisuję: Joomla! 2.5 Praktyczny kurs (SHOWCASE), a następnie w edytorze kliknij przycisk Kod źródłowy.

Tworzenie nowego modułu w pozycji ShowcaseW oknie modalnym wklej kod pokazany poniżej, a następnie zmień wpisy w odpowiednich miejscach.

<div class="promo-image"><img src="#" alt="" /></div>
<div class="promo-desc">
<h1><b>Lorem ipsum</b></h1>
<p><b>Lorem ipsum dolor sit amet, </b>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="readon" href="#">Czytaj więcej</a>
</div>

Okienko modalne z kodem źródłowym w module typu: Własny kod HTML

Co i gdzie dokładnie zmienić? Możesz zmienić cztery pozycje:

  • hiperłącze do grafiki;
  • Tytuł wyświetlany w module;
  • Krótki opis;
  • hiperłącze przycisku, które po kliknięciu przeniesie internautę w odpowiednie miejsce serwisu;

Zobacz poniższy przykład. Czcionką w kolorze czerwonym zaznaczyłem miejsca, które należy zmienić:

<div class="promo-image"><img src="/images/twoja_grafika.jpg" alt="" /></div>
<div class="promo-desc">
<h1><b>TYTUŁ</b></h1>
<p><b>Lorem ipsum dolor sit amet, </b>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="readon" href="/http://www.twojserwis/jakastrona">Czytaj więcej</a></div>

Po wklejeniu kodu i zmianie wpisów na własne, kliknij w okienku modalnym przycisk Ok, aby powrócić do konfiguracji dalszych ustawień modułu. W polu Pokaż tytuł kliknij przycisk Ukryj, następnie w polu Pozycja wybierz z listy pozycję w jakiej wyświetlany będzie Twój moduł. W moim przypadku, to: showcase-a. W polu Stan wybierz z listy pozycję Opublikowany, a następnie kliknij zakładkę Przypisz do pozycji menu.

Tworzenie nowego modułu ShowcaseZdecyduj, kiedy moduł powinien być wyświetlany wybierając odpowiednią opcję w polu Zasada przypisania. W moim przykładzie moduły znajdujące się z pozycji Showcase będą wyświetlane tylko na stronie startowej:

Definiowanie zasady przypisani modułu do pozycji menu

Kliknij jeszcze kartę Wzbogacone i w polu Przyrostek klas CSS modułu, wpisz: promo. Dzięki temu moduł będzie specjalnie formatowany. Zapisz wszystkie ustawienia klikając przycisk Zapisz i zamknij.

Definiowanie przyrostka klas CSS modułu

Teraz utwórz drugi moduł, który będzie znajdował się obok tego utworzonego wcześniej. Ja utworzyłem moduł typu Własny HTML, ale już bez edycji kodu HTML. Umieściłem w nim po prostu któtki tekst oraz grafikę ;-)

Pamiętaj, aby zdefiniować zasady przypisania do odpowiednich pozycji menu (zakładka Przypisz do pozycji menu). Podobnie jak w przypadku poprzedniego modułu chciałbym, aby moduły znajdujące się z pozycji Showcase będą wyświetlane tylko na stronie startowej. Zaznaczam więc tylko pozycję: Start.

Na koniec kliknij kartę Wzbogacone i w polu Przyrostek klas CSS modułu, wpisz: promo i zapisz wszystkie ustawienia klikając przycisk Zapisz i zamknij.

Zobacz, jak teraz wygląda serwis po utworzeniu dwóch modułów w pozycjach Showcase:

Wygląd serwisu po umiesczeniu dwóch modułów w pozycjach Showcase

Krok 9. Moduły Features

Aby wyeksponować pewne działy swojego serwisu możesz dodatkowo utworzyć moduły, które umieścisz w pozycjach Features.

Podczas planowania układu szablonu w kroku 6 w sekcji Features Positions zdefiniowałem trzy pozycje. Zatem potrzebuję trzech modułów.

Utworzę trzy moduły typu Własny HTML, w których umieszczę krótki nagłówek, grafikę i opis zachęcający do odwiedzenia wybranych działów przykładowego serwisu.

Moduły te będą opublikowane na pozycjach: feature-a, feature-b oraz feature-c. Wyłączam także wyświetlanie tytułu (pozycja Pokaż tytuł -> Ukryj) i ustawiam wyświetlanie tylko na stronie startowej (zakładka: Przypisz do pozycji menu, pozycja: Zasada przypisania).

Na koniec definiuję sufix o nazwie box2 dla każdego modułu (zakładka Wzbogacone, pole: Przyrostek klas CSS modułu).

Sufiksy, które możesz wykorzystać w swoim serwisie opartym o framework Gantry znajdziesz w wersji demonstracyjnej, na stronie Module Variations.

Co to takiego ten sufiks? Aby nie wdawać się w zbyt długie wyjaśnienia, to po prostu specjalna klasa zdefiniowana w języku CSS, za pomocą, której można inaczej zdefiniować wygląd poszczególnych elementów modułu.

Zobacz teraz jak prezentuje się mój przykładowy serwis:

 Wygląd przykładowego serwisu po utworzeniu modułów w pozycjach Features

Krok 10. Zdefiniuj pozycje dla poszczególnych modułów 

W tym kroku, musisz podjąć decyzję, w jakich pozycjach mają być wyświetlane poszczególne moduły.

Edytuj utworzone wcześniej przez Ciebie moduły (menu Rozszerzenia -> Moduły) i za pomocą pola: Pozycja, zdefiniuj dla nich nowe położenie w Twoim szablonie.

Ja założyłem, że w moim przykładowym serwisie, na stronie startowej będą widoczne tylko moduły, które mają zachęcać internautę do zagłębienia się w jego zasoby. Zauważ, że widoczne do tej pory elementy doskonale się do tego nadają ;-)

W moim przykładowym serwisie mam już utworzone moduły wyświetlające najnowsze oraz najpopularniejsze artykuły. Wobec tego pierwszy z nich - moduł typu Artykuły - Nowości, umieściłem na pozycji mainbottom-a, natomiast drugi - moduł typu Artykuły - Popularne - na pozycji: mainbottom-b. Podczas planowania układu szablonu w kroku 6, w tym miejscu zdefiniowałem trzy pozycje. Wobec tego na pozycji mainbottom-c, umieściłem moduł typy Zakładki wyświetlający zakładki do wydawnictw oferujących recenzowane w serwisie książki i e-booki.

Kolejny moduł utworzony wcześniej na podstawie rozszerzenia SP Facebook, wyświetla ikonki grafik profilów użytkowników Facebook'a, którzy kliknęli przycisk Lubię to fanpage serwisu. Dla tego modułu przygotowałem w kroku 6 pozycję bottom-a.

Strona startowa już prawie gotowa! Brakuje jeszcze stopki serwisu.

Zaplanowałem wcześniej dla tej części serwisu trzy pozycje. W jednej z nich (footer-a) umieściłem moduł typu Reklamy wyświetlający grafiki partnerów współpracujących z serwisem. W drugiej: footer-b, umieściłem nowy moduł typu Tag - popularne, który wyświetla chmurę tagów. Oczywiście, trzeba pamiętać, że aby tagi te były wyświetlane, wcześniej należy je utworzyć i przypisać do artykułów ;-)

Trzecia pozycja w stopce (footer-a), to nowy moduł typu Własny HTML, którego zadaniem będzie wyświetlanie przycisków do wybranych portali społecznościowych. Twórcy szablonu Gantry nie przygotowali specjalnych przycisków, ale możesz wykorzystać ikony dostępne w serwisie Font Awesome.

Aby utworzyć własny moduł z przyciskami do portali społecznościowych, otwórz menadżera modułów (menu Rozszerzenia -> Moduły) i utwórz nowy moduł typu Własny HTML. W polu Tytuł wpisz tytuł swojego modułu, ja wpisałem: Social a następnie w edytorze kliknij przycisk Kod źródłowy (podobnie jak w przypadku tworzenia modułu dla pozycji showcase-a w kroku 8).

W oknie modalnym wklej kod pokazany poniżej, a następnie zastąp znak: # odpowiednimi odnośnikami do serwisów społecznościowych.

<div style="font-size: 3.5em; line-height: 1.5em">
<a class="icon-facebook-sign" href="#">&nbsp;</a>
<a class="icon-google-plus-sign" href="#">&nbsp;</a>
<a class="icon-twitter-sign" href="#">&nbsp;</a>
<a class="icon-linkedin-sign" href="#">&nbsp;</a>
<a class="icon-pinterest-sign" href="#">&nbsp;</a>
</div>

No i moja strona startowa praktycznie gotowa! Mam nadzieję, że Tobie także udało się dopasować utworzone wcześniej moduły do odpowiednich pozycji w nowym szablonie.

Strona startowa mojego przykładowego serwisu jest już prawie gotowa i wygląda tak:

Wygląd strony startowej przykładowego serwisu wraz ze wszystkimi modułami

Teraz w pozycji sidebar-a zdefiniuj pozostałe moduły, które powinny wyświetlać się na poszczególnych podstronach.

  • Moduły: E-BIZNES, MOTYWACJA, ZA DARMO!, to moduły wyświetlające menu z pozycjami do przeglądu artykułów w poszczególnych kategoriach tematycznych. Każdy z tych trzech modułów przypisany jest tylko do pozycji menu, które pasują tematycznie. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: title3;
  • Moduł SZCZEGÓLNIE POLECAM, to moduł typu Reklamy wyświetlający grafiki pozycji szczególnie polecanych przez autora (autorów) recenzji. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: box3;
  • Moduł LINKI, to moduł wyświetlający menu z pozycjami prowadzącymi do wydawnictw, które oferują recenzowane książki. Wyświetlany jest na wszystkich pozycjach poza stroną startową. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: box1;
  • Moduł Who's online, to moduł wyświetlający liczbę użytkowników odwiedzających serwis. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: box1;
  • Moduł LOGOWANIE, to moduł wyświetlający formularz logowania użytkowników. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: box1;
  • Moduł Menu użytkownika, to moduł wyświetlający menu z pozycjami umożliwiającymi edycję profilu użytkownika oraz wysłanie przez niego artykułu. Moduł wyświetlany jest na wszystkich pozycjach poza stroną startową i tylko po zalogowaniu się użytkownika. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: title3;
  • Moduł Recenzowane książki wyświetla losowo grafiki recenzowanych książek. Na karcie Wzbogacone w polu Przyrostek klas CSS modułu wpisuję: box2;

Pozostaje jeszcze umieścić w odpowiednim miejscu moduł pokazujący ścieżkę powrotu (tzw. breadcrumbs) oraz moduł wyszukiwarki. Dla tych dwóch modułów przygotowałem pozycje Utility. Moduł Breadcrumbs umieszczam w pozycji: utility-a, natomiast moduł wyszukiwarki w pozycji utility-b.

To wszystko! Zobacz jak prezentuje się mój przykładowy serwis po kliknięciu jednej z pozycji menu:

 Wygląd przykładowego serwisu po kliknięciu jednej z pozycji menu

Masz już wyświetlone wszystkie moduły na stronie startowej oraz na poszczególnych podstronach serwisu. Teraz możesz jeszcze bardziej dopieścić swój projekt zmieniając ustawienia dodatkowych elementów serwisu ;-)

Szczegółowy opis wszystkich opcji znajdziesz w artykule: Własny szablon dla Joomla!? Z Gantry to proste! - cz. 1.

Krok 11. Zdefiniuj dodatkowe elementy serwisu

W oknie Templates Manager / Edit Style, kliknij zakładkę Features. W tym miejscu możesz zdecydować o włączeniu lub wyłączeniu dodatkowych elementów serwisu, takich jak data czy przełącznik zmieniający wielkość wyświetlanych w treści czcionek.

Dokonaj zmian według własnych potrzeb. Zobacz, jak wyglądają ustawienia w przypadku mojego serwisu:

Ustawienia Features w szablonie Gantry przykładowego serwisu

Teraz strona startowa mojego przykładowego serwisu wygląda tak:

Wygląd strony startowej przykładowego serwisu po zakończeniu prac

Natomiast po kliknięciu jednej z pozycji menu, prezentuje się następująco:

Wygląd przykładowego serwisu po kliknięciu jednej z pozycji menu po zakończeniu prac

No i jak? Potrafisz już wykorzystać framework i szablon Gantry do stworzenia szablonu dla własnego serwisu?

Zauważ, że tylko niektóre specyficzne moduły wymagały zaglądnięcia do kodu ;-)

Jestem ciekaw, jaka jest Twoja opinia na temat tego narzędzia! Mam nadzieję, że stworzyłeś/stworzyłaś swój własny szablon. Liczę także na to, że się pochwalisz i podzielisz swoimi spostrzeżeniami umieszczając swój komentarz pod tym artykułem!

To była ostatnia część serii artykułów dotyczących frameworka Gantry. Ale to nie jest koniec serii artykułów dotyczących tematyki tworzenia szablonów. Już niebawem spodziewaj się kolejnych artykułów i tutoriali z serii: Jak utworzyć własny szablon dla Joomla! nie dotykając kodu ;-)

Już niebawem pojawią się także nowe ebooki i materiały video na temat tworzenia szablonów! Jeżeli tematyka ta jest dla Ciebie interesująca i posiadasz konto na Facebooku, to polub mojego fanpage'a: www.facebook.com/slawopnet i śledź bieżące informacje!

 

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Wierszem o Joomla!
Joomla! w Politechnice Śląskiej

Podobne wpisy

 

    By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/

    Najnowsze komentarze

    Gość - Studio Jak wybrać hosting dla Joomla!?
    13 wrzesień 2019
    Warto jeszcze dopisać punkt, żeby przy wyborze wybrać panel między DirectAdmin/cPanel. Niektóre hostingi mają swoje własne rozwiązania - czasami bardzo specyficzne, co niekoniecznie jest dobrą rzeczą
    Gość - Marek Szyfrowanie symetryczne a niesymetryczne
    09 czerwiec 2019
    "Klucz przekazany do publicznej wiadomości, nazywany jest kluczem publicznym lub jawnym. Może on być stosowany do szyfrowania lub deszyfrowania informacji otrzymanych od osoby, która go wygenerowała. ...
    Gość - Marek Tworzenie szablonów dla Joomla! Helix Ultimate
    10 maj 2019
    Witam, napotkałem problem pojawiający się przy zmianie kolorów tła czy czcionek oraz importowaniem ustawień. W pierwszym przypadku, po zmianie kolorów i ich zapisaniem, panel podglądu strony przeładow...
    Gość - Andy SSL i Joomla! w Smarthost
    03 styczeń 2019
    Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
    Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
    02 styczeń 2019
    Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...