A A A

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

przez w Webdesign
  • Przeczytano: 6107
  • 12 komentarze
  • Drukuj
6107
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?

Oceń ten wpis:

Nauczyciel przedmiotów informatycznych w szkole ponadgimnazjalnej.


Pierwszy Certyfikowany Administrator Joomla! w Polsce.


Autor książek i e-booków na temat Joomla!. Autor bloga: www.slawop.net, w którym porusza zagadnienia związane z CMS Joomla! i wykorzystaniu go, jako fantastycznego narzędzia, które ułatwia innym tworzenie ich własnego miejsca w sieci.


Prowadzi własną firmę świadczącą usługi związane z tworzeniem oraz administrowaniem serwisów opartych o CMS Joomla!


Współorganizator Joomla! User Group Jawor


Uwielbia ekstremalnie szybką jazdę na rolkach! Fan rozwoju osobistego i ciągłych zmian :-)


I love Joomla! Why?


Because Joomla! is Doing Great Things with Great People :-)


And My favourite sentence:



Don't Let Anybody Steal Your Dreams!


Komentarze

  • Gość
    Wojtek poniedziałek, 12 luty 2018

    Kurs fajny, kupiłem nawet twoją książkę.
    Na razie z powodu funkcjonalności jednego komponentu pozostałem jednak przy Gantry 4.
    Mam jednak do Ciebie pytanie, czy można w łatwy sposób zmienić tło sekcji footer i copright na ciemny?
    Mam szablon Cloudbase korzysta z Gantry 4 ale jednak wolałbym czysty Gantry z Rocketheme

  • Gość
    Czesław sobota, 09 wrzesień 2017

    Czy są jakie wymagania systemowe dla Gantry (Win XP, Linux)?

  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 19 październik 2017
  • Gość
    Ula piątek, 23 październik 2015

    Proszę o pomoc! Nie wiem w jaki sposób aktywować w zakładce danego kursu, okienko zapisz się na kurs na stronie akademiaksiegowa.pl Wcześniej było aktywne, niestety już nie jest. Powinno łączyć się formularzem który jest na dole strony.... Czy ktoś mógłby coś doradzić?

  • Sławomir Pieszczek
    Sławomir Pieszczek sobota, 24 październik 2015

    Ula,
    Jeżeli jest to moduł typu Własny HTML, to po prostu dodaj linka do nagłówka H2 w którym znajduje się ikonka kalendarza i napis.

  • Gość
    dariusz poniedziałek, 25 maj 2015

    Kolejna strona postawiona na gantry
    Ale mam takie pytanie

    Co mam poprzestawiać aby menu było opacity i gdy orzewijam w dół stronę ono zostało przyklejone na górze

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 27 maj 2015

    dariusz,
    Niestety w tym przypadku bez grzebania w kodzie się nie obędzie ;-)
    Co należy zrobić?
    - utwórz plik gantry-custom.css
    - wklej do niego kod:
    /*Definicja TopMenu - menu nie chowa się w czasie przewijania w dół strony*/

    #rt-top-surround {
    left: 0;
    position: fixed;
    right: 0;
    z-index: 100;
    }

    #rt-showcase {
    padding-top: 150px;
    }
    - zapisz plik w lokalizacji: \twoj_serwis\templates\gantry\css

  • Gość
    dariusz piątek, 29 maj 2015

    Menu przypieło się do góry strony tak jak chciałem ale jest jeden problem

    To co zaczyna się na podstronach od samej góry teraz sostało przykrytę przez przyczepione menu

  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 01 czerwiec 2015

    dariusz,
    No niestety, ale jeżeli masz szczególne wymagania, to bez kodowanie się nie obędzie.
    To czego oczekujesz wykracza już zakres tematyczny: własny szablon dla Joomla! bez umiejętności programowania ;-)
    Wykracza także poza zakres darmowej porady ;-)

  • Gość
    dariusz poniedziałek, 18 maj 2015

    No i poraz kolejny dziękuje za informację :) Myślałem że musi być widoczny ponieważ szablon jest darmowy ale najwidoczniej myliłem sie. Dzięki jeszcze raz i poozdrarawiam

    Odpowiedz Anuluj
  • Gość
    dariusz niedziela, 17 maj 2015

    Tutotrial jak najbardziej na poziomie
    Wszystko elegancko wytłumaczone i namalowane
    Ja nie miałem problemu z wykorzystaniem tutka

    Mam pytanie odnoścnie napisu Gantry na dole musi być na stronie głównej czy może być gdzieś indziej mniej widoczny ?

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 18 maj 2015

    dariusz,
    Dziękuję serdecznie za Twoje słowa i cieszę się, że udało się tobie wykorzystać wiedzę zawartą w tym poradniku :-)

    Mam pytanie odnoścnie napisu Gantry na dole musi być na stronie głównej czy może być gdzieś indziej mniej widoczny ?

    Może być gdziekolwiek go umieścisz ;-) Możesz także zdecydować, aby nie był wcale wyświetlany!
    W zakładce Features, w wierszu: Branding, za pomocą przełącznika włącz lub wyłącz wyświetlanie tego logo. Jeżeli chcesz, aby był wyświetlany, to z listy Position wybierz pozycję, w której ma on być widoczny (domyślnie: copyright-a).

    Pozdrawiam :-)

Zostaw komentarz

Gość
Gość poniedziałek, 17 grudzień 2018

Najnowsze komentarze

Czy jest jakaś możliwość, żeby zmienić układ top-bar i tej linii, w której jest logo? Tam niby są flexibloki ale nie można zmienić ich szerokości, a tego potrzebuję bardzo. Jak tego dokonać???

Joanna

Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna :)

Informatyk

co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?

Sławomir
05.11.2018 w DJ Image Slider

Właśnie, powinien się pojawić … . Oczywiście skorzystam z rady i zapytam u źródeł. Jeśli dowiem się czegoś mądrego, podzielę się wiedzą, może komuś się przyda. Dziękuję, pozdrawiam, Andrzej

Andrzej
Andrzeju, jeżeli w Ustawieniach podstawowych w zakładce Narzędzia na stronie w polu Powrót do góry masz aktywny przycisk Włączone, to taki przycisk powinien pojawić się u Ciebie na stronie już po prze...