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

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

Poprzedni artykuł
Następny artykuł
Foto: W jaki sposób modyfikować style strony?
W jaki sposób modyfikować style strony?

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.

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

Przeczytaj również

Dyskusja

Zamknij

Jesteśmy poza biurem, zostaw telefon a oddzwonimy do Ciebie.

 

Krakweb Twój nr telefonu będzie wykorzystany tylko jednorazowo, jeżeli nie wyrazisz zgody to nie zadzwonimy więcej do Ciebie.

We will call you