Jak nie dotykając kodu, stworzyć własny szablon dla Joomla!? EF4 cz.3

Jak nie dotykając kodu, stworzyć własny szablon dla Joomla!? EF4 cz.3

Masz serwis oparty o Joomla! 3 i chcesz utworzyć dla niego własny, unikalny szablon, ale czujesz, że Twoje umiejętności programowania nie są na takim poziomie, aby to było możliwe?

Nie musisz się już martwić! Obecne technologie pozwalają utworzyć własny szablon, nawet osobom, które na kodowaniu nie znają się wcale!

Co więcej! Utworzony dzięki nim szablon będzie zgodny z obowiązującymi standardami. 

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

Ponieważ do tej pory miałem utworzony przykładowy serwis wykonany jako przykład dla Joomla! 2.5. Praktyczny kurs, trzeba go było zaktualizować do Joomla! 3. Przy okazji pracy nad tym artykułem skorzystają wszyscy, którzy kupili książkę oraz e-book, a także uczestnicy DARMOWEGO Kursu Joomla! 2.5, będą mogli płynnie przejść na Joomla! 3 i cieszyć się nowymi funkcjonalnościami, ponieważ przygotowałem także specjalny tutorial dotyczący aktualizacji Joomla! 2.5 do Joomla! 3: Jak zaktualizować Joomla! 2.5 do Joomla! 3.x?

No i dzięki temu mam gotowy serwis do tego artykułu ;-)

A więc ... do rzeczy! zabieraj się do pracy!

Zobacz, jak prezentuje się mój przykładowy serwis poświęcony recenzjom książek i e-booków na temat e-biznesu i rozwoju osobistego:

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

Pokażę Ci krok po kroku, jak osiągnąć efekt taki:

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

Niezłą metamorfoza co? No to zabieram się do tworzenia nowego szablonu!

Krok 1. Pobierz framework EF4 i szablon JM-Services

Cały proces pobierania potrzebnych plików znajdziesz w pierwszej części serii artykułów poświęconych EF4: Jak stworzyć szablon nie dotykając kodu? EF4 cz.1. Zerknij do tego artykułu i zapoznaj się dokładnie z krokiem 1 :-)

Krok 1 w artykule: Jak stworzyć szablon nie dotykając kodu? EF4 cz.1

Krok 2. Zainstaluj framework EF4 i szablon JM-Services

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 plik: plg_EF4-framework.zip. Na koniec kliknij przycisk Wczytaj plik i zainstaluj.

Instalacja framework'a EF4

Dokładnie w taki sam sposób zainstaluj szablon JM-Services (plik: jm-services.zip).

Teraz musisz włączyć framework EF4. Kliknij w menu Rozszerzenia pozycję Dodatki, a następnie z filtra Wybierz typ, wybierz pozycję system. Odszukaj na liście dodatku: EF4 Joomla-Monster Framework i kliknij po jego lewej stronie ikonkę z czerwonym kółkiem z białym krzyżykiem, która symbolizuje, że dodatek nie jest opublikowany (jest wyłączony). Jeżeli w Twoim przypadku wyświetlana jest ikonka z zielonym znaczkiem (ptaszkiem), to nie musisz nic robić ;-)

Włączenie frameworka EF4

Krok 3. Ustaw szablon JM-Services, jako szablon domyślny

Aby zorientować się, jak Twój serwis wygląda z domyślnymi ustawieniami szablonu JM-Services, kliknij w menu Rozszerzenia, pozycję Szablony, a następnie na liście odszukaj: jm-services - domyślny, 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 JM-Services, jako szablonu domyślnego

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

Wygląd serwisu po zdefiniowaniu szablony JM-Services jako domyślnego

Krok 4. Pobierz dodatkowe rozszerzenia: DJ-Menu i DJ-ImageSlider

Otwórz w Twojej przeglądarce serwis DJ-Extensions.com. Jeżeli odwiedzasz go po raz pierwszy, zarejestruj się korzystając z linka: [sign up], lub kliknij link [login], aby się zalogować.

Logowanie do serwisu DJ-Extensions.com

Po zalogowaniu, kliknij link Downloads, a następnie Downloads, a następnie w menu Downloads for kliknij pozycję DJ-Menu

Menu Downloads w serwisie DJ-Extensions

W kolejnym oknie kliknij przycisk Download i zapisz plik w dowolnej lokalizacji na Twoim komputerze!

Pobieranie plików instalacyjnych rozszerzenia DJ-Menu

W podobny sposób pobierz rozszerzenie: DJ-ImageSlider.

Pobieranie rozszerzenia DJ-ImageSlider

Krok 5. Zainstaluj rozszerzenia DJ-Menu i DJ-ImageSlider

Aby zainstalować oba rozszerzenia postępuj dokładnie w taki sam sposób, jak podczas instalacji szablonu JM-Services i framework'a EF4 w kroku 2.

Krok 6. Basic settings (JM-Services)

W manadżerze szablonów (menu Rozszerzenia -> Szablony), na liście szablonów kliknij nazwę: jm-serwices - domyślny. W oknie Szablony: Edytuj styl kliknij w menu po lewej stronie pozycję Basic settings. Znajdziesz tutaj podstawowe opcje ustawień dla Twojego szablonu.

Ponieważ nie posiadam pliku graficznego z logo serwisu, w polu Logo text wpisuję tekst, który będzie wyświetlany zamiast grafiki. W moim przypadku wpisuję: RECENZJE.

Jeżeli masz grafikę logo Twojego serwisu, w polu Logo kliknij przycisk WYBIERZ, a następnie wczytaj lub od razu wskaż plik z logo i kliknij przycisk Wstaw.

W polu Site description wpisz slogan swojego serwisu. Ja wpisuję: e-biznes, motywacja, sukces! Pamiętaj, że tekst wpisany w tym polu będzie widoczny zarówno wtedy, kiedy w polu Logo zdefiniujesz jakiś plik graficzny, jak i wówczas, gdy zamiast pliku graficznego będzie wyświetlany tekst wpisany w polu Logo text.

Ponieważ chciałbym, aby nad obszarem z treścią artykułów wyświetlany był przełącznik zmieniający wielkość wyświetlanych w treści czcionek, to w polu Font size switcher klikam przycisk ENABLED. Pole Back to top button pozostawiam włączone (ENABLED), ponieważ uważam, że niewielki półprzeźroczysty przycisk pojawiający się na dole ekranu, pozwalający na szybki powrót do początku (góry) strony, to dobry pomysł!

W polu Favicon image wybierz plik graficzny, który będzie stanowił ikonę ulubionych (czasami nazywany ikoną witryny). Plik ten będzie wyświetlany w polu adresowym z lewej strony adresu witryny oraz po lewej stronie na liście zakładek przeglądarki internetowej obok tytułu strony. Pozwala on internaucie upewnić się, że znajduje się na właściwej witrynie. Plik ten – powinien być zapisany w formacie ico i posiadać rozmiary 16x16 lub 32x32 pikseli. Jeżeli Twój plik zapisany jest w innym formacie (png lub jpg) i ma nieco większe rozmiary, EF4 zadba o to, aby został on skonwertowany do prawidłowego formatu oraz rozmiarów.

Ustawienia Basic settings w szablonie JM Services

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

Wyglą serwisu po zmianach w Basic Settings

Krok 7. Template layout (JM-Services)

Pora na zdefiniowanie podstawowego układu strony. W oknie Szablony: Edytuj styl kliknij w menu po lewej stronie pozycję Template layout.

Układ szablonu opiera się na siatce z Bootstrap 2, jednak ekipa z DJ-Projekty poprawiła płynność siatki, aby była podobna do tej, która jest stosowana w Bootstrap w wersji 3.

W polu Template width zdefiniuj szerokość szablonu. Możesz użyć wartości absolutnych, podawanych w pikselach (px) lub relatywnych, podawanych w procentach. Ja wpisuję: 100%. Jeżeli pozostawisz to pole puste, to domyślną wartością będzie 1170px.

W polu Gutter size określ przestrzeń pomiędzy blokami, modułami i innymi elementami na stronie. Ja wpisuję: 25px.

W polu Left column width zdecyduj o ilości kolumn w siatce dla lewej kolumny szablonu. Ja zostawiam pozycję domyślną: Span3 (3 grid columns).

W polu Right column width zdecyduj o ilości kolumn w siatce dla lewej kolumny szablonu. Ja wybieram z listy, pozycję: Span4 (4 grid columns).

Nie bardzo wiesz, o co chodzi? Zerknij do artykułu: Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2. W punkcie: Template Layout pokazuję kilka przykładów związanych z ustawieniami lewej i prawej kolumny.

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 pozycji Responsive layout pozostaw włączoną opcję ENABLED.

Jeżeli chcesz, aby na stronie startowej (lub jakiejkolwiek innej) wyświetlane były tylko same moduły (bez np. artykułów), to w polu Disable component zaznacz właściwą pozycję menu. Najczęściej dotyczy to tzw. strony startowej serwisu, która ma zachęcać internautę do zagłębienia się w jego zasoby ;-). W moim przykładzie zrobię podobnie, wobec tego zaznaczam w menu: menuglowne, pozycję Start.

Ustawienia Template layout w szablonie JM-Services

Zapisz swoje ustawienia klikając przycisk Zapisz 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ń Template layout w szablonie JM-Services

Krok 8. Layout builder (JM-Services)

Zanim przejdziesz do definiowania ustawień modułów, które mają być widoczne na stronie startowej i innych podstronach serwisu, najpierw zdecyduj, jaki układ szablonu chcesz uzyskać.

W oknie Szablony: Edytuj styl, kliknij w menu po lewej stronie pozcyję Layout builder. To jedna z najciekawszych opcji framework'a EF4,  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 EF4: Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2.

Utwórz własny układ i dopiero wówczas zajmij się dokonywaniem zmian. Aby to zrobić kliknij przycisk COPY LAYOUT, w okienku Layout copy wpisz własną nazwę układu (ja wpisuję: recenzje-layout1), a następnie kliknij zielony przycisk Copy layout. Teraz możesz zająć się zmianami w swoim układzie!

Najpierw zajmij się ogólnym układem szablonu. 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 Layout builder

Zapisz ustawienia układu szablonu klikając przycisk Zapisz i zamknij. Dlaczego wychodzę z ustawień szablonu? O tym w kolejnym kroku ;-)

Krok 9. Top Menu

Przede wszystkim spraw, aby moduł z menu głównym serwisu został wyświetlony w pozycji: topimenu-nav. Zatem wyświetl menadżera modułów (menu Rozszerzenia -> Moduły) odszukaj moduł o nazwie: DJ-Menu i kliknij jego nazwę, aby przejść do okna umożliwiającego edycję jego ustawień.

Menadżer modułów z modułem DJ-Menu

Teraz w polu Tytuł wpisz tytuł własny tytuł modułu, ja wpisuję: Top Menu. W polu Menu Name, wybierz z listy menu, które będzie wyświetlane w tym module, w polu Theme wybierz pozycję: - override from template -, następnie w polu Display SELECT for small screens kliknij przycisk Tak, jeżeli planujesz, aby w menu górnym nad napisami wyświetlały się także ikonki graficzne. W polu Pokaż tytuł kliknij przycisk Ukryj, w polu Pozycja wybierz z listy pozycję: Top Menu [top-menu-nav], a następnie w polu Stan wybierz z listy pozycję Opublikowano. Kliknij kartę Przypisz do pozycji menu, aby ustawić opcję powodującą wyświetlanie modułu na wszystkich stronach.

Konfiguracja modułu DJ-Menu

W polu Zasada przypisania wybierz z listy pozycję Na wszystkich stronach, a następnie kliknij przycisk Zapisz i zamknij.

Ustawienie zasady przypisania modułu DJ-Menu

Sprawdź teraz, jak prezentuje się Twój serwis. W moim przykładowym serwisie, wygląda to tak:

Wygląd serwisu po włączeniu modułu DJ-Menu

W moim przypadku, menu zawiera zbyt dużo pozycji. Jeżeli u Ciebie jest podobnie, przemyśl, które pozycję są najważniejsze, niezbędne, a które możesz umieścić w innym menu, które będzie wyświetlane, np. w module po prawej stronie. W moim przypadku, pozycje: Wyszukiwarka i Mapa serwisu, mogę spokojnie umieścić w innym miejscu serwisu ;-)

Teraz menu mojego serwisu prezentuje się znacznie lepiej:

Wygląd menu po wyłaczeniu dwóch pozycji

Jeżeli chcesz, aby w menu górnym nad napisami wyświetlały się także ikonki graficzne, przygotuj pliki o rozmiarach 32x32 px umieść je w folderze images. Możesz także skorzystać z plików przygotowanych przez DJ-Projekty. Znajdziesz je w pakiecie quickstart. Piszę o nim w artykule: Jak stworzyć szablon nie dotykając kodu? EF4 cz. 1. Po rozpakowaniu pliku quickstart.zip, pliki do menu górnego znajdziesz w lokalizacji: images/djmenu.

Ja przygotowałem dla swojego serwisu własne pliki i umieszczam je podobnie jak w pakiecie quickstart w folderze images/djmenu.

Pliki graficzne do wyświetlenia w Tom Menu

Teraz do każdej pozycji w menu przypisz odpowiedni obrazek. Jak to zrobić? Kliknij w menu Menu, nazwę menu, które wyświetlane jest w module Top 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ę Opcje pozycji menu a następnie w polu Grafika w menu kliknij przycisk Wybierz i w oknie modalnym kliknij grafikę, którą chcesz wyświetlić w tej pozycji menu. Kliknij przycisk Wstaw i na koniec 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 grafikami

Krok 10. DJ-ImageSlider

Jeżeli pod menu chcesz umieścić efektowny slider, to zerknij do artykułu DJ Image Slider, w którym pokazuję, jak skonfigurować komponent oraz moduł, a także omawiam niemal wszystkie opcje konfiguracyjne.

A teraz w skrócie, co robię w swoim przykładowym serwisie. Najpierw w komponencie DJ-ImageSlider (menu Komponenty -> DJ-ImageSlider), tworzę nową kategorię o nazwie: Slider.

Tworzenie nowej kategorii w komponencie DJ-ImageSlider

Następnie tworzę kilka slajdów z wcześniej przygotowanymi grafikami w rozmiarach: 770x400 px, które umieściłem w lokalizacji: images/djimageslider/header.

Tworzenie nowego slajdu w komponencie DJ-ImageSlider

Aby wyświetlać slajdy zdefiniowane w komponencie, trzeba teraz skonfigurować moduł DJ-ImageSlider. Otwórz zatem menadżera modułów (menu Rozszerzenia - > Moduły), a następnie kliknij na liście modułów moduł o nazwie: DJ-ImageSlider.

Skonfiguruj moduł według własnych potrzeb. Dla potrzeb mojego przykładowego serwisu, konfiguracja modułu DJ-ImageSlider, wygląda następująco:

Konfiguracja modułu DJ-ImageSlider

Zdecyduj, kiedy moduł powinien być wyświetlany wybierając odpowiednią opcję w polu Zasada przypisania (karta Przypisz do pozycji menu). W moim przykładzie slider będzie wyświetlany tylko na stronie startowej:

Przypisanie modułu DJ-ImageSlider do wybranych pozyji menu

Kliknij jeszcze kartę Wzbogacone i ustaw szerokość opisu slajdu (Description width) oraz jego położenie w pionie (Description vertical position) i poziomie (Description horizontal position). Możesz także przygotować własne przyciski nawigacyjne oraz zdefiniować ich położenie. W sekcji SLIDE EFFECTS OPTIONS zdefiniujesz opcje dotyczące efektu animacji slajdów a także czasu zmieniania się slajdów. W moim przykładzie zmieniam tylko ustawienia w sekcji CUSTOMISE SLIDE DESCRIPTION:

Ustawienia położenia opisu slajdów w module DJ-ImageSlider

Kliknij przycisk Zapisz, a następnie sprawdź jak slider prezentuje się w Twoim serwisie. U mnie wygląda on tak:

Wyglą slidera po opublikowaniu modułu DJ-ImageSlider

Wolałbym, aby opis do slajdu pokazywał się obok slajdu. W dokumentacji szablonu JM-Services znajdziesz opisy sufiksów dla poszczególnych modułów. Dla slidera wyświetlanego za pomocą modułu DJ-ImageSlider, autorzy szablonu przygotowali sufiks o nazwie: slider1-ms. 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.

Jak użyć sufiksu dla modułu? Kliknij zakładkę Other Options w module DJ-ImageSlider i w polu Przyrostek klas CSS modułu, wpisz: slider1-ms. Zapisz ustawienia i sprawdź teraz jak prezentuje się slider w Twoim serwisie. Ponieważ domyślnie każdy moduł posiada ramkę i jest wyświetlany na białym tle, chciałbym, aby mój slider był pozbawiony ramki i tła, Wobec tego mogę użyć dodatkowego sufiksu: blank-ms, który wystarczy dodać w polu Przyrostek klas CSS modułu.

Definiowanie przyrostka klas dla modułu DJ-ImageSlider

U mnie ta drobna zmiana spowodowała zdecydowanie fajniejszy wygląd slidera:

Wygląd slidera po dokonaniu zmian w polu Przyrostek klas CSS

Krok 11. Color Boxes

Twórcy szablonu JM-Services utworzyli trzy bardzo efektownie animowane moduły (tzw. Color Boxes), dzięki którym możesz wyeksponować pewne treści swojego serwisu. W wersji demostracyjnej znajdują się one zaraz pod sliderem.

Wystarczy, że utworzysz własne tytuły, grafiki i krótki opis, aby takie moduły znalazły się w Twoim serwisie.

W przypadku mojego przykładowego serwisu, potrzebuję dwa takie moduły. Jeden będzie zachęcał do przeczytania artykułów dotyczących finansów, drugi natomiast do recenzji książek na temat psychologii sukcesu.

Aby utworzyć własny moduł Color Box, 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 wpisuję: Finanse (Color Box), a następnie w edytorze kliknij przycisk Kod źródłowy.

Tworzenie nowego modułu, tzw. Color Box

W oknie modalnym wklej kod pokazany poniżej, a następnie zmień wpisy w odpowiednich miejscach.

<p style="margin: 0;">
<a class="jm-color-box1 text-center" href="#">
<span class="jm-icon-title">
TIME MACHINE
</span>
<span class="jm-icon-image">&nbsp;</span>
<span class="jm-icon-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</a>
</p>

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

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

  • hiperłacze, które po kliknięciu Color Box'aprzeniesie internautę w inne miejsce serwisu;
  • Tytuł wyświetlany w Color Box'sie;
  • Krótki opis;

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

<p style="margin: 0;">
<a class="jm-color-box1 text-center" href="/http://www.twojserwis.pl/jakas_strona">
<span class="jm-icon-title">
TWÓJ TYTUŁ
</span>
<span class="jm-icon-image">&nbsp;</span>
<span class="jm-icon-desc">Twój własny opis</span>
</a>
</p>

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 Twój Color Box. W moim przypadku, to: Top1 [top1-1]. W polu Stan wybierz z listy pozycję Opublikowany, a następnie kliknij zakładkę Przypisz do pozycji menu.

Tworzenie nowego modułu Color Box

Zdecyduj, kiedy moduł powinien być wyświetlany wybierając odpowiednią opcję w polu Zasada przypisania. W moim przykładzie Color Boxes 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: blank-ms. Dzięki temu moduł będzie wyświetlał się bez ramki i tła domyślnego dla każdego modułu. Zapisz wszystkie ustawienia klikając przycisk Zapisz i zamknij.

Definiowanie przyrostka klas CSS modułu

W podobny sposób utwórz kolejny moduł Color Box, tylko wklej trochę inny kod:

<p style="margin: 0;">
<a class="jm-color-box2 text-center" href="http://www.twojserwis.pl/jakas_strona">
<span class="jm-icon-title">
TWÓJ TYTUŁ
</span>
<span class="jm-icon-image">&nbsp;</span>
<span class="jm-icon-desc">Twój własny opis.</span>
</a>
</p>

Pamiętaj także, aby w razie potrzeby zdefiniować inną pozycję dla tego modułu. W moim przykładzie, to: Top1 2 [top1-2].

Trzeci Color Box powinien mieć następujący kod:

<p style="margin: 0;">
<a class="jm-color-box3 text-center" href="http://www.twojserwis.pl/jakas_strona">
<span class="jm-icon-title">
TWÓJ TYTU
</span>
<span class="jm-icon-image">&nbsp;</span>
<span class="jm-icon-desc">Twój własny opis.</span>
</a>
</p>

Zwróć uwagę, że różnią się one nazwą klasy hiperłącza (a class="jm-color-box"). Ponieważ grafiki wyświetlane w tych Color Box'ach zdefiniowane są za pomocą arkuszy stylów CSS, ich lokalizacja znajduje się w folderach szablonu: /templates/jm-services/images.

Dla modułu, którego nazwa klasy dla hiperłącza to: jm-color-box1, będzie wyświetlał grafikę o nazwie: color-icon1.png. Odpowiednio dla klasy: jm-color-box2 będzie wyświetlana grafika: color-icon2.png, natomiast dla klasy: jm-color-box2, grafika: color-icon3.png.

Jeżeli chcesz wykorzystać inne grafiki, wystarczy, że przygotujesz odpowiednie pliki i podmienisz ich nazwy!

Na potrzeby mojego przykładowego serwisu, przygotowałem inną grafikę dla modułu pierwszego o nazwie: Finanse (Color Box).

Zobacz teraz jak prezentuje się Twój serwis. Mój wygląda tak:

Wygląd pzrykładowego serwisu po dodaniu modułów Color Boxes

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

Pora popracować nad ułożeniem poszczególnych modułów. 

W zależności od Twoich potrzeb, 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ą ;-)

Na samej górze strony mam jeszcze dwie wolne pozycje: top-bar1 i top-bar2. Do pierwszej z nich przypisałem istniejący moduł o nazwie: Wyszukiwarka indeksująca, natomiast do drugiej moduł logowania.

Mój serwis miał już wcześniej utworzone moduły wyświetlające najnowsze oraz najpopularniejsze artykuły. Wobec tego pierwszy z nich - moduł typu Nowości, umieściłem na pozycji bottom1-1, natomiast drugi - moduł typu Popularne - na pozycji: bottom1-2.

Kolejny moduł utworzony wcześniej na podstawie rozszerzenia SP Facebook, wyświetla ikonki grafik profilowych użytkowników Facebook'a, którzy kliknęli przycisk Lubię to fanpage serwisu. Dla tego modułu doskonale nadaje się pozycja bottom2-1.

Teraz pora na stopkę serwisu. Zaplanowałem wcześniej dla tej części serwisu trzy pozycje. W jednej z nich (footer-mod-1) umieściłem moduł typu Reklamy wyświetlający grafiki partnerów współpracujących z serwisem. W drugiej: footer-mod-1 umieściłem moduł typu Zakładki, wyświetlający zakładki do wydawnictw oferujących recenzowane w serwisie książki i e-booki.

Jeden z dwóch modułów jakie dodatkowo utworzyłem, to moduł typu Popularne etykiety, który wyświetla chmurę tagów. Moduł ten nazwałem Tagi i przypisałem do niego pozycję: footer-mod-3. Oczywiście, aby tagi te były wyświetlane, wcześniej należy je utworzyć i przypisać do artykułów ;-)

Drugi moduł utworzony na potrzeby nowego szablonu, to moduł typu Własny HTML. Wyświetla on informacje dotyczące praw autorskich i przypisany jest do pozycji copyrights.

Moja strona startowa 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ż gotowa i wygląda tak:

 Wygląd strony startowej ze wszystkimi modułami

Wystarczy teraz zdefiniować pozycje pozostałych modułów, które powinny wyświetlać się na poszczególnych podstronach i gotowe ;-)

W moim przykładowym serwisie sytuacja wygląda tak:

  • Moduł Social - nowy moduł typu Własny HTML, którego zadaniem jest wyświetlanie przycisków do wybranych portali społecznościowych;

Twórcy szablonu JM-Services przygotowali odpowiedni kod CSS, dzięki któremu możesz wyświetlić animowane przyciski do portali społecznościowych. Moduł z tymi przyciskami zobaczysz w wersji demostracyjnej w stopce po prawej stronie.

Aby utworzyć własny moduł wyświetlający te przyciski, 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łów Color Boxes.

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

<div class="jm-socials">
<a class="facebook" href="#">&nbsp;</a>
<a class="googleplus" href="#">&nbsp;</a>
<a class="twitter" href="#">&nbsp;</a>
<a class="linkedin" href="#">&nbsp;</a>
<a class="skype" href="#">&nbsp;</a>
<a class="vimeo" href="#">&nbsp;</a>
</div>

W moim przypadku użyłem czterech przycisków: Facebook, Google+, Twitter i LinkedIn.

Aby moduł ten pozbawiony był ramki i tła podczas edycji modułu, na karcie Wzbogacone, w pozycji Przyrostek klas CSS modułu, wpisałem: blank-ms.

  • 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;
  • Moduł SZCZEGÓLNIE POLECAM, to moduł typu Reklamy wyświetlający grafiki pozycji szczególnie polecanych przez autora (autorów) recenzji;
  • 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ą;
  • 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;
  • Moduł Recenzowane książki wyświetla losowo grafiki recenzowanych książek;

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

 Wygląd 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 kolorów oraz czcionek ;-)

Szczegółowy opis wszystkich opcji znajdziesz w artykule: Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2.

Krok 13. Font settings (JM-Services)

Aby dokonać zmian wielkości i krojów czcionek, w manadżerze szablonów (menu Rozszerzenia -> Szablony), na liście szablonów kliknij nazwę: jm-serwices - domyślny. W oknie Szablony: Edytuj styl kliknij w menu po lewej stronie pozycję Font settings.

Jeżeli zechcesz wrócić do ustawień domyślnych dla poszczególnych opcji, to po prostu usuń z wybranego pola wprowadzone przez Ciebie ustawienia.

Zobacz, jakie zmiany dotyczące czcionek zastosowałem w swoim serwisie:

BASE FONT
Font size: 14 px
Font type: Font from the list
Font family: Verdana, Geneva, Arial, Helvetica, sans-serif

HORIZONTAL MENU
Font size: 18 PX
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Actor:400,300,300italic,400italic,700,700italic,900,900italic&subset=latin,latin-ext
Google webfont family: 'Actor', 'sans-serif'

MODULE HEADINGS
Font size: 24 px
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Cuprum:400,300,300italic,400italic,700,700italic,900,900italic&subset=latin,latin-ext
Google webfont family: 'Cuprum', 'sans-serif'

ARTICLE HEADINGS
Font size: 28 px
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Cuprum:400,300,300italic,400italic,700,700italic,900,900italic&subset=latin,latin-ext
Google webfont family: 'Cuprum', 'sans-serif'

ADVANCED SETTINGS
Font size: 40 px
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Monoton:400,300,300italic,400italic,700,700italic,900,900italic
Google webfont family: 'Monoton', 'sans-serif'
Selectors: #jm-logo

Krok 14. Color modifications (JM-Services)

Aby zmienić ustawienia kolorów, w oknie Szablony: Edytuj styl kliknij w menu po lewej stronie pozycję Color modufications.

Jeżeli zechcesz wrócić do ustawień domyślnych dla poszczególnych opcji, to podobnie jak w przypadku ustawień czcionek, po prostu usuń z wybranego pola wprowadzone przez Ciebie ustawienia.

Zobacz, jakie zmiany dotyczące kolorów zastosowałem w swoim serwisie:

SCHEME COLOR
Main color: (default)

GLOBAL
Page background: #fafcfe
Component background: (default)
Component border: #e0e9fa
Base font color: #3d3d3d
Article title color: #121111

TOP BAR
Background: (default)
Border: #e9eefb
Font color: #5d6464

TOPMENU BAR
Background: (default)
Border: #e0e9fa
Font color: #595454

MODULES
Module background: (default)
Module border: #e9effb
Module font color: #4a4444
Color box 1: (default)
Color box 2: #e84141
Color box 3: (default)

FOOTER
Background: #e0e9fa
Border: #b9cef3
Font color: #5c5555

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

Wygląd strony startowej po zakończeniu prac

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

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

Mam nadzieję, że potrafisz już wykorzystać framework EF4 i szablon JM-Services do stworzenia szablonu dla własnego serwisu!

Zauważ, że wszystko, co Ci pokazałem było możliwe praktycznie bez znajomości jakiegokolwiek programowania. Prostota i łatwość w użyciu, a przy tym dużo możliwości szybkiej modyfikacji wielu ustawień szablonu, to główna cecha frameworka EF4.

Z niecierpliwością czekam na Twoją opinię dotyczącą tego narzędzia! Jeżeli dzięki moim instrukcjom udało się Tobie stworzyć własny szablon, to już czuję się dumny, ale jeżeli jeszcze się tym faktem pochwalisz i podzielisz swoimi spostrzeżeniami umieszczając swój komentarz pod tym artykułem, to będę miał pewność, że to co robię ma sens ;-)

To była ostatnia część serii artykułów dotyczących frameworka EF4. 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 ;-)

W najbliższym czasie opublikuję e-book dotyczący tego zagadnienia. Jeżeli 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?

Szablony dla Joomla!, strony OnePage i Social Medi...
Ostatnie wydanie Joomla! 2.5.28

Podobne wpisy

 

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