A A A

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

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

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ść
    Janusz Kamińśki piątek, 05 sierpień 2016

    Czy nadał ten framework jest używany wspierany przez producenta?

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 10 sierpień 2016

    Oczywiście!
    Jest cały czas rozwijany :-)

  • Gość
    Henryk wtorek, 01 marzec 2016

    Świetna robota. Oby więcej takich opisów.
    A przy okazji mam pytanie. W jaki sposób usunąć pole tekstowe z modułu "LOGO" i zmniejszyć marginesy? Chciałbym tam mieć tylko obrazek. Za pomoc z góry dziękuję. Oczywiście mowa o jm-services

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 10 marzec 2016

    Henryk, aby pozbyć się tekstu pod LOGO wejdź w ustawienia szablonu opartego na EF4 i kliknij Ustawienia podstawowe (Basic settings), a następnie usuń wpisy w polach Tekst logo (LOgo text) oraz Opis strony (Site description).

    Jeżeli chodzi o zmniejszenie marginesu, to już trzeba pogrzebać w kodzie. Nie wiem na ile orientujesz się w CSS i LESS.
    Zmiany należy dokonywać w plikach LESS! Ale najpierw musisz na zapleczu w ustawieniach szablonu jm-services w menu Opcje zaawansowane (Advanced features) włączyć opcję Konfiguracja Stylów (Source Map - LESS).
    Następnie edytuj plik layout.less i znajdź wpis: #jm-logo-sitedesc-in. Tam będzie właściwość padding 25px; Zmień ją na mniejszą i zapisz zmiany w pliku.
    Po zapisaniu zmian w plikach less pamiętaj aby wyłączyć opcję Konfiguracja Stylów (Source Map - LESS) ;-)

    Pozdrawiam :-)

  • Gość
    Krzysiek środa, 13 styczeń 2016

    Ok zamykam temat wylaczylem magic_quotes_ ... na nazwie.pl zmienilem edytor na prosty i dziala Dziekuje

  • Gość
    Krzysiek środa, 13 styczeń 2016

    niestety zmiana edytora nie pomogla, ale zauwazylem ze jak dam zapisz to dodaj e do kodu /
    za kazdym razem jak daje zapisz

  • Gość
    Krzysiek poniedziałek, 11 styczeń 2016

    Witam
    Prosze o wskazówki odnośnie color box'ow bo mam tekst ale nie kiolorowy/ chodzi o tło

  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 11 styczeń 2016

    Krzysiek,
    Prawdopodobnie domyślny edytor ucina ci kod!
    Ustaw sobie w konfiguracji globalnej edytor CodeMirror i wklej cały kod jeszcze raz (punkt 11 tego artykułu).
    Pozdrawiam :-)

  • Gość
    mateusz czwartek, 03 grudzień 2015

    super poradnik również dziękuję.. mam takie pytanko chciałbym umieścić na wszystkich podstronach dj image slider ale również chciałbym umieścić na sliderze artykuły, i mam pytanie czy tak się da? :) jak umieszczam slidera to niestety artykuły opadają pod sliderem (na podstronach). pozdrawiam serdecznie

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 07 grudzień 2015

    mateusz,
    Nie bardzo rozumiem, co chcesz osiągnąć :-( Co to oznacza, że chcesz umieścić na sliderze artykuły? Chodzi ci o to, czy można dodać artykuły? Jeżeli tak, to w DJ-IMageSliderze nie jest to możliwe ;-)
    Pozdrawiam :-)

  • Gość
    olga czwartek, 01 październik 2015

    Witam,

    mam taki problem, po wprowadzeniu zmian w plikach css tego szablonu zapisuję zmiany i wszystko jest ok, do czasu, az nie wprowadzę jakiś zmian uzywając panelu adm. (chociażby zmiana wielkości czcionki). Pliki css są nadpisywane i wprowadzone zmiany znikają. Co zrobić, żeby zachować te zmiany? Probóbowałam umieszczać plik w katalogu html, probowalam stworzyc nowy plik css, ale nie wiem gdzie podpiac go w index.php itd. będę wdzięczna za pomoc.

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 07 październik 2015

    Olga,
    Zmiany należy dokonywać w plikach LESS! Ale najpierw musisz na zapleczu w ustawieniach szablonu jm-services w menu Advanced features włączyć opcję DEVELOPER TOOLS.
    Po zapisaniu zmian w plikach less pamiętaj aby wyłączyć opcję DEVELOPER TOOLS ;-)

    Pozdrawiam :-)

  • Gość
    olga piątek, 16 październik 2015

    Dzięki za odpowiedź, pliki less zostały opanowane :)
    Jedna jest rzecz, której nie mogę przeskoczyć - padding w menu gornym, pomiedzy miejscem na logo, a menu rozwijanym jest "przerwa", zmieniajac ustawienia w css (wiem,ze nie zapisza sie na stale) ustawialam padding odpowiednio dla obu części i się "stykały", plik less jest napisany w dosc skomplikowany sposob (wielkosci zalezne. odejmowane od siebie itd.) nie jestem w stanie dojsc co zmienic, zeby przestrzen z logo i menu sie zetknely. nie moge podac adresu, bo buduje strone na localhost, jesli wyrazilam sie niejasno, przesle kod :) POZDRAWIAM I DZIĘKI ZA ODPOWIEDZI I WSPANIAŁY PORADNIK :)

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 21 październik 2015

    Olga,
    Cieszę się, że poradziłaś sobie z plikami LESS :-)
    Niestety Twoje kolejne pytanie znacznie wykracza poza zakres treści zawartych w tytule tego artykułu.
    Być może razem z update ebooka: Kurs Joomla! Jak stworzyć własny szablon dla Joomla! EF4 (http://www.slawop.net/darmowe/kurs-joomla-jak-stworzyc-wlasny-szablon-do-joomla) dodam także trochę informacji dla osób, które potrafią i chciałyby pogrzebać trochę w kodzie, aby jeszcze bardziej dostosować szablon do swoich potrzeb.
    Możesz oczywiście wysłać do mnie maila z prośbą o pomoc, jednak obecnie dostaję tak dużo pytań, że niektórzy czekają na odpowiedź ładnych parę dni. Priorytet mają odpowiedzi do klientów komercyjnych, a ich także zaczyna być sporo ;-)
    Olga, możesz także spróbować zwrócić się z Twoim problemem do ekipy z Joomla-Monster.pl, być może oni będą w stanie szybciej zareagować na Twoje zapytanie :-)
    Pozdrawiam :-)

  • Gość
    Andrzej czwartek, 24 wrzesień 2015

    Świetny artykuł.
    Od jakiegoś czasu przymierzam się by powalczyć z jakimś frameworkiem i nie bardzo wiem za jaki się złapać. EFR, Gantry, Helix, T3? Co byś proponował?

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 07 październik 2015

    Andrzej,
    Niebawem wrzucę artykuł z porównaniem różnych rozwiązań, wówczas sam zdecydujesz ;-)
    Być może także już niedługo pojawi się materiał wideo z mojej prelekcji na ten temat, którą miałem przyjemność poprowadzić podczas Joomla Day! Poland w Gdańsku (http://bit.ly/jd-sp).
    Jak poszperasz na stronce joomla-day.pl, to znajdziesz tam także linka do mojej prezentacji ;-)

    Pozdrawiam :-)

  • Gość
    KALINA czwartek, 13 sierpień 2015

    Po prostu "słów brak" aby opisać jak bardzo pomógł mi Twój blog. Stronka wygląda świetnie - teraz tylko treść i "miodzio":D .
    Pozdrawiam serdecznie.
    Kalina

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek piątek, 14 sierpień 2015

    KALINA,
    Serdeczne dziękuję i gratuluję :-)
    Bardzo się cieszę, że moja praca nie idzie na marne ;-)
    P.S.
    Kalina, byłoby mi bardzo miło, gdybyś za pomocą formularza na stronie: http://www.slawop.net/opinie umieściła kilka zdań swojej opinii :-)
    Z góry serdeczne dzięki!

  • Gość
    Michał poniedziałek, 22 czerwiec 2015

    Witam, na wstępie powiem, iż to kawał dobrej roboty. Jednak mam problem jakiekolwiek zmiany w loyout bouilder nie przynoszą efektu, zapisuje je oczywiście lecz nic się nie zmienia, gdzie leży problem?

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 24 czerwiec 2015

    Michał,
    Twój problem może polegać na tym, że dokonujesz zmian na pozycjach w których nie masz umieszczonego żadnego modułu ;-)

  • Gość
    pytajnik czwartek, 28 maj 2015

    Witam,
    wykonałem kroki związane z instalacją EF4 i szablonu, jednak po wejściu w edycje nie mam pozycji "Template layout".

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

    pytajnik,
    to dlatego, że korzystasz zapewne z nowszej wersji EF4 ;-)
    Zerknij do DARMOWEGO ebooka: Kurs Joomla! Jak stworzyć własny szablon do Joomla! (http://www.slawop.net/darmowe/kurs-joomla-jak-stworzyc-wlasny-szablon-do-joomla)
    Pozdrawiam :-)

  • Gość
    marcin czwartek, 30 kwiecień 2015

    Sławomir! Wielkie dzięki! 2 strony już działają.

  • Gość
    Wojciech www.pasjalowiecka.pl środa, 29 kwiecień 2015

    SUPER!
    Dziękuję Bardzo :)
    Pozdrawiam

  • Gość
    Daniel środa, 01 kwiecień 2015

    I dodatkowo, jak dopisuję suffixy takie jak podane, to robi mi się niski pasek, beż żadnego zdjęcia, tylko napisy na białym tle

  • Gość
    Daniel środa, 01 kwiecień 2015

    Witam
    Mam problem z z Dj imagesliderem, jest on bardzo niski, żeby pokazało mi obrazek o wysokości 440px, to w wysokości muszę wpisać 2000px.

  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 02 kwiecień 2015

    Daniel,
    Musisz robić coś nie tak ;-)
    Zapoznaj się dokładnie z opisem tego rozszerzenia w artykule: DJ Image Slider (http://www.slawop.net/blog/dj-image-slider)

  • Gość
    Jakub sobota, 14 marzec 2015

    Witam
    Pięknie i ładnie. Podoba mi się to co robisz. To EF4 interesuje mnie przede wszystkim ze względu na responsywność.
    Jak zrobić węższe menu główne-poziome, lub innego typu?
    Jak wprowadzić tło do poszczególnych boxów z przeźroczystością?
    Pozdrawiam

  • Sławomir Pieszczek
    Sławomir Pieszczek niedziela, 15 marzec 2015

    Jakub,
    Niestety nie da się przewidzieć wszystkich potrzeb użytkownika, który chce stworzyć własny szablon, a nie bardzo zna się na kodowaniu. Jeżeli narzędzie ma być proste, nie może posiadać setek różnych funkcji :-)

    Pozdrawiam

  • Gość
    Jakub piątek, 13 marzec 2015

    Witam
    Jak w tym ef4 edytować wygląd menu
    Chcę wąskie bez ikon.
    Jak wprowadzić obrazek do tła.
    Jak uzyskać przeźroczystość.
    Jak wprowadzić przeźroczyste tła do pól - sektorów z tekstem
    Taką stronę chcę uzyskać na ef4 alissabeaute.pl

  • Sławomir Pieszczek
    Sławomir Pieszczek niedziela, 15 marzec 2015

    Jakub, pytania krótkie, ale odpowiedzi niestety nie ;-)
    To co chcesz osiągnąć wymaga już znajomości kodu przy najmniej języka CSS. Jeżeli jesteś zainteresowany komercyjnym coatchingiem, napisz do mnie korzystając na przykład z formularza kontaktowego: http://www.slawop.net/kontakt
    Pozdrawiam :-)

  • Gość
    Krzysiek wtorek, 17 luty 2015

    Witam
    mam taki problem po zainstalowaniu według wskazówek dodatku ef4 oraz szablonu gdy wchodzą do edycji szablonu wyskakuje mi tylko czarny pasek z prawej strony. Co zrobiłem nie tak może ktoś podpowiedzieć może muszę coś doinstalować.

    Pozdrawiam

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 18 luty 2015

    Krzysiek,

    A opublikowałeś dodatek EF4 Joomla-Monster Framework (menu Rozszerzenia -> Dodatki?
    Jeżeli tak, to spróbuj jeszcze raz pobrać dodatek i szablon i jeszcze raz zainstaluj je w swoim serwisie.
    Być może nie wszystkie pliki zostały skopiowane podczas instalacji ;-)

    Pozdrawiam :-)

  • Gość
    Krzysiek piątek, 20 luty 2015

    Niestety problem jest cały czas. Jedynie na przeglądarce explorer wyświetla opcje frameworka ale wszystko mruga i za chwilę wyrzuca błąd systemu :/

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 25 luty 2015

    Krzysiek,
    Napisz jaki błąd systemu wyrzuca Ci IE.
    Czy framework EF4 testujesz na komputerze lokalnym, czy na jakimś zdalnym serwerze?

  • Gość
    adrian czwartek, 29 styczeń 2015

    Zainstalowałem EF4, lecz strona teraz ładuje mi się w nieskończoność:(

  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 02 luty 2015

    adrian,

    Czy na każdej przeglądarce masz taką sytuację? Może podczas instalacji coś poszło nie tak albo istnieją jakieś konflikty JavaScript?

  • Gość
    adrian wtorek, 10 luty 2015

    Problem już rozwiązany. A przy okazji, jak zrobić taką grafikę do DJ-Menu i Color Boxów?

  • Sławomir Pieszczek
    Sławomir Pieszczek wtorek, 17 luty 2015

    adrian,

    Grafikę przygotowujesz jak każą inną - za pomocą odpowiedniego oprogramowania: Photoshop, GIMP, itp. ;-)

    Pozdrawiam :-)

  • Gość
    grzesiek wtorek, 27 styczeń 2015

    Fajny tutorial, ja właśnie sobie zainstalowałem Joomlę na jednej ze stron i staram się coś wyrzeźbić :)

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek wtorek, 27 styczeń 2015

    grzesiek, dzięki i trzymam kciuki za pomyślność Twojego rzeźbienia ;-)

  • Gość
    Sebastian środa, 14 styczeń 2015

    Jejku, super! Jestem Ci wdzięczny za takie cenne artykuły! Jednak mam pytanie. Co w sytuacji gdy chciałbym zrobić aby logo było na górze strony na środku i menu (też wyśrodkowane) pod logiem? Gdy wybrałem dowolny flexiblock, zmniejszyłem liczbę do 1 modułu, wybrałem dla niego nazwę top-menu-nav to logo pojawia się wyśrodkowane, natomiast menu znika. Mógłbyś coś doradzić?

    Pozdrawiam! :)

  • Gość
    TenSamSebastian niedziela, 18 styczeń 2015

    Głupia sprawa z tym moim pytaniem. Rozwiązanie jest bardzo proste. Wystarczy nie zmieniać nazw. I tyle.
    Ale za to mam drugie, poważniejsze pytanie. Ślicznie Cię proszę o pomoc. Nie zadowala mnie moduł Color Box. Zamiast pełnego w tle koloru to chciałbym mieć zdjęcie. A nie dopiero po najechaniu myszką. Czy możesz mi jakiś inny moduł zaproponować? Byłbym bardzo wdzięczny!

    Miłego dnia!
    Sebastian

  • Sławomir Pieszczek
    Sławomir Pieszczek wtorek, 20 styczeń 2015

    Sebastian,
    Moduły ColorBox, to po prostu zwykłe moduły typu Własny HTML z przypisaną i zdefiniowaną odpowiednią klasą CSS.
    Zamiast nich możesz użyć zwykłego własnego nowego modułu typu Własny HTML, lub jakikolwiek inny, który wyświetla grafikę. Równie dobrze mógłby to być moduł typu Reklamy ;-)

    Pozdrawiam :-)

  • Gość
    Sławek środa, 31 grudzień 2014

    Sławek,
    materiał szkoleniowy na temat ef4 super. Jednak nie do końca rozumiem ideę tego rozwiązania. Dotychczas szablon to była paczka (powiedzmy zip), którą się instalowało w tej lub innej dystrybucji joomla. Jak to się ma dla ef4? Wyprowadź mnie z błędu i popraw jeśli źle rozumuję. Na zainstalowanej joomli tworzę katalog gdzie umieszczam ef4 i uruchamiam zgodnie z opisem. Potem po stworzeniu mam gotową stronę opartą na ef4 dostępną tylko i wyłącznie tutaj? Nie mogę tego szablonu użyć gdzie indziej. Musiałbym jedynie ponownie zainstalować ef4 na innej instalacji joomla? Rozwiej proszę moje wątpliwości.
    pozdrawiam

  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 05 styczeń 2015

    Sławek,
    Na zainstalowanej Joomli nie tworzysz żadnego katalogu! Instalujesz tylko dwa rozszerzenia: szablon i framework. Przecież pokazuję to w tym artykule. Instaluję te dwa pliki (szablon JM-Services i dodatek framewor EF4) i tyle ;-)
    Aby użyć ustawień, które zdefiniujesz w tym serwisie, wystarczy, że zapiszesz plik konfiguracyjny (Settings Storage). Piszę o tym w 2 części: Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2 (http://www.slawop.net/jak-utworzyc-wlasny-szablon-dla-joomla-nie-dotykajac-kodu-ef4-cz-2) i odtworzysz go w innym serwisie.
    Oczywiście najpierw instalując w tym innym serwisie szablon JM-Services i framewor EF4 ;-)

    Mam nadzieję, że nie namieszałem za bardzo ;-)

  • Gość
    Sławek sobota, 27 grudzień 2014

    Sławku,
    pozycja jasna i rzeczowa, jak wszystko co publikujesz :) Odnoszę jednak wrażenie (i wyprowadź mnie z błędu jeśli się mylę), że ten framework mógłby pracować bez joomla 3, tzn. on sam w sobie ją zawiera, czy się mylę ? Czy otoczka wizualna z joomla pochodzi właśnie z tego, że jest nad frameworkiem joomla jeszcze.

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 05 styczeń 2015

    Sławku
    Oj nie jestem pewien, czy Cię dobrze rozumiem :-(
    Framework EF4 nie może pracować bez Joomla! Został stworzony właśnie po to, aby móc łatwiej i szybciej tworzyć szablony dla Joomla!

    on sam w sobie ją zawiera, czy się mylę ?

    No nie, niestety nie! Joomla! ro zdecydowanie większy projekt ;-)

  • Gość
    Janusz wtorek, 16 grudzień 2014

    Sławku, swoimi artykułami potwierdzasz niezwykły talent do tworzenia czytelnych, łatwo pojmowalnych poradników z serii Krok po Kroku !!!

    Jesteś ekspertem w tłumaczeniu z polskiego na nasze, chociaż framework EF4 jest umiędzynarodowiony poprzez królujący w nim język angielski !!!

    Każde nowe narzędzie czy produkt rozpoznawany przez Ciebie kończysz dydaktycznie fantastycznym poradnikiem stanowiącym zwielokrotnioną zachętę, aby zająć się tymi nowościami i cieszyć się ich zaskakującymi możliwościami funkcjonalnymi !!!

    Ta opinia odnosi się też do cyklu: Jak stworzyć szablon nie dotykając kodu? EF4 (cz 1, cz 2, cz 3), gdzie jak piszesz EF4, to nowiutki, świeżutki, jeszcze ciepły, pachnący nowością Framework Naszej rodzimej, polskiej produkcji, prosto ze stajni Joomla_Monster.com !!!

    Twoja praca jest szczególnie cenna właśnie dla takich jak ja, który jestem "absolwentem" DARMOWEGO Kursu Joomla! 2.5, jestem też nabywcą książki oraz e-booka Joomla! 2.5. Praktyczny kurs i dla takich jak ja zrobiłeś dodatkowo coś wspaniałego przygotowując specjalny tutorial dotyczący aktualizacji Joomla! 2.5 do Joomla! 3: Jak zaktualizować Joomla! 2.5 do Joomla! 3.x? umożliwiając mi płynnie przejść na Joomla! 3, na bazie dobrze mi znanego serwisu i eksperymentować z Frameworkiem EF4, w samodzielnym tworzeniu własnych szablonów.

    Bardzo, bardzo dziękuję Ci za ten tytaniczny wkład pracy, przecież to nie był spacerek i stąd absolutnie zrozumiała reakcja Uff, w końcu JEST!, która mówi sama za siebie !!!

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek wtorek, 16 grudzień 2014

    Janusz,
    BARDZO SERDECZNIE DZIĘKUJĘ ZA TAKĄ WYŚMIENITĄ LAURKĘ :-)

    Pozdrawiam gorąco!

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