1. Dodanie nowego templata (stylu graficznego)
Aby dodać nowy szablon graficzny należy kliknąć w przycisk "Dodaj" w zakładce Grafika -> Szablony graficzne, a następnie wpisać nazwę naszego nowego szablonu.
Dla osób mniej zawansowanch polecamy stworzyć szablon graficzny przez wykonanie kopi istniejącego szablonu dostarczonego razem z systemem CMS. Pozwoli to na zaoszczędzenie czasu. W tym celu należy kliknąć na przycisk dwóch zielonych strzałeczek po prawej od nazwy szablonu, który chcemy skopiować. Powstanie wtedy szablon o takiej samej nazwie z dopiskiem "kopia". Należy zmienić jego nazwę na naszą.Po dokonaniu tych czynności możemy przystąpić do kroku drugiego.
2. Edycja pliku głównego, (main.tpl)
Szablony windu domyślnie korzystają z Twitter Bootstrap, tak zwanego frameworka CSS. Jest to system stylów css pozwalający na szybkie tworzenie ładnych i przejrzystych stron www.
Styl graficzny mający zaimplementowany Twitter Bootstrap ma automatycznie do dyspozycji całą gammę gotowych elementów. Dokumentacja znajduje się pod adresem twitter.github.com/bootstrap/Standardowy kod strony wygląda następująco:
W kodzie mamy odpowiednio;
- Jak widzimy w linijkach 8, 9, 25 mamy odniesienia do zmiennej $meta zwracającej metatagi
- W linijkach 13-15 mamy kod wstawiający style CSS zgodnie z konfiguracjią systemu oraz zawartością naszego katalogu CSS zgodnie z kolejnością alfabetyczną z wstawieniem pliku main.css na samym końcu jako plik główny.
- W linijkach 16-19 ustalane są zmienne potrzebne w kodzie JS
- W linijkach 22-24 jest kod wstawiający pliki JS analogicznie do plików CSS
- W linijce 28 wstawiany jest Widżet z powiadomieniami
- W linijce 29 includowany jest template główny, czyli template który mamy ustawiony dla naszej podstrony (opcja wyboru z listy rozwijanej dla każdje podstrony). Template ten znajduje się w naszym katalogu "views".
3. Definiowanie nowych widoków
Widoki są to pliki znajdujace się w katalogu "views". Jeden z tych plików możemy przypisać do naszej podstrony. Dzięki widokom mamy mozliwość zdefiniowania kilku szablonów, nie mamy tylko podziału na stornę główną i podstronę, w tym wypadku mamy pełną dowolność.
Aby dodać widok należy kliknąć na zielony plusik przy katalogu "views" a następnie wpisać nazwę naszego widoku, musi być ona unikalna w obrębie katalogu.Po wykonaniu tej operacji zarówno w panelu edycji jak i na liście dostępnych widoków dla podstrony pojawi się nasz nowy element.
Dodatkowo mamy do dyspozycji katalog "common", w którym możemy umieszczać elementy wspólne dla wszystkich widoków, na przykład stopkę oraz menu górne strony. Nie ma sensu, aby każdym razem kopiować kod, dlatego tworzymy nowy elementy w katalogu "common". Następnie wstawiamy go w nasz widok wpisując odpoweidni kod:
4. Edycja widoków
Aby edytować nasz widok należy kliknąć na niebieski długopis przy wybranym elemencie. Po prawej stronie pojawi się kod szablonu. Jest to kod HTML z wykorzystaniem systemu smarty.net generowany wewnątrz tagu body.
Podstawowe elementy jakie powinny znaleźć się wewnątrz widoku to:- {{$page->name}} - tytuł podstrony
- {{eval var=$page->content}} - treść podstrony wygenerowana przez "eval" co powoduje wygenerowanie kodów smarty wewnątrz widoku.
- wybrane widżety wstawione przez "wstawiacz widżetów" uruchamiany przyciskiem "widżet" pod panelem edycji treści
5. Dodawanie oraz wstawianie obrazków
Aby dodać obrazek statyczny do naszego szablonu, należy kliknąć na zielony plusik przy katalogu "img". Następnie należy przycisnąć na ikonkę szarego "i" obok nowo dodanego pliku i skopiować ścieżkę, którą następnie możemy wkleić w dowolne miejsce naszego kodu.
6. Edycja i dodawanie styli CSS
Style CSS znajdują się w katalogu "css" głównym stylem wczytywanym jako główny na samym końcu jest styl "main.css". Domyślnie mamy dostępne style z frameworka Twitter Bootstrap, jego dokumentacja jest dostępna na stronie: twitter.github.com/bootstrap/.
Możemy oczywiście tworzyć swoje własne style od zera, w tym celu należy usunąć deklaracje bootstrapa, zarówno css jak i js.7. Edycja i dodawanie kodu JS
Edycja JavaScript odbywa się analogicznie do kodu CSS.
