Własny szablon dla Joomla!? Z Gantry to proste! - cz. 1

Własny szablon dla Joomla!? Z Gantry to proste! - cz. 1

Szukasz sposobu, aby utworzyć własny szablon dla serwisu opartego na Joomla!, ale niestety nie za bardzo potrafisz programować?

Kilka lat temu nie było zbyt wielu narzędzi, które mogłyby Ci to umożliwić ;-) Teraz jednak jest ich na prawdę sporo, zarówno darmowych, jak i płatnych. Co więcej - wykonane za ich pomocą szablony są zgodne z obowiązującymi standardami!

W poprzednich artykułach dotyczących tworzenia własnych szablonów, omówiłem szczegółowo jedno z takich narzędzi. Pokazałem na konkretnym przykładzie, jak niemal nie dotykając kodu, wykorzystując darmowy framework EF4 i darmowy szablon JM-Services, stworzyć własny szablon dostosowany do wymagań konkretnego serwisu.

W tym artykule pokażę Ci kolejne DARMOWE narzędzie dzięki któremu stworzysz własny szablon dla Joomla! Tym razem pod lupę biorę znany od kilku lat fantastyczny framework Gantry, którego producentem jest zespół z RocketTheme. To firma z siedzibą w Denver w stanie Colorado w USA, która wykonuje szablony i rozszerzenia zarówno dla Joomla!, jak i Wordpressa.

Podobnie jak w poprzednich artykułach dotyczących szablonów dla Joomla!, najpierw pokażę Ci, jak zainstalować i przetestować serwis z zaimplementowanymi przykładowymi szablonami oraz dodatkowymi rozszerzeniami: RocketLauncher (tzw. quickstart), a następnie pokażę Ci możliwości tworzenia własnego szablonu na przykładzie jakiegoś gotowego serwisu.

Krok 1. Pobierz pliki

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 CMS podczas pobierania framework'a Gantry

Pobierz wszystkie pliki przeznaczona dla Joomla! z serii 3 i zapisz je w dowolnej lokalizacji na Twoim komputerze.

Pobieranie plików przeznaczonych dla Joomla! z serii 3

Krok 2. Zainstaluj pakiet Rocket Launcher (quickstart)

Mam nadzieję, że masz w swoim komputerze uruchomiony pakiet z lokalnym serwerem WWW, interpreterem PHP i serwerem baz danych MySQL? Osobiście od kilku lat, używam utworzony specjalnie dla Joomla! rewelacyjny JAMP, którego autorem jest Michał Trzepizur, wiceprezes Fundacji PCJ Otwarte Źródła, której misją jest wspieranie polskiej społeczności Joomla!

Jeżeli korzystasz z innego oprogramowania, to jedyna różnica może polegać na lokalizacji folderu, do którego należy rozpakować pobrany wcześniej plik gantry-4.1.27-rocketlauncher_j33.zip.

Jeżeli także posiadasz JAMP'a, to w lokalizacji: Twój_Dysk:\Folder_z_programem_JAMP\mnt\var\www utwórz nowy folder, w którym umieścisz wszystkie pliki testowanego serwisu. Ja tworzę folder o nazwie: test-gantry.

Rozpakuj do tego folderu pobrany wcześniej plik gantry-4.1.27-rocketlauncher_j33.zip.

Lokalizacja folderu, do którego należy rozpakować plik gantry-4.1.27-rocketlauncher_j33.zip

Jeżeli wszystko zostało wykonane przez Ciebie jak należy, to w folderze, który utworzyłeś, aby przetestować framework Gantry (w moim przykładzie, to folder: test-gantry), powinna znajdować się struktura folderów i plików podobna, do tej pokazanej poniżej: 

Struktura folderów po rozpakowaniu pliku gantry-4.1.27-rocketlauncher_j33.zip

Uruchom swój lokalny serwer WWW, a następnie w przeglądarce wpisz adres: localhost/test-gantry. Jeżeli utworzyłeś własny folder, to zamiast test-gantry, wpisz nazwę tego folderu!

Jeżeli instalowałeś już kiedykolwiek Joomla! z serii 3, to zauważysz zapewne znajome opcje instalacyjne choć szata graficzna została nieco zmieniona. Zwróć uwagę, że teraz kolorystyka i logo pochodzą od RocketTheme ;-)

Poszczególne kroki instalacyjne możesz teraz wykonać według własnego uznania ;-) Jeżeli jednak jeszcze nie instalowałeś Joomla!, to przejdźmy ten etap wspólnie.

W polu Nazwa witryny wpisz dowolną nazwę - przecież to tylko witryna testowa! Ja wpisuję: Test Gantry ;-) Uzupełnij jeszcze kolejne obowiązkowe pola: Email administratora, Nazwa administratora, Hasło administratora oraz Powtórz hasło administratora a następnie kliknij przycisk Dalej.

Krok pierwszy instalacji pakietu Rocket Launcher (quickstart) frameworka Gantry

W drugim kroku instalacji Joomla! musisz podać podstawowe informacje dotyczące bazy danych, z którą będzie współpracował testowany serwis.

W pakiecie JAMP, nazwa użytkownika o najwyższych uprawnieniach, to: joomla oraz hasło: joomla. Jeżeli korzystasz z innego serwera WWW, te dane prawdopodobnie będą inne. Na przykład w pakiecie XAMPP, domyślnie dostęp do bazy danych nie jest chroniony hasłem, więc nie musisz przygotowywać bazy w jakiś szczególny sposób. Domyślnie użytkownikiem o najwyższych uprawnieniach, jest użytkownik o nazwie root.

Jeżeli tak jak ja, korzystasz z pakietu JAMP, to możesz wypełnić odpowiednie pola w podobny sposób:

  • w polu Typ bazy danych pozostaw pozycję: MySQLi;
  • w polu Nazwa serwera bazy danych wpisz: localhost;
  • w polu Nazwa użytkownika wpisz: joomla;
  • w polu Hasło wpisz: joomla;
  • w polu Nazwa bazy danych wpisz nazwę jaką chcesz, np. test-gantry
  • w polu Przedrostek dla tabel bazy danych system proponuje losowo generowany przedrostek. Przedrostek ten będzie umieszczany na początku każdej tworzonej tabeli w bazie danych. Pozostaw to pole w takim stanie, jaki proponuje instalator ;-)

Po wypełnieniu wszystkich pól, kliknij przycisk Dalej.

Konfiguracja bazy danych podczas instalacji pakietu RockedLauncher (Quickstart) frameworka Gantry

Pamiętaj, że instalujesz Joomla! na swoim własnym komputerze korzystając z lokalnego serwera WWW!

Instalując Joomla! na zdalnym serwerze (tzw. hosting) musisz posiadać takie dane jak: nazwa serwera (domyślnie u większości usługodawców będzie to localhost), nazwa użytkownika z uprawnieniami administracyjnymi do bazy danych, jego hasło a także nazwę bazy.

Ostatni krok instalacji, to ekran z informacjami dotyczącymi instalacji i wstępnej konfiguracji systemu. Jeżeli Twój serwer WWW jest prawidłowo skonfigurowany, to nie powinno być żadnych problemów, więc kliknij przycisk Instaluj, aby rozpocząć proces instalacji.

Ekran z informacjami dotyczącymi instalacji i wstępnej konfiguracji systemu 

Jeżeli po raz pierwszy instalujesz Joomla!, to zerknij np. do artykułu: Joomla! 3.2 - instalacjia i konfoguracja, aby dowiedzieć się więcej szczegółów dotyczących procesu instalacji.

Jeżeli chcesz, aby panel kontrolny Twojego serwisu (tzw. zaplecze) było wyświetlane w języku polskim, kliknij przycisk Dodatkowy krok: Instaluj języki.

Dodatkowy krok: Instaluj języki

Zaznacz na liście wybrany język (Polish), a następnie kliknij przycisk Dalej.

Instalacja pakiętów językowych

Zaznacz język Polski (PL), jako domyślny zarówno dla zaplecza, jak i dla witryny, a następnie kliknij przycisk Dalej.

Wybór języka polskiego jako języka domyślnego dla zaplecza i witryny

Kliknij przycisk Usuń katalog instalacyjny, a następnie przycisk Witryna, aby zobaczyć, jak prezentuje się Twój testowy serwis z zainstalowanym frameworkiem Gantry;-)

Zakończenie procesu instalacji serwisu testowego z frameworkiem Gantry

Jak zapewne zauważysz, od razu masz gotowy, niezwykle profesjonalny wygląd serwisu! To dlatego, że domyślnym szablonem jest szablon Gantry. Możesz z niego korzystać zupełnie za darmo!

Wygląd testowego serwisu po instalacji pakietu Rocket Launcher (quickstart)

Krok 3. Zdefiniuj podstawowe style szablonu

Zaloguj się do zaplecza Twojego testowego serwisu, kliknij w menu Rozszerzenia pozycję Szablony, a następnie na liście szablonów kliknij nazwę szablonu domyślnego: gantry - Default.

Edycja domyślnego szablonu gantry - Default

W oknie Templates Manager / Edit Style, kliknij zakładkę Style. Znajdziesz tutaj podstawowe opcje ustawień dla Twojego szablonu.

W wierszu Logo, masz do dyspozycji trzy pola:

  • Show - pozwala włączyć lub wyłączyć wyświetlanie pliku z logo;
  • Position - pozwala wybrać pozycję na której ma być wyświetlane logo;
  • Type - pozwala zdecydować, czy wyświetlić domyślny plik logo (Gantry Template), czy własny plik (Custom);

Aby wyświetlić własne logo, wybierz z pola Type pozycję: Custom, a następnie w polu Custom Logo kliknij przycisk Select i wczytaj lub od razu wskaż plik z logo i kliknij przycisk Wstaw.

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

W wierszu Link Color możesz zdecydować o kolorze wszystkich linków i przycisków w witrynie. Ja wybieram kolor: #bf0404.

W wierszu Font Settings wybierz z listy Font Family krój czcionki, natomiast z listy Font Size, jej rozmiar. Ja wybrałem czcionkę Cuprum z sekcji Google Fonts oraz rozmiar: Large.

Na koniec kliknij niebieski przycisk Save i sprawdź, czy wprowadzone zmiany widoczne są w witrynie.

Opcje ustawień w menu Style szablony gantry

Krok 4. Włącz, lub wyłącz wyświetlanie dodatkowych elementów 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.

W wierszu Date możesz zdecydować, czy chcesz, aby w Twoim serwisie wyświetlana była data. Jeżeli tak, to w polu Show kliknij przełącznik w pozycję: ON, następnie wybierz z listy Position, pozycję, na której ma zostać wyświetlona data. W polu Client-Site Date możesz wybrać z listy format wyświetlania daty. Ja włączam wyświetlanie daty, wybieram pozycję: top-a oraz format daty: Czwartek 22 styczeń 2015.

W wierszu Font-Sizer zdecyduj, czy przełącznik zmieniający wielkość czcionek powinien być widoczny w witrynie, natomiast za pomocą listy Position wybierz pozycję na której ma być on wyświetlany. W moim przykładzie włączam ten przełącznik i umieszczam go na pozycji top-d.

W wierszu: Branding, za pomocą przełącznika włącz lub wyłącz wyświetlanie logo frameworka Gantry. Kiedy zdecydujesz, aby był on wyświetlany, z listy Position wybierz pozycję, w której ma on być widoczny (domyślnie: copyright-a). Ja wyłączam wyświetlanie logo frameworka Gantry.

W wierszu Copyright za pomocą przełącznika Show zdecyduj, czy chcesz wyświetlić dodatkowe informacje dotyczące praw autorskich. Z listy Position wybierz pozycję na której te informacje mają się wyświetlać, a w polu Text wpisz odpowiednie informacje. Włączam tą opcję, umieszczam na pozycji copyright-b i w pole Text wpisuję: Implemented by <a href="http://www.slawop.net">slawop.NET</a>

W wierszu To-Top Scroller, włącz lub wyłącz wyświetlanie przycisku umożliwiającego przejście do początku (góry) przeglądanej strony. Z listy Position wybierz pozycję, na której ten przycisk ma się wyświetlać, a w polu Text wpisz tekst przycisku. Włączam tą opcję, umieszczam na pozycji: bottom-d i w polu Text wpisuję: Do Góry.

W wierszu System Messages zdecyduj o wyświetlaniu komunikatów systemowych i pozycji, na której mają one być wyświetlane. Nie zalecam wyłączania tego pola, ponieważ wówczas użytkownikowi nie będą wyświetlane żadne informacje, np. o wysłaniu wypełnionego formularza, lub nieprawidłowym logowaniu itp.

Wiersz Reset Settings służy do wyświetlania linku, który powoduje zresetowanie wszystkich plików cookies i powrót do domyślnych ustawień szablonu. Opcja ta ma zastosowanie wówczas, gdy na przykład udostępniasz użytkownikom możliwość wyboru różnych wersjii kolorystycznych swojego serwisu. Na razie pozostaw te opcje ustawione domyślnie.

W wierszu Google Analytics możesz za pomocą przełącznika włączyć lub wyłączyć działanie skryptu Google Analytics, natomiast w polu UA Code wpisz kod wygenerowany dla Twojej witryny. Ponieważ obecnie tylko testujesz framework Gantry i działasz lokalnie, proponuję pozostawić domyślne ustawienia w tym wierszu.

Zakładka Features w ustawieniach szablonu Gantry

Krok 5. Włącz, lub wyłącz wyświetlanie 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 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. Osobiście uważam, że zdecydowanie lepiej prezentuje się menu po wybraniu typu: Dropdown-Menu. Dlaczego? Zobacz jak wygląda przykład możliwości menu przedstawianego w ten sposób:

Przykład menu wyświetlanego za pomocą szablonu gantry

W wierszu Select a Menu wybierz z listy menu, które ma być wyświetlane, jako menu poziome.

W wierszu Position wybierz z listy pozycję, na której to menu ma być wyświetlane.

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:

Wygląd menu typu: Panel

Jeżeli wybierzesz z listy pozycję Selectbox, po kliknięciu menu będzie wyświetlane w formie listy pozycji:

Wygląd menu typu: 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.

Na koniec kliknij przycisk Save, aby zapisać wprowadzone zmiany.

Ustawienia w zakładce Menu szablonu Gantry

To dopiero połowa dostępnych ustawień szablonu Gantry opartym o framework Gantry :-)

W kolejnej części pokażę niezwykle przydatną opcję: Layouts, dzięki której możesz niemal dowolnie konfigurować układ poszczególnych elementów Twojego serwisu. Do dyspozycji masz 65 pozycji modułów oraz 38 różnych kombinacji dla pozycji MainBody i Slidebars.

To daje na prawdę spore możliwości budowania bardzo rozbudowanych serwisów!

 

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Własny szablon dla Joomla!? Z Gantry to proste! - ...
Szablony dla Joomla!, strony OnePage i Social Medi...

Podobne wpisy

 

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