Responsywna strona w joomla przy pomocy frameworka T3

Responsywna strona w joomla przy pomocy frameworka T3

Przerabiam motyw strony kocidom.waw.pl na responsywny framework T3.

Będę pracować na joomli 2.5, ponieważ na chwilę obecną strona kocidom.waw.pl jest w joomla 2.5, a panel motywu jest taki sam dla joomla 2.5 i joomla 3. Motyw T3 pasuje zarówno do joomla 2.5 jak i do joomla 3.

  1. instaluję motyw – T3 BS3 Blank który ma zaimplementowany Bootstrap 3 i Font Awesome 4
  2. instaluję plugin T3 – na xampie trzeba wgrać rozpakowany plugin do katalogu tmp i zainstalować z katalogu
  3. najpierw tworzę kopię pustego motywu T3, który będę zmieniała dla własnych potrzeb – http://www.t3-framework.org/documentation/bs3-faqs#create-template
    • rozpakowuję paczkę i zmianiam nazwę katalogu
    • zmieniam nazwy plików językowych i odpowiednio w pliku templeteDetails.xml
    • pakuję w zip, nadaję paczce odpowiednią nazwę i instaluję w joomli
    • motyw zainstalował się poprawnie
    • ustawiam go jako domyślny
    • sprawdzam czy plugin T3 jest włączony
    • w zakładce rozszerzenia-szablony ustawiam sobie podgląd żeby widzieć pozycje
  4. aby wejść do ustawień motywu klikamy na jego nazwę w zakładce rozszerzenia-style
  5. ustawienia motywuTheme – czyli wersja kolorystyczna. Mamy do wyboru 2 ciemną (ciemne tło) lub czerwoną (białe tło i cz

podstawowe ustawienia motywu – zakładka General

  • Development mode – należy go włączyc jeśli pracujemy bezpośrednio na plikach less, wtedy motyw kompiluje pliki less od razu i możemy zobaczyć zmiany na stronie. Włączenie tej opcji znacznie spowalnia działanie joomli. Na razie nie włączam, gdyż less zostawiam sobie na sam koniec.
  • Pliki css znajduja się w katalogu templatest3_bs3_blankcss ale twórcy motywuj nie zalecają zmieniania ich, gdyż zostaną one nadpisane przy aktualizacji motywu lub kompilacji plików less.

framework T3

Ustawienia motywu

Theme – czyli wersja kolorystyczna. Mamy do wyboru 2 ciemną (ciemne tło) lub czerwoną (białe tło i czerwone nagłówki). Ale najlepiej zrobić sobie własną. Joomla pozwala na ustawienie innych wersji kolorystycznych dla róznych podstron.
W tej zakładce można ustawić logo strony lub napis zamiast logo.

Okazuje się, że na stopce strony jest zbędny napis na temat bootstrapa i font awesome. Aby go usunąć trzeba zmienić pliki motywu.
http://www.joomlart.com/documentation/joomla-faqs/copyright-removal
trzeba go ręcznie usunąć z pliku templates/t3_bs3_blank/tpls/block/footer.php

framework t3 joomla

layout
W zakładce layout ustawiamy układ strony. Mamy do wyboru 5 układów. Można też stworzyć własny. Ustawiam typowy layout default.

Motyw kocidom jest tak prosty, że nie muszę tworzyć własnych pozycji. Wystarczy wykorzystać te, które są w motywie.

T3 pozwala na utworzenie własnego layoutu dla strony, dodawanie własnych pozycji.
http://www.t3-framework.org/documentation/bs3-layout-system#position-size

motyw joomla

 

 

Przyjrzałam się stronie i doszłam do wniosku że nie muszę zmieniać dla niej layoutu bo wykorzystuje ona najbardziej typowy układ 3 kolumnowy. Nie ma też potrzeby tworzenia dodatkowych pozycji, gdyż wystarczą te, które oferuje T3. Czyli pozostaje mi tylko zmiana czysto kolorystyczna.

Dopasowanie kolorów motywu

Tworzę nowy temat kolorystyczny. W katalogu less/themes tworzę nowy katalog i kopiuję do niego pliki z innego katalogu themes, który najbardziej przypomina to co chcę uzyskać.

Aby nowy temat kolorystyczny pojawił się w panelu motywu, trzeba włączyć Developement Mode na chwilę i skompilowć less do css. Ustawiam ten temat kolorystyczny, zapisuję. Mam teraz 3 możliwości ustawienia własnych kolorów.

  1. praca na plikach less i kompilacja ich do css. Trzeba wtedy włączyć Development Mode.
  2. jesli nie chcemy działać na plikach less tworzymy arkusz stylów custom.css i umieszczamy go w katalogu css. Przy aktualizacji motywu lub kompilacji less ten plik nie zostanie nadpisany.
  3. theme magic – umożliwia w prosty sposób ustawienie kolorów i wielkości poszczególnych części strony.

 

Fonty google

T3 w dokumentacji podaje, że aby dodać fonty google należy wstawić je do pliku assets.xml. Niestety my potrzebujemy latin extended a tego mi się nie udało poprawnie wstawić. Dlatego posłużę się metodą prymitywną i wstawię import google fonts do pliku custom.css.

 

Less/css

Zdecydowałam się na zmiany kolorów w plikach less. Less nie jest moja mocną stroną na razie ale warto się lepiej zapoznać. Z drugije strony tak naprawdę można do plików less wstawiać zwyczajne reguły css, ale tylko bardzo proste reguły.

Na początek zmiana głównego menu. Bezpośrednio w pliku mainnav.php zmieniłam menu default na inverse bo wtedy można sobie ustawic kolory menu kreatorem menu dla bootstrapa.

Dotychczasowe menu strony zawierały gradienty. Noramlnie ułatwiam sobie tworzenie gradientów przy pomocy kratora. http://www.colorzilla.com/gradient-editor/

Utworzona kreatorem formuła css nie będzie działała w plikach less i w czasie kompilacji pojawi się błąd. Dlatego trzeba tu zastosować specjalne formuły:

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
background-color: @start;
background-image: -webkit-linear-gradient(@origin, @start, @stop);
background-image: -moz-linear-gradient(@origin, @start, @stop);
background-image: -o-linear-gradient(@origin, @start, @stop);
background-image: -ms-linear-gradient(@origin, @start, @stop);
background-image: linear-gradient(@origin, @start, @stop);
}

/* zastosowanie */
#someDiv {
.gradient(left, #663333, #333333);
}

Tą formułę dla gradientu znalazłam tu.

Okazało się, że mixins nie trzeba pisać samemu bo w sieci jest mnóstwo gotowych, poza tym, można pobrać paczkę i zaimportować ją do pliku less.

To już nie jest nawet kwestia czy less jest trudny. Raczej nie jest i można się tego nauczyć w ciągu 1-2 dni. Problemem jest to że arkusze stylów rozrastają się do takich rozmiarów, że nie sposób tego pisać od zera. Już sam CSS3 zawiera formuły np. gradientów,  cieni itp, które trudno jest spamiętać i trzeba posługiwać się gotowcami, albo zrobionymi przez siebie albo cudzymi.

Megamenu

Samo menu rozwijalne już nie wystarcza. Dziś modne staje się megamenu to znaczy takie gdzie w menu można wstawiać obrazki, teksty, formularze itp. W ustawieniach motywu ustawiamy które menu ma być megamenu – główne menu poziome u góry. T3 pozwala też na więcej niż jedno menu główne.

Framework t3 obsługuje megamentu w ten sposób, że można tu:

  • dodajemy ikonki np. font awesome lub bootstrapa – wpisujemy klasy ikonki w odpowiednią rubrykę.
  • dodajemy napisy pod menu czyli jakby opis czego ten link dotyczy
  • włączamy menu rozwijalne i możemy je wykonać w dwojaki sposób.
    • Albo zywczajnie tworzymy podmenu w joomli i będzie ono służyło jako zwykłe linki w menu rozwijalnym. T3 pozwala na menu wielopoziomowe.
    • w ustawieniach megamenu dodajemy moduł, który zawiera menu
  • dodajemy obrazki, formularze, cokolwiek do menu rozwijalnego – musimy najpierw stworzyć odpowiedni moduł i ten moduł dodajemy do menu. Można stworzyć megamenu w dwu lub więcej kolumnach i ustawić dla nich ilosć kolumn bootstrapa.

Ustawienie układu mobilnego

Bez względu na to jaki layout ustawimy, trzeba go sprawdzić pod względem tego jak zachowuje się przy róznych wielkościach ekranu. W zakładce layout wchodzimy do ustawień układu responsywnego i tu możemy poustawiać jak mają się zachowywać poszczególne części.

Np. jeśli mamy układ 3 kolumnowy to maincontent ustawi się u góry a oba sidebary ustawią się pod spodem obok siebie. W widoku na komórkę będą za bardzo ścieśnione. Nie ma jak ustawić ich aby były jeden pod drugim. Dlatego ja wyłączyłam sidebar 2. Potem w ogóle zrezygnowałam z układu 3 kolumnowego.  Wydaje mi się, że układ 2-kolumnowy zupelnie wystarcza. Nawet mając megamenu można w ogóle zrezygnować z kolumn bocznych.

T3 oferuje pola na reklamy lub jakieś zajawki tzw. spotlight. Można ustawić do 6 pól.  Pola te można sobie dowolnie ustawić dla wersji mobilnej. Np. mamy 4 pola w rzędzie na dużym ekranie. Dla mniejszych ekranów możemy ustawić 2 u góry i 2 na dole. A dla komórek 4 jeden pod drugim.

Slider

Tworząc slider albo inny wodotrysk mamy 2 możliwości.

  • wbudowujemy go w moty. Jeśli tworzę motyw dla siebie to ok. Jeśli motyw jest dla użytkownika to będzie on chciał sobie kiedyś zmienić obrazki w sliderze. Dlatego trzeba ew. stworzyć jakieś opcje do zmiany obrazków.
  • posłużyć się wtyczką. Większość motywów (nawet te płatne) po prostu wykorzystuje wtyczki do tworzenia sliderów.

Ponieważ tworzyłam ten motyw dla siebie zdecydowałam się na stałe wbudować slider do motywu. W tym celu zwyczajnie zaimplementowałam carousel bootstrapa tak aby brał obrazki jako tło i stanowił tło dla header.

T3 pozwala na łatwe dodawanie skryptów do motywu. Skrypty trzeba dodać do pliku assets.xml albo bezpośerdnio do nagłówka strony.

 

motyw joomla
stara strona kocidom
strana html

template monster


Profesjonalny Hosting


Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.