Jak zmodyfikować wygląd strony? Szablony ICEberg CMS - style i HTML.

[poradnik dla początkujących web developerów] Po wprowadzeniu struktury oraz treści na stronę internetową (przez ICEberg CMS), kolejnym krokiem wdrożenia jest dostosowanie jej wyglądu - wdrożenie zaprojektowanej grafiki. W tym celu posłuży modyfikacja styli strony. W tym poradniku dowiesz się jak to zrobić...
2021-08-27 11:48
1 minuta czytania

Jak modyfikować kod CSS szablonów ICEberg CMS?

Uruchom lokalnie bazy danych i Apache w Xampp.

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

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).

 Najważniejsze foldery

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).

Plik styli

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).

Czcionki

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

Moduły

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

Templates

Przykładowo dla _footer.scss:

Footer


Blog Artykuły
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty klawiszowe