Tworzenie szablonu Windu

W celu dodania nowego szablonu graficznego należy wejść w zakładkę odpowiadającą szablonom graficznym, w niej kliknąć w pole „Dodaj”, a następnie nazwać odpowiednio nowy szablon, który chce się stworzyć.

Osobom, które nie są zaawansowane informatycznie i graficznie zaleca się stworzenie kopii szablonu, który już istnieje, gdyż jest dostarczony wraz z systemem CMS. Jest to znacznie szybszy sposób. Na prawo od nazwy istniejącego szablonu, który ma się zamiar powielić, widnieją dwie zielone strzałki i w nie należy kliknąć. Pojawi się dokładnie taki sam szablon. Jedyne, co należy zrobić to zmienić jego nazwę i gotowe.

Po tej czynności można już przejść do edycji pliku głównego.

Szablony w Windu automatycznie wykorzystują Twitter Bootstrap, który inaczej zwany jest frameworkiem CSS. Pozwala on stworzyć ładne i dość przejrzyste strony www, gdyż jest systemem stylów css. Styl, mający już domyślnie wdrożony Twitter Bootstrap operuje już z automatu gotowymi elementami.

Przejdźmy teraz do samego kodu. Warto wiedzieć, co znajduje się na konkretnych pozycjach.

W 8,9 i 25 linijce kodu znajduje się kilka odniesień do $meta, która zwraca metatagi. Pomiędzy 13 i 15 linijką obecny jest kod odpowiadający za wstawianie stylów CSS w całkowitej zgodności, jeśli chodzi o konfigurację systemu i zawartość katalogu, zachowując kolejność alfabetyczną z dodaniem pliku main.css na końcu, jako ten główny. Od linijki 16 do 19 określa się zmienne, których nie może zabraknąć w kodzie JS. W dalszych linijkach od 22-24 znajduje się kod, przy pomocy którego można wstawić pliki JS adekwatnie do plików CSS. Na 28 linijce dostrzec można Widżet odpowiadający za powiadomienia. Na 29 pozycji kodu includuje się główny template, tj. ten, który jest ustawiony do podstrony. Znaleźć go można wchodząc w katalog „views”.

Po kodach można już przejść do definiowania i edytowania nowych widoków.

Widoki, to nic innego jak pliki, które znaleźć można we wspomnianym już katalogu „views”. Jeden taki plik można przypisać do podstrony. Ogólnie rzecz ujmując, za pomocą tych plików da się zdefiniować kilka szablonów. W celu dodania widoku trzeba w wyżej wymienionym katalogu kliknąć na plusik w kolorze zielonym i nazwać nowy widok. Nazwa nie może się powtarzać w danym polu katalogowym. Po tej czynności nowy element jest już zauważalny w panelu. Warto wiedzieć, że element wspólny dla całego zespołu widoków można umieścić w specjalnym katalogu zwanym „common”. Nie ma potrzeby ciągłego powielania kodu. Chcąc dokonać edycji widoku, należy nacisnąć w niebieski ołówek, aby pojawił się kod odpowiadający wybranemu szablonowi. Elementy, których nie może zabraknąć w środku widoku to między innymi tytuł, treść podstrony (generowana poprzez eval) oraz widżety.

By wzbogacić szablon o obraz trzeba znowu użyć zielonego plusa, jednak tym razem w katalogu „image”. Poprzez ikonę „i” znajdująca się przy nowo powstałym pliku wchodzi się w ścieżkę, którą z kolei kopiuje się, a potem wstawia do kodu w dowolnym miejscu.

Styl CSS – jego też należy dodać i wyedytować. By to zrobić, należy wejść w katalog „css”, gdyż tam style ccs się znajdują. Styl główny, który wczytuje się na końcu to ‚main.css”. Domyślne style dostępne są z poziomu frameworka. Istnieje również możliwość utworzenia stylu od samego początku.
Jeśli chodzi o kod JS, to tworzy i edytuje się go podobnie, jak kod CSS.