A A A

Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2

przez w Webdesign
  • Przeczytano: 25082
  • 27 komentarze
  • Drukuj
25082
Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2

Chcesz mieć własny, unikalny szablon dla swojego serwisu opartego o CMS Joomla!, ale nie bardzo znasz się na kodowaniu?

Oczywiście - jest to możliwe!

W pierwszej części artykułów poświęconych tworzeniu własnych szablonów dla Joomla! w oparciu o framework EF4 - Jak stworzyć szablon nie dotykając kodu? EF4 cz.1, pokazałem Ci, jak korzystać z Theme Customizera, który jest nieodłączną częścią tego frameworka.

Dzisiaj poznasz framework EF4 od środka... czyli od zaplecza ;-)

Przypomnę tylko, że tytułowy bohater, to produkt polski, prosto spod palców ekipy Joomla_Monster.com. Ważne jest to, że jest całkowicie DARMOWY! Możesz z niego korzystać i wykorzystywać do woli ;-)

W pierwszej części pokazałem Ci, jak zainstalować i przetestować serwis z zaimplementowanymi przykładowymi szablonami oraz dodatkowymi rozszerzeniami (tzw. quickstart), a następnie pokazałem Ci możliwości Theme Customizera, dzięki któremu, bezpośrednio z poziomu witryny, możesz dosłownie kilkoma kliknięciami zmienić kolory oraz ustawienia czcionek i od razu mieć podgląd dokonanych zmian.

W takim razie... DO ROBOTY!

Theme Customizer

Przypominam, że za pomocą Theme Customizera zmieniony został domyślny wygląd szablonu JM Services. Teraz wygląda on podobnie jak na rysunku poniżej:

{edsanimate_animated_zoomIn_eds-on-scroll}Wygląd szablonu po dokonaniu zmian za pomocą Theme Customizer'a{/edsanimate}

Zobaczmy, zatem jakie opcje kryje framework EF4.

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: jm-services - Default.

Edycja domyślnego szablonu jm-services - Default

Basic settings

W oknie Szablony: Edytuj styl, kliknij w menu po lewej stronie pozycję Basic settings. Znajdziesz tutaj podstawowe opcje ustawień dla Twojego szablonu.

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

Jeżeli nie posiadasz pliku graficznego lub po prostu nie chcesz, aby w tym miejscu wyświetlany był plik graficzny, w polu Logo kliknij przycisk X a następnie w polu Logo text wpisz tekst, który chcesz, aby był wyświetlany zamiast grafiki. Ja wpisuję: EF4 ;-)

W polu Site description wpisz slogan swojego serwisu. Ja wpisuję: Ekstra framework dla Joomla! 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.

Jeżeli chcesz, 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 kliknij przycisk ENABLED w przeciwnym wypadku pozostaw włączoną opcję: DISABLED.

Bardzo wygodną opcją jest specjalny przycisk, pojawiający się najczęściej w dolnym obszarze strony podczas jej przewijania. Pozwala on na szybki powrót do początku (góry) strony. Jeżeli chcesz, aby ten przycisk pojawiał się w Twoim serwisie, w polu Back to top button kliknij przycisk ENABLED, w przeciwnym wypadku, kliknij przycisk DISABLED.

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.

Basic settings w szablonie JM Services

Na koniec kliknij przycisk Zapisz i zobacz teraz jak wygląda serwis testowy po prowadzonych zmianach:

Wygląd serwisu po zmianach w Basic settings

Wygląd serwisu po zmianach w Basic settings 

Template layout

W oknie Szablony: Edytuj styl, kliknij teraz w menu po lewej stronie pozycję Template layout. Znajdziesz tutaj podstawowe opcje związane z układem szablonu.

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 zostawiam domyślną wartość: 1170px.

W polu Gutter size określ przestrzeń pomiędzy blokami, modułami i innymi elementami na stronie. Ja zwiększam do 40px.

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? Chodzi o to, że dzięki siatce Bootstrap możesz umieścić wiele modułów w tej samej pozycji szablonu, a co najważniejsze możesz także określić liczbę kolumn, jaką chcesz użyć dla każdego modułu! Daje to spore możliwości konfiguracyjne szablonu, ponieważ możesz np. w jednej pozycji, która powiedzmy składa się z 3 kolumn mieć moduł, który będzie "zabierał" 2 kolumny, a drugi moduł jedną kolumnę! Wówczas szerokość tego pierwszego modułu będzie większa niż szerokość tego drugiego modułu. Poza tym, wybierając większą lub mniejszą ilość kolumn siatki Bootstrap możesz decydować o szerokości kolumny - w tym przypadku lewej kolumny szablonu.

Zobacz kilka przykładów związanych z ustawieniami lewej i prawej kolumny:

  • Left column width: Span3 (3 grid columns), Right column width: Span3 (3 grid columns)

Wygląd lewej i prawej kolumny przy ustawieniach: Span3 (3 grid columns) 

  • Left column width: Span6 (6 grid columns), Right column width: Span3 (3 grid columns)

Wygląd kolumn szablonu przy ustawieniach: Lewa kolumna: Span6 (6 grid columns), Prawa kolumna: Span3 (3 grid columns)

  • Left column width: Span2 (2 grid columns), Right column width: Span4 (4 grid columns) 

Wygląd kolumn szablonu przy ustawieniach: Lewa kolumna: Span2 (2 grid columns), Prawa kolumna: Span4 (4 grid columns)

Poeksperymentuj trochę z tymi ustawieniami - zobaczysz jak wielkie zmiany w wyglądzie serwisu można uzyskać za pomocą tylko tych dwóch opcji :-)

Jeżeli do tego zmienisz opcje modułu (menu Rozszerzenia -> Moduły -> Nazwa modułu -> Karta: Wzbogacone) w pozycji Rozmiar Bootstrap, to możesz uzyskać jeszcze ciekawsze efekty:

Wygląd kolumn szablonu przy ustawieniach: Lewa kolumna: Span2 (2 grid columns), Prawa kolumna: Span4 (4 grid columns) oraz zdefiniowaną opcją Rozmiar Bootstrap

Jeżeli chcesz, aby Twój szablon "dopasowywał" się do różnych urządzeń i wielkości ekranów, takich jak typowe ekrany komputerowe, laptopy, tablety, smartfony, itp.), w pozycji Responsive layout kliknij przycisk 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. W moim przykładzie to pozycja Home.

 

Ustawnienia Template layout w szablonie JM-Services

Na koniec kliknij przycisk Zapisz i sprawdź zmiany w wyglądzie Twojego testowego serwisu.

Layout builder

W oknie Szablony: Edytuj styl, kliknij w menu po lewej stronie pozcyję Layout builder. To jedna z najciekawszych opcji, dzięki której możesz przebudować całkowicie wygląd szablonu. Dzięki frameworkowi EF4 otrzymujesz bardzo proste, intuicyjne i przyjazne dla użytkownika narzędzie.

Jak zapewne się orientujesz, typowy szablon na Joomla! składa się z różnych bloków (pozycji) w których umieszcza się moduły. Każdy blok może zawierać jeden lub więcej modułów. Za pomocą Layout builder'a możesz praktycznie dowolnie konfigurować układ szablonu:

  • możesz zmieniać kolejność poszczególnych bloków;
  • możesz zmieniać kolejność kolumn;
  • możesz zdecydować o ilości modułów w tzw. flexi-blokach;
  • możesz przypisywać własne pozycje modułów;
  • możesz zdecydować o ukryciu niektórych bloków w zależności od wielkości ekranu;
  • możesz zdefiniować szerokość modułów w blokach typu flexiblock w zależności od wielkości ekranu;
  • możesz zapisać swoje ustawienia i przypisać je do wybranych pozycji menu;

Nie ma na co czekać! Zapraszam do poznawania Layout builder'a :-)

W polu Current Layout możesz wybrać z listy trzy różne układy szablonu:

  • default (dymyślny układ typu: left-content-right),
  • content-left-right;
  • left-right-content;

Do dyspozycji masz także przycisk COPY LAYOUT,  za pomocą którego możesz skopiować któryś z dostępnych układów i nadać mu własną nazwę. Za pomocą przycisk REMOVE LAYOUT możesz usnąć wybrany układ, natomiast za pomocą przycisku RESTORE LAYOUT TO DEFAULT SETTINGS, możesz załadować ustawienia domyślne do wybranego układu. Przydatna opcja, kiedy tak namieszasz w swoim układzie, że nie będziesz wiedzieć co do czego ;-)

Ok, proponuję, aby utworzyć własny układ i dopiero wówczas zająć się zmianami. W takim wypadku kliknij przycisk COPY LAYOUT, w okienku Layout copy wpisz własną nazwę układu (ja wpisuję: testowy-ef4), a następnie kliknij zielony przycisk Copy layout. Teraz możesz zająć się zmianami w swoim układzie!

W pierwszej kolejności możesz wybrać, czy chcesz zmienić ogólną strukturę szablonu - CUSTOMIZE LAYOUT STRUKTURE, czy dopasować układy responsywne - CUSTOMIZE RESPONSIVE LAYOUT. Proponuję najpierw popracować nad ogólnym układem szablonu.

Zwróć uwagę, na obecny układ poszczególnych bloków. Odzwierciedlają one typowy układ rozbudowanego serwisu, gdzie na samej górze znajduje się blok z górną belką (top-bar), poniżej blok z logo i menu nawigacyjne (top-menu-nav), następnie nagłówek - header (w którym często umieszczany jest tzw. slider z grafikami oraz krótkim opisem.

Pod nagłówkiem masz do dyspozycji dwa bloki, tzw. flexiblocks, w których obecnie znajdują się po cztery bloki top. Pod nimi znajduje się blok breadcrumbs, w którym najczęściej wyświetlana jest informacja w którym miejscu serwisu znajduje się internauta.

Dopiero teraz masz do dyspozycji trzy główne bloki: kolumnę lewą (left-column), główny blok prezentujący treść serwisu (component) oraz prawą kolumnę (right column). Blok treści podzielony jest na trzy części: content-top, component (w którym wyświetlane są np. artykuły), content-bottom. Pod głównymi blokami masz do dyspozycji jeszcze trzy bloki typu flexiblocks: bottom i footer.

Na samym dole zlokalizowane zostały dwa bloki: copyrights oraz blok informacyjny zawierający linki do producenta szablonu i frameworka: Joomla-Monster.com.

Aby dokonać zmian w rozmieszczeniu poszczególnych bloków, wystarczy, że klikniesz niebieski przycisk znajdujący się po prawej stronie większości bloków i przesuniesz myszką w górę lub w dół - w miejsce, w którym chcesz, aby ten blok się znajdował. Podobny przycisk drag & drop znajduje się nad blokami: left-column, content-top i right-column. W tym przypadku możesz przemieszczać te bloki w lewo lub prawo.

Bloki typu flexiblock rozpoznasz po tym, że pod nimi znajdują się przyciski z numerkami, które symbolizują ilość pozycji modułów w danym bloku.

W prawym górny rogu większości pozycji modułów znajduje się mała ikonka z ołówkiem, po kliknięciu której możesz z listy wybrać inną nazwę do wybranej pozycji modułu.

Domyślny układ szablonu w Layout builderze

Domyślny układ szablonu zobaczysz klikając w menu pozycję PAGES testowanego serwisu:

Domyślny układ testowego serwisu

Jeżeli część bloków nie chcesz używać w serwisie, możesz skorzystać ze specjalnego kosza. Po prostu przeciągnij wybrany blok na sam dół do różowego obszaru: EXCLUDED BLOCKS...

Specjalny kosz EXCLUDED BLOCKS do którego można umieścić nieużywane bloki szablonu

Poświęć trochę czasu, aby poeksperymentować z różnymi układami. Spróbuj zmienić układ, podobnie jak ja:

Zmieniony układ szablonu za pomocą Layout buildera

Zapisz zmieniony układ klikając przycisk Zapisz i zobacz jak teraz wygląda układ testowanego serwisu:

Zmieniony za pomocą Template buildera układ testowego serwisu

Font settings

Kolejna pozycja w ustawieniach szablonu JM-Services, to Font settings. Znajdziesz tutaj ustawienia związane z czcionkami używanymi w serwisie. Ustawienia te są identyczne z tymi, które poznałeś w artykule: Jak stworzyć szablon nie dotykając kodu? EF4 cz.1.

W sekcji BASE FONT masz do dyspozycji opcje, za pomocą których zmieniasz czcionkę domyślną dla całego serwisu.

ef4 35 small

W sekcji HORIZONTAL MENU zmienisz ustawienia czcionki dla menu poziomego:

Sekcja HORIZONTAL MENU w ustawieniach Font settings szablonu JM-Services

W sekcji MODULE HEADINGS zmienisz ustawienia czcionki dla tytułów w modułach umieszczonych w serwisie.

Sekcja MODULE HEADINGS w ustawieniach Font settings szablonu JM-Services

Czcionkę tytułów w artykułach ustawisz w sekcji ARTICLE HEADINGS

Sekcja ARTICLE HEADINGS w ustawieniach Font settings szablonu JM-Services

W sekcji ADVANCED SETTINGS możesz zdefiniować ustawienia czcionek dla wybranych selektorów lub identyfikatorów zdefiniowanych w CSS. Dzięki temu możesz zdefiniować inne ustawienia czcionki dla pojedynczego elementu serwisu.

Zobacz, jak będzie wyglądał serwis, jeżeli wprowadzisz następujące zmiany:

  • Font size: 50 px
  • Font type: Google webfont
  • Google webfont urlhttp://fonts.googleapis.com/css?family=Monoton:400,300,300italic,400italic,700,700italic,900,900italic
  • Google webfont family'Monoton', 'sans-serif'
  • Selectors: #jm-logo

Sekcja ADVANCED SETTINGS w ustawieniach Font settings szablonu JM-Services 

Ostatnia sekcja: GENERATED WEB FONT UPLOAD w menu Font settings umożliwia przesłanie na Twój serwer własnego zestawu czcionek, które chcesz wykorzystać w serwisie. Akceptowane są następujące rozszerzenia plików z czcionkami: *.ttf, *.eot, *.woff, *.svg. Warto przesłać co najmniej trzy formaty tej samej czcionki.

Color modifications

Następna pozycja: w ustawieniach szablonu JM-Services, to Color modifications, umożliwia zmianę kolorów poszczególnych elementów serwisu. Opcje te dostępne są także w Theme Customizerze, który opisywałem w artykule: Jak stworzyć szablon nie dotykając kodu? EF4 cz.1.

W sekcji SCHEME COLOR masz do dyspozycji opcje, za pomocą których zmieniasz tzw. kolor bazowy.

W sekcji GLOBAL znajdziesz ustawienia kolorów dla większości elementów serwisu, takich jak: tło strony, tło komponentu, obramowanie komponentu, kolor czcionki bazowej, kolor czcionki w tytułach artykułów.

Sekcja GLOBAL w ustawieniach Color modifications szablonu JM-Services

W sekcjach TOP BAR i TOPMENU BAR zdefiniujesz tło, obramowanie oraz kolor czcionki paska górnego oraz paska z górnym menu poziomym.

Sekcja TOP BAR i TOPMENU BAR w ustawieniach Color modifications szablonu JM-Services

Sądzę, że domyślasz się, że w sekcji MODULES zajdziesz ustawienia kolorów dotyczące modułów? Możesz zdefiniować kolor tła, obramowania oraz czcionki. Dodatkowo masz do dyspozycji trzy pola za pomocą których definiujesz kolory tzw. boxów. To te trzy elementy znajdujące się bezpośrednio pod sliderem na stronie głównej testowego serwisu.

Sekcja MODULES w ustawieniach Color modifications szablonu JM-Services

Natomiast w sekcji FOOTER zdefiniujesz kolor tła, obramowania i czcionki dla stopki serwisu:

Sekcja FOOTER w ustawieniach Color modifications szablonu JM-Services

Advanced features

Kliknij w menu Advanced features, aby wyświetlić opcje związane z włączaniem i wyłączaniem zawansowanych funkcjonalności szablonu.

Jeżeli chcesz modyfikować pliki LESS, używać Theme Customizera lub modyfikować kolory szablonu za pomocą Color Modifications, to w polu Developer mode kliknij przycisk ENABLED. Pamiętaj jednak, że włączenie tej opcji może wydłużyć czas ładowania się serwisu!

Pole Theme Customizer służy do włączania lub wyłączania go na stronie, natomiast pole Theme Customizer login do włączania lub wyłączania formularza logowania widocznego w pasku Theme Customizer'a. Po zalogowaniu się za pomocą tego formularza zostaną wyświetlone dwa dodatkowe przyciski: SAVE, za pomocą którego możesz zapisać wprowadzone zmiany bezpośrednio do bieżącego szablonu (domyślne style zostaną nadpisane) oraz przycisk SAVE AS FILE, aby zapisać zmiany do osobnego pliku konfiguracyjnego. Plik ten dostępny będzie z poziomu panelu administracyjnego w ustawieniach wybranego szablonu w pozycji Settings storage.

Pole Code injection możesz wykorzystać, jeżeli potrzebujesz wkleić dodatkowy kod (np. Google Analytics) lub meta tag do nagłówka szablonu (znacznik header).

Za pomocą pól: Compress CSS i Compress JS możesz przyśpieszyć ładowanie się serwisu w przeglądarkach. Dlaczego? Ponieważ komentarze, puste linie i niepotrzebne znaki są usuwane oraz pliki są łączone w jeden plik (osobno dla CSS i JS). Dzięki temu zmniejsza się czas odpowiedzi serwera na żądanie przeglądarki.

Jeżeli chcesz, aby część plików nie była poddawana kompresji, skorzystaj z pola Skip files. Możesz w nim wpisać nazwy plików lub pełne ścieżki dostępu. Pamiętaj tylko, aby każdy wpis był umieszczony w osobnym wierszu.

Ustawienia Advanced features szablonu JM-Services

Settings storage

Po kliknięciu w menu szablonu pozycji Settings storage otrzymasz dostęp do opcji pozwalających zapisać lub odtworzyć zdefiniowane wcześniej ustawienia szablonu zapisane w pliku konfiguracyjnym znajdującym się na serwerze lub załadować plik zapisany w innej lokalizacji.

Warto mieć zapisanych kilka różnych wersji szablonu, aby móc na przykład pokazać go klientowi lub innym użytkownikom, serwisu i zastosować ten, który przypadnie im najbardziej do gustu ;-)

W jaki sposób zapisać zmiany w osobnych plikach?

To bardzo proste! Załóżmy, że chcesz stworzyć trzy wersje wyglądu tego samego szablonu.

Najpierw zdefiniuj ustawienia układu poszczególnych elementów szablonu (Layout builder), ustawienia czcionek (Font settings) oraz kolorów (Color modifications), a następnie zapisz te ustawienia klikając przycisk Zapisz. Teraz kliknij w menu po lewej stronie pozycję Settings storage a następnie w polu Save settings wpisz nazwę pliku, np.: wersja1 i kliknij przycisk SAVE.

Zapisywanie ustawień szablonu w ppliku konfigiguracyjnym

Ponownie zmień ustawienia szablonu oraz je zapisz korzystając z przycisku Zapisz, a następnie w menu Settings storage w polu Save settings wpisz nazwę kolejnego pliku ze zmienionymi ustawieniami szablonu, np.: wersja2 i kliknij przycisk SAVE.

Powtórz te same czynności jeszcze raz pamiętając, aby zanim zapiszesz ustawienia w pliku najpierw zatwierdzić je korzystając z przyciski Zapisz.

W jaki sposób zastosować zmiany zapisane w pliku konfiguracyjnym?

Wystarczy, że w polu Store settings wybierzesz z listy właściwy plik konfiguracyjny, klikniesz przycisk LOAD, a an koniec zapiszesz wprowadzone zmiany klikając przycisk Zapisz

Wybór pliku konfiguracyjnego z zapisanymi ustawieniami szablonu

Jak zapisać plik konfiguracyjny na swoim komputerze?

Jeżeli chcesz zapisać plik konfiguracyjny w jakiejś innej lokalizacji i wykorzystać go np. w innym serwisie, to po wybraniu go z listy w polu Store settings, kliknij przycisk LOAD, następnie przycisk Zapisz.  Teraz kliknij prawym przyciskiem myszy przycisk DOWNLOAD SETTINGS i wybierz pozycję Zapisz element docelowy jako (lub podobnie brzmiącą jeżeli korzystasz z innej przeglądarki niż Firefox), a następnie zapisz plik w dowolnej lokalizacji na swoim komputerze.

Zapisywanie pliku konfiguracyjnego w dowolnej lokalizacji

Jak zaimportować plik zapisany na swoim komputerze?

Aby to zrobić, wystarczy, że klikniesz w polu Upload settings przycisk Przeglądaj, wskażesz plik konfiguracyjny, który chcesz zaimportować, następnie klikniesz przycisk UPLOAD znajdujący się po prawej stronie pola Upload settings i na koniec zapiszesz wprowadzone zmiany za pomocą przycisku Zapisz

Import pliku konfiguracyjnego w szablonie JM-Services

Gdzie przechowywane są pliki konfiguracyjne szablonu?

Pełną ścieżkę dostępu do plików konfiguracyjnych znajdziesz w polu Storage location. Dzięki tej informacji możesz łatwo uzyskać dostęp do wszystkich plików konfiguracyjnych, jakie zostały wcześniej przez Ciebie utworzone.

Pole Storage location zawierające informacje o lokalizacji plików konfiguracyjnych szablonu

Documentation

Po kliknięciu w menu pozycji Documentation, zobaczysz trzy linki:

  • General Info - prowadzący do dokumentacji framework'a EF4 w języku angielskim;
  • Our Extensions - Documenation, po kliknięciu którego otworzysz okno z dokumentacją rozszerzeń oferowanych przez DJ-Extension;
  • Bootstrap Grid System - Documentation, prowadzący do artykułu, w którym bardzo dokładnie objaśniono zasadę działania siatki Bootstrap;

Menu Documentation w szablonie JM-Services 

Upadtes

W menu Updates znajdziesz informacje dotyczące wersji zainstalowanego szablonu oraz framework'a EF4, a także link, za pomocą którego, sprawdzisz, czy zostały wydane nowsze wersje.

Menu Updates w szablonie JM-Services

Przypisz do pozycji menu

Kolejna pozycja w menu szablonu JM-Services, to Przypisz do pozycji menu. Funkcjonalność ta dostępna jest dla każdego szablonu w Joomla! Dzięki niej możesz na przykład użyć wiele szablonów w obrębie jednego serwisu! Przydaje się ona wówczas, gdy prowadzisz rozbudowany serwis i chcesz na przykład przedstawić i różny sposób treści w poszczególnych działach.

Zwróć uwagę, ze w Twoim testowym serwisie, dla szablonu jm-services - Default, zaznaczona jest tylko jedna pozycja w menu: Main Menu. Jeżeli chcesz, aby Twój zmodyfikowany szablon był widoczny także w innych pozycjach menu, zaznacz odpowiednie pola.

Menu: Przypisz do pozycji menu w szablonie JM-Services

Więcej na temat stosowania wielu szablonów w jednym serwisie przeczytasz i obejrzysz w artykule: Wiele szablonów w jednym serwisie w Joomla! 3.3.

Jestem pewien, że znasz już dokładnie większość opcji, jakie oferuje framework EF4. Przyznasz, że dzięki swojej prostocie jest łatwy w użyciu, a mimo to daje możliwość szybkiej modyfikacji wielu ustawień szablonu. Napisz w komentarzu pod tym artykułem, czy za pomocą tego darmowego narzędzia jesteś w stanie dostosować go do swoich potrzeb. Czy czegoś brakuje? Napisz w komentarzu!

To co do tej pory Ci pokazałam, było głównie omówieniem wszystkich opcji dostępnych zarówno z poziomu serwisu za pomocą Theme Customizera, jak i z poziomu zaplecza za pomocą opcji dostępnych w szablonie.

W kolejnej części pokażę Ci na konkretnym przykładzie istniejącego serwisu, jak nie dotykając kodu, wykorzystując framework EF4 i szablon JM-Services, stworzyć własny szablon dostosowany do wymagań konkretnego serwisu.

 

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ść
    Joanna niedziela, 09 grudzień 2018

    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ć???

  • Gość
    Andrzej sobota, 20 październik 2018

    Witam.
    Nie wyświetla mi się przycisk "powrót do góry" (JM Services) mimo że odpowiednia opcja jest włączona. Czyżby jej włączenie (i odpowiednio długa strona), to nie był wystarczający warunek? Będę wdzięczny za wskazówkę, pozdrawiam,
    Andrzej

  • Sławomir Pieszczek
    Sławomir Pieszczek niedziela, 28 październik 2018

    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 przewinięciu w dół strony.
    Jeżeli tak nie jest, to skontaktuj się z Twórcami szablonu (kontakt@joomla-monster.pl). To polska firma, więc spokojnie możesz porozumiewać się z nimi w Naszym ojczystym języku ;-)
    Pozdrawiam :-)

  • Gość
    Andrzej poniedziałek, 29 październik 2018

    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

  • Gość
    Adrian sobota, 08 lipiec 2017

    Jak zrobiłeś efekt, że logo najeżdża na niższy moduł "Jesteś tutaj:" oraz, że po zjechaniu niżej menu się przesuwa a logo zanika?

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 12 lipiec 2017

    Adrian, logo, to kwestia definicji dla identyfikatora #jm-logo-sitedesc.
    Domyślne ustawienia znajdziesz w pliku /templates/twoj_szablon/less/layout.less
    Aby stworzyć własne, utwórz plik custom.less w lokalizacji: /templates/twoj_szablon/less i umieść w nim to czego potrzebujesz.

    Jeżeli chodzi o menu, to wykorzystuję rozszerzenie DJ-MegaMenu (http://bit.ly/dj-megamenu). Wystaczy w ustawieniach modułu kliknąc kartę CSS3 Animations and script options i w polu Sticky menu kliknąć przycisk Tak :-)

    Pozdrawiam :-)

  • Gość
    Michał środa, 24 maj 2017

    Polski produkt, ale bez tłumaczenia polskiego?

  • Sławomir Pieszczek
    Sławomir Pieszczek sobota, 27 maj 2017

    Michał, a co w tym dziwnego, skoro odbiorcy tej firmy, to cały świat? A udział Polski to 3%?

    Tak, czy owak, od dłuższego czasu już jest polskie tłumaczenie!
    W najnowszej książce: "Jak stworzyć własny szablon do Joomla! EF4" (https://www.slawop.net/wsdj-ef4) opisuję wszystko już na bazie polskojęzycznego interfejsu ;-)

    Pozdrawiam :-)

  • Gość
    Janek poniedziałek, 04 lipiec 2016

    Bardzo przydatne, ale mam pytanie czy da radę zrobić slider, który na całej szerokości strony będzie/>

  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 14 lipiec 2016

    Janek,
    Da się :-)

  • Gość
    Bartek sobota, 30 maj 2015

    Świetna sprawa. dziękuję bardzo. jestem wdzięczny, że tutaj trafiłem.
    znam co prawda php js html css, ale to narzędzie pozwala na łatwe skomponowanie layoutu.
    klasa.
    ja już się bawię na gantry 5 ;)

    Odpowiedz Anuluj
  • Gość
    Jakub sobota, 14 marzec 2015

    Witam
    Fajne informacje.
    Mam pytanko. Jak dodać tło w formie obrazka. Można ustawić przeźroczystość pól. Jak zrobić węższe menu poziome.
    Czy będzie trzeba grzebać w css, a jeśli tak to w których?
    Pozdrawiam i dziękuję

  • Gość
    Maciej Błażejczyk piątek, 28 listopad 2014

    SUper artykuł. Myślę, że jest to dobry sposób na samodzielne stworzenie strony.

  • Gość
    Kasia poniedziałek, 24 listopad 2014

    Po za tym bardzo dziękuję za Twój czas, który poświęcasz dla mnie i innych.

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 03 grudzień 2014

    Dzięki Kasia :-)

  • Gość
    Arek niedziela, 23 listopad 2014

    Bardzo ciekawe narzędzie. Chyba jedyna znana mi darmowa alternatywa do tworzenia szablonów. Zdecydowanie brakuje umieszczania grafik jako background dla bloków. Chyba, że coś przeoczyłem!?
    Dziękuję autorowi artykułu za przydatne informacje.

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 27 listopad 2014

    Arek,
    Dziękuję za ciepłe słowa :-)

    Zdecydowanie brakuje umieszczania grafik jako background dla bloków.

    Główne założenie zespołu DJ-Projekty podczas realizacji projektu EF4, to prostota! Zapewne z czasem powstaną pod naciskiem użytkowników nowe funkcjonalności, ale na razie nie ma możliwości zmieniania tła dla poszczególnych bloków.

    Pozdrawiam :-)

  • Gość
    Kasia poniedziałek, 24 listopad 2014

    zainstalowałam, ale nie mogę dotrzeć do konfiguracji menu, aby zmienić z wertykalnego na horyzontalny?

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 03 grudzień 2014

    Kasia,
    Jeżeli robisz wszystko tak jak opisuję, to powinnaś mieś wszystko dokładnie tak samo!
    Pamiętaj, że menu na samej górze jest wyświetlane w module DJ-MegaMenu!

  • Gość
    Artur piątek, 21 listopad 2014

    doskonały artykuł

    Odpowiedz Anuluj
  • Gość
    Katarzyna piątek, 21 listopad 2014

    Kawał dobrej roboty, obserwuje już serwis od jakiegoś czasu...teraz dopiero postanowiłam wykorzystać praktycznie. Będzie powstawała strona na EF4.

    Odpowiedz Anuluj
  • Gość
    Tomek środa, 12 listopad 2014

    Mam poza tym następujący problem. Jak przypisuję dany artykuł do pozycji menu to pojawia się komunikat:
    JFolder::folder: Ścieżka nie jest folderem. Ścieżka:
    Co może być przyczyną????

  • Sławomir Pieszczek
    Sławomir Pieszczek piątek, 14 listopad 2014

    Tomek,

    Jeżeli Twój serwis znajduje się w jakimś podkatalogu, to w ustawieniach domeny włącz opcję: Włącz przekierowanie na podkatalog bez separacji serwisu.

  • Gość
    Tomek środa, 12 listopad 2014

    Na lokalnym komputerze szablon wraz z frameworkiem działał, ale na już na serwerze (home.pl) dzieją się dziwne rzeczy. Tym razem zmagam się z jakimiś krzaczkami zamiast poprawnie wyświetlanej czcionki (do tego komunikaty typu:
    Warning: strstr() [function.strstr]: Empty delimiter in /plugins/system/jmframework/jmframework.php on line 378)
    no a poza tym mam problemy z przypisaniem do pozycji menu konkretnych artykułów.

  • Gość
    Tomek sobota, 08 listopad 2014

    Przy instalacja na lokalnym komputerze jest okay. Niestety na serwerze www pojawiły mi się błędy:
    FileError: 'adres_mojej_witryny/templatesjm-serviceslesstemplate_responsive.less' wasn't found (404)
    in templatesjm-serviceslesstemplate_responsive.less

    FileError: 'adres_mojej_witryny/templatesjm-serviceslesstemplate.less' wasn't found (404)
    in templatesjm-serviceslesstemplate.less

    FileError: 'adres_mojej_witryny/templatesjm-serviceslessbootstrap_responsive.less' wasn't found (404)
    in templatesjm-serviceslessbootstrap_responsive.less

    FileError: 'adres_mojej_witryny/templatesjm-serviceslessbootstrap.less' wasn't found (404)
    in templatesjm-serviceslessbootstrap.less
    Co może być przyczyną?

  • Gość
    Tomek poniedziałek, 10 listopad 2014

    Już okay. Wyrzuciłem szablon, framework i dodatki. Wgrałem wszystko na nowo manualnie. Działa:)

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 12 listopad 2014

    Czasem warto odczekać "chwilę", aby czytelnik poświęcił chwilę czasu i sam rozwiązał problem ;-)

    GRATULUJĘ! I cieszę się, że jest już wszystko OK :-)

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...