Poradnik powstał w ramach programu praktyk i staży organizowanych przez Krakweb od ponad 12 lat. 

Style strony modyfikujemy tylko lokalnie (następnie wykonujemy push na serwer, czyli publikujemy za pomocą GITa).

Do zobaczenia wprowadzonych zmian potrzebny jest program GULP. Jak go zainstalować dowiesz się z instrukcji o nazwie "Konfiguracja lokalna" (od punktu 20.)
Aby GULP poprawnie działał potrzebne są wszystkie wcześniejsze punkty poradnika (tj. Xampp, lokalny CMS, GIT bash itd.).

Uwaga! Pamiętaj, aby przed każdą pracą na stronie lokalnej, zaimportować do niej bazę danych z serwera!

Jak modyfikować kod CSS szablonów ICEberg CMS?

Uruchom lokalnie bazy danych i Apache w Xampp.

Uruchom GIT bash

Przejdź komendą cd do ścieżki ze swoim projektem (tam gdzie instalowałeś gulpa), a następnie uruchom program gulp (komendą gulp).

Gulp po chwili powinien się uruchomić. Jeśli nie dzieje się to przez dłuższy czas, prawdopodobnie nie uruchomiłeś Apache lub mySQL.

Powinna otworzyć się twoja lokalna strona internetowa na porcie 3000 (czyli localhost:3000).

Struktura szablonu ICEberg CMS - najważniejsze foldery 

Aby modyfikować wygląd strony, wejdź w folder z jej plikami. Następnie frontend>templates>template strony (nie default)>css wystrój strony).

Tu znajdziesz 3 najważniejsze foldery: settings, ze zmiennymi, modules ze stylami do poszczególnych modułów, oraz template ze stylami do poszczególnych części struktury strony.

W folderze settings najważniejsze będą pliki _colors.scss i _typography.scss. W colors możesz dodać zmienną, lub nadać którejś zmiennej odpowiedni kolor.

Osobiście radzę podmienić zmienne $primary i $secondary na kolory z własnej palety kolorów. Wtedy, od razu zobaczysz zmiany na stronie (bo te zmienne są używane w większości plików).

W pliku typography możesz importować swoje czcionki. Wystarczy wkleić linijkę z @import i dodać do zmiennej $font-family-base nazwę tejże czcionki po przecinku (w apostrofie).

W folderze modules są pliki odpowiadające poszczególnym modułom. Przykładowy plik:

W folderze templates znajdują się pliki odpowiadające każdej części strony: nagłówkowi, stopce, stronie głównej itd.

Przykładowo dla _footer.scss: