Wyróżnione 

Jak stworzyć szablon nie dotykając kodu? EF4 cz.1

Jak stworzyć szablon nie dotykając kodu? EF4 cz.1

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

Czy możliwe jest, aby szablon wykonany w ten sposób był zgodny z obowiązującymi standardami? OCZYWIŚĆIE, ŻE TAK!

No to pisz w końcu, co, gdzie i za ile!

No już dobrze, dobrze nie bawmy się w te wstępy :-)

Dzisiaj pokażę Ci nowiutki, świeżutki, jeszcze ciepły, pachnący nowością Framework Naszej rodzimej, polskiej produkcji, prosto ze stajni Joomla_Monster.com o tajemniczej nazwie: EF4.

Skoro to takie fajne, to pewnie sporo kosztuje? Hmm, no właśnie! Ile? Otóż... CAŁKIEM NIC, DOKŁADNIE 0 ZŁ, ZUPEŁNIE ZA FREE, PEŁNA DARMOCHA :-)

Gdzie jest haczyk? Sam o to zapytałem Andrzeja Herzberga, kiedy uczestniczyłem w premierowych warsztatach tego frameworka podczas spotkania Joomla! User Group Trójmiasto! Otóż, haczyka po prostu nie ma! Andrzej kieruje się podobną filozofią, do mojej: dawaj od siebie dużo, a jeszcze więcej wróci do Ciebie ;-) I to chyba jest ten haczyk!

No dobrze! Zabieramy się do pracy! Plan jest taki: najpierw pokażę Ci jak zainstalować i przetestować serwis z zaimplementowanymi przykładowymi szablonami oraz dodatkowymi rozszerzeniami (tzw. quickstart), a następnie pokażę Ci możliwości tworzenia własnego szablonu na przykładzie jakiegoś gotowego serwisu.

Krok 1. Pobierz pliki

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

{edsanimate_animated_zoomIn_eds-on-scroll}Zarejestruj się lub zaloguj w serwisie joomla-monster.com
{/edsanimate}

Po zalogowaniu, kliknij link [my account], a następnie Download. W sekcji Choose what you to download kliknij link: Free Joomla Templates.

{edsanimate_animated_zoomIn_eds-on-scroll}

Okno Choose what you want to download po kliknięciu pozycji Download{/edsanimate}

Na liście szablonów kliknij pozycję: JM-Services J3.x:

{edsanimate_animated_zoomIn_eds-on-scroll}Wybierz szablon JM-Services J3.x{/edsanimate}

Pobierz wszystkie pliki znajdujące się na liście i zapisz je w dowolnej lokalizacji na Twoim komputerze!

Krok 2. Zainstaluj przykładowy serwis z zaimplementowanymi przykładowymi szablonami oraz dodatkowymi rozszerzeniami (tzw. quickstart)

Osobiście od kilku lat, jako lokalny serwer WWW używam dedykowany dla Joomla! rewelacyjny JAMP, którego autorem jest Michał Trzepizur, wiceprezes Fundacji PCJ Otwarte Źródła, której misją jest wspieranie polskiej społeczności Joomla!

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

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

Teraz rozpakuj do tego folderu pobrany wcześniej plik quickstart.zip.

{edsanimate_animated_zoomIn_eds-on-scroll}Lokalizacja folderu, do którego należy rozpakować plik quickstart.zip{/edsanimate}

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

{edsanimate_animated_zoomIn_eds-on-scroll}Struktura folderów po rozpakowaniu pliku quickstart.zip{/edsanimate}

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

Jeżeli instalowałeś już kiedykolwiek Joomla!, to zauważysz zapewne znajome opcje instalacyjne i możesz dalsze kroki wykonać według własnego uznania ;-) Jeżeli jednak tego jeszcze nie robiłeś, to przejdźmy ten etap wspólnie.

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

{edsanimate_animated_zoomIn_eds-on-scroll}Krok pierwszy instalacji pakietu Quickstart frameworka EF4{/edsanimate}

Krok drugi instalacji, to konfiguracja bazy danych. Na tym etapie musisz posiadać podstawowe informacje dotyczące bazy danych, z którą będzie współpracował testowany serwis.

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

{edsanimate_animated_zoomIn_eds-on-scroll}Konfiguracja bazy danych podczas instalacji pakietu Quickstart frameworka EF4{/edsanimate}

  • w polu Typ bazy danych pozostaw pozycję: MySQLi;
  • w polu Nazwa serwera bazy danych wpisz: localhost;
  • w polu Nazwa użytkownika wpisz: joomla;
  • w polu Hasło wpisz: joomla;
  • w polu Nazwa bazy danych wpisz nazwę jaką chcesz, np. test-ef4;

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

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

  • W polu Przedrostek dla tabel bazy danych system proponuje losowo generowany przedrostek. Przedrostek ten będzie umieszczany na początku każdej tworzonej tabeli w bazie danych. Pozostaw to pole w takim stanie, jaki proponuje instalator ;-)

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

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

{edsanimate_animated_zoomIn_eds-on-scroll}Ekran z informacjami dotyczącymi instalacji i wstępnej konfiguracji systemu{/edsanimate}

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

Jeżeli chcesz, aby panel kontrolny Twojego serwisu (tzw. zaplecze) było wyświetlane w języku polskim, możesz na tym etapie kliknąć przycisk Dodatkowy krok: Instaluj języki.

{edsanimate_animated_zoomIn_eds-on-scroll}Dodatkowy krok: Instaluj języki{/edsanimate}

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

{edsanimate_animated_zoomIn_eds-on-scroll}Instalacja pakiętów jężykowych{/edsanimate}

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

{edsanimate_animated_zoomIn_eds-on-scroll}Wybór języka polskiego jako języka domyślnego dla zaplecza i witryny{/edsanimate}

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

{edsanimate_animated_zoomIn_eds-on-scroll}Zakończenie procesu instalacji serwisu testowego z frameworkiem EF4{/edsanimate}

Jak zapewne zauważysz, Twój testowy serwis prezentuje się całkiem ciekawie. To dlatego, że domyślnym szablonem jest  szablon JM-Services. Możesz z niego korzystać zupełnie za darmo!

{edsanimate_animated_zoomIn_eds-on-scroll}Wygląd testowego serwisu po instalacji pakietu quickstart{/edsanimate}

Krok 3. Zmień wygląd szablonu za pomocą Theme Customizer'a

Zwróć uwagę na przycisk z ikonką koła zębatego widoczną po lewej stronie. To ikonka tzw. Theme Customizer'a, za pomocą którego możesz dosłownie kilkoma kliknięciami zmienić kolory oraz ustawienia czcionek i od razu mieć podgląd dokonanych zmian. Przetestuj to rozwiązanie! Po kliknięciu przycisku Theme Customizer'a zobaczysz pionowy pasek, który został podzielony na dwie części: Color modifications oraz Font settings.

{edsanimate_animated_zoomIn_eds-on-scroll}Theme Customizer w szablonie JM-Services{/edsanimate}

Poeksperymentuj z tymi ustawieniami definiując własne parametry poszczególnych elementów szablonu. 

Zobacz, jak może wyglądać szablon, po kilku zmianach:

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

Za każdym razem, kiedy wprowadzisz zmiany możesz kliknąć przycisk PREVIEW, aby zobaczyć jak wygląda szablon.

Jeżeli chcesz uzyskać taki wygląd jak ten powyżej, zastosuj następujące parametry:

Scheme color
Main color: #000000

Global
Page background: #64b5ec
Component background: #64b5ec
Component border: #e7e7e7
Base font color: #3d3d3d
Article title color: #121111

Top Bar
Font color: #5b5b5b

Topmenu Bar
Font color: #000000

Modules
Module background: #e5e5e5
Module border: #adadad
Module font color: #3a3a3a
Color box 1: #828282
Color box 2: #828282
Color box 3: #828282

Footer
Background: #828282
Border: #b5b5b5
Font color: #e2e2e2

Base font
Font size: 18
Font type: Google webfont
Google webfont: url http://fonts.googleapis.com/css?family=Cuprum:400,300,300italic,400italic,700,700italic,900,900italic
Google webfont: family: 'Cuprum', 'sans-serif'

Horizontal menu
Font size: 20
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Actor:400,300,300italic,400italic,700,700italic,900,900italic
Google webfont family: 'Actor', 'sans-serif'


Module headings
Font size: 24
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Cuprum:400,300,300italic,400italic,700,700italic,900,900italic
Google webfont family: 'Cuprum', 'sans-serif'


Article headings
Font size: 30
Font type: Google webfont
Google webfont url: http://fonts.googleapis.com/css?family=Fredoka One:400,300,300italic,400italic,700,700italic,900,900italic
Google webfont family: 'Fredoka One', 'sans-serif'

No tak, pozmieniałeś sobie wszystko i teraz co? Co mi z tego, że mogę sobie zobaczyć, jak wyglądałby szablon z takimi ustawieniami? Spokojnie, nie martw się! Możesz włączyć odpowiednią funkcjonalność, aby była możliwość zapisania i zapamiętania wprowadzonych przez Ciebie zmian.

Krok 4. Zapisz zmiany wprowadzone za pomocą Theme Customizer'a

Co należy zrobić, aby móc zapisać zmiany wprowadzone za pomocą Theme Customizer'a?

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.

{edsanimate_animated_zoomIn_eds-on-scroll}Okno Szablony: Style{/edsanimate}

W oknie Szablony: Edytuj styl, kliknij w menu po lewej stronie pozcyję Advanced features, a następnie w polu Theme Customizer login kliknij przycisk ENABLED. Na koniec zapisz zmiany klikając przycisk Zapisz i zamknij i wróć z powrotem do strony frontowej Twojego testowego serwisu.

{edsanimate_animated_zoomIn_eds-on-scroll}Włączenie opcji Theme Customizer login{/edsanimate}

Zauważ, że teraz po kliknięciu ikonki Theme Customizer'a , dostępny jest formularz logowania. Zaloguj się za jego pomocą korzystając z konta administratora (tak, jak do zaplecza).

{edsanimate_animated_zoomIn_eds-on-scroll}Formularz logowania dostępny w Theme Customizerze{/edsanimate}

Teraz masz do dyspozycji 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 konfiguracyjny z zapisanymi ustawieniami dostępny będzie z poziomu panelu administracyjnego w ustawieniach wybranego szablonu w pozycji Settings storage.

Warto zastosować tą drugą opcję, ponieważ wówczas możesz mieć 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 zastosować zmiany zapisane w pliku konfiguracyjnym?

Zaloguj się do zaplecza Twojego testowego serwisu i otwórz okno konfiguracyjne wybranego szablonu (w tym przykładzie jm-services - Default) - menu Rozszerzenia -> Szablony. W menu po lewej stronie kliknij przycisk Setting storage, a następnie w polu Store settings wybierz z listy właściwy plik konfiguracyjny, a następnie kliknij przycisk LOAD. Na koniec zapisz wprowadzone zmiany klikając przycisk Zapisz i zamknij i sprawdź, czy ustawienia zapisane wcześniej w wybranym pliku konfiguracyjnym są widoczne w serwisie.

{edsanimate_animated_zoomIn_eds-on-scroll}Wybór pliku konfiguracyjnego w ustawieniach wybranego szablonu{/edsanimate}

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, pojawi sie obok przycisku LOAD przycisk DOWNLOAD SETTINGS. Kliknij go prawym przyciskiem myszy 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.

{edsanimate_animated_zoomIn_eds-on-scroll}Zapis pliku konfiguracyjnego wybranego szablonu{/edsanimate}

Jeżeli będziesz chciał zaimportować ustawienia z pliku zapisanego na Twoim komputerze, 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 lub Zapisz i zamknij.

{edsanimate_animated_zoomIn_eds-on-scroll}Import pliku konfiguracyjnego dla wybranego szablonu{/edsanimate}

No i jak Ci się podoba Theme Customizer? Prawda, że wygodne narzędzie?

To dopiero część możliwości, jakie daje framework EF4. W kolejnych częściach poświęconych EF4 omówię większość opcji dostępnych z poziomu zaplecza oraz pokażę Ci jak niemal nie dotykając kodu stworzyć własny szablon dostosowany do wymagań Twojego serwisu.

 

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Moja przygoda z Joomla! - Danuta Idzik
Serwis Joomla! zaatakowany - skrypt z treściami po...

Podobne wpisy

 

Komentarze 69

Gość - Radek w środa, 15 październik 2014 21:10

Sławku,
Dziękuję za kolejny post.
Praktycznie dzięki obserwowaniu Twojego bloga jestem w miarę na bieżąco z nowościami i najciekawszymi dodatkami i rozszerzeniami dla Joomli.
Jest to o tyle ważne, że praktycznie regularnie aktualizowane blogi na temat tego CMS-a są w Polsce rzadkością.

Sławku, Dziękuję za kolejny post. Praktycznie dzięki obserwowaniu Twojego bloga jestem w miarę na bieżąco z nowościami i najciekawszymi dodatkami i rozszerzeniami dla Joomli. Jest to o tyle ważne, że praktycznie regularnie aktualizowane blogi na temat tego CMS-a są w Polsce rzadkością.
Gość - Anna (website) w środa, 15 październik 2014 22:52

Dziękuję, jak zwykle napisane dokładnie i zrozumiale (co prawda nie przećwiczyłam, ale do tej pory nie było "wpadek", więc i teraz na pewno nie ma). Na pewno kiedyś skorzystam...
Pozdrawiam

Dziękuję, jak zwykle napisane dokładnie i zrozumiale (co prawda nie przećwiczyłam, ale do tej pory nie było "wpadek", więc i teraz na pewno nie ma). Na pewno kiedyś skorzystam... Pozdrawiam
Sławomir Pieszczek (website) w sobota, 18 październik 2014 09:51

Aniu,
Jak przetestujesz, napisz kilka słów na temat Twoich "wrażeń" :-)

Pozdrowionka :-)

Aniu, Jak przetestujesz, napisz kilka słów na temat Twoich "wrażeń" :-)Pozdrowionka :-)
Gość - J.... w czwartek, 16 październik 2014 06:59

Dziękuje, właśnie czegoś takiego potrzebowałem , bo moja strona z szablonem beez5 jest taka smutna i biała.
Pozdrawiam

Dziękuje, właśnie czegoś takiego potrzebowałem , bo moja strona z szablonem beez5 jest taka smutna i biała. Pozdrawiam
Sławomir Pieszczek (website) w sobota, 18 październik 2014 09:53

J...

Cieszę się! Działaj, przetestuj, używaj :-D
Jak skończysz, to pochwal się i pokaż swoją wesołą stronkę ;-)

Pozdrawiam :-)

J...Cieszę się! Działaj, przetestuj, używaj :-D Jak skończysz, to pochwal się i pokaż swoją wesołą stronkę ;-)Pozdrawiam :-)
Gość
poniedziałek, 15 lipiec 2019

Zdjęcie captcha

Najnowsze komentarze

Gość - Andy SSL i Joomla! w Smarthost
03 styczeń 2019
Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
02 styczeń 2019
Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...
Gość - Joanna Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2
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ść - Informatyk Tworzenie bazy danych w CPanelu na Smarthost - instalacja Joomla!
19 listopad 2018
Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna
Gość - Sławomir DJ Image Slider
04 listopad 2018
co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?