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}
{/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}
Na liście szablonów kliknij pozycję: JM-Services J3.x:
{edsanimate_animated_zoomIn_eds-on-scroll}
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)
{eblogads left}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}
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}
{/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 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}
- 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}
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}
Zaznacz na liście wybrany język (Polish), a następnie kliknij przycisk Dalej.
{edsanimate_animated_zoomIn_eds-on-scroll}
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}
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}
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}
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}
{/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}
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}
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}
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}
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}
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}
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}
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?