Jak dodać własny CSS do PrestaShop?

Dzięki kaskadowym arkuszom stylów (czyli CSS), każdy może w szybki i prosty sposób odmienić wygląd swojej strony www, w tym także sklepu internetowego. Jeśli działamy w oparciu na platformę PrestaShop, to jej otwartoźródłowość daje nam dostęp do wszystkich plików CSS, pozwalających na modyfikowanie wizualnej strony praktycznie każdego elementu naszej witryny. Pierwszy odruch większości początkujących to po prostu edycja tychże plików. Takie rozwiązanie oczywiście przyniesie oczekiwane rezultaty, jednak będzie miało pewną wadę – w przypadku aktualizacji oprogramowania sklepu lub też poszczególnych modułów (jeśli dokonywaliśmy ich modyfikacji) możemy stracić wszystkie zmiany, wprowadzone przez nas w plikach CSS. Nie musimy chyba mówić, jak uciążliwe i trudne może być wprowadzanie tych zmian od nowa. Co zatem zrobić, aby dokonać edycji CSS “po bożemu”, nie martwiąc się możliwością ewentualnej utraty naszej pracy?

Proponujemy skorzystanie z bezpłatnego modułu contentBox. To dodatek, która pozwala na wstawienie do naszego sklepu praktycznie dowolnego kodu HTML, CSS lub JS. My wykorzystamy go do załączenia pliku CSS zawierającego wprowadzane przez nas zmiany wizualne. Dzięki odpowiedniemu wykorzystaniu właściwości CSS, określających, które z wczytanych do przeglądarki stylów mają obowiązywać na stronie, w naszym sklepie zostaną uwzględnione właśnie te reguły, które dodamy do wspomnianego pliku. A zatem…do dzieła!

Dodawanie własnego CSS do sklepu PrestaShop

Najpierw musimy zainstalować moduł contentBox. Jest on dostępny tutaj:

https://contentbox.org/

Twórcy dodatku dali możliwość wygenerowania modułu o podanej przez nas nazwie – dzięki temu możemy instalować go w naszym sklepie wielokrotnie, bez obaw o bałagan, spowodowany kilkukrotną instalacją modułu o tej samej nazwie.

contentbox generowanie modułu

contentbox generowanie modułu - wpisywanie nazwy

Sugerowana przez nas nazwa to Custom CSS albo Własny CSS…ale oczywiście może być to cokolwiek – jak kto woli. My w dalszej części tekstu będziemy posługiwali się nazwą Custom CSS.

Po instalacji modułu (przebiegającej standardowo, czyli poprzez przejście do sekcji „Moduły” i wskazanie lokalizacji pliku .zip z modułem) należy zmodyfikować jego pozycję w sekcji „Header”, w menu „Moduły” -> „Pozycje”, przesuwając go na sam koniec listy. Dzięki temu dodany przez nas plik CSS wczyta się na samym końcu ładowania strony, nadpisując wszystkie wskazane przez nas reguły.

Gdybyśmy nie zmienili kolejności, to mogłoby dojść do sytuacji, w której jako obowiązujące zostałyby załadowane domyślne pliki CSS szablonu sklepu oraz zainstalowanych modułów (a właśnie tego chcemy uniknąć).

Po ustawieniu odpowiedniej kolejności należy przejść do ustawień naszego modułu i wskazać plik zawierający te reguły CSS, którymi chcemy zastąpić domyślnie obowiązujące w na stronie. Jeśli nie stworzyliśmy jeszcze takowego, możemy załadować pusty arkusz, który później będzie przez nas uzupełniany kolejnymi regułami CSS.

Najpierw przechodzimy do konfiguracji naszego modułu i klikamy na „Dodaj plik”…

dodawanie arkusza css do custom css

…po czym wskazujemy jego lokalizację na dysku twardym naszego komputera. Następnie klikamy na przycisku „Otwórz”, a na końcu na „Zapisz”.

dodawanie arkusza css do custom css - 2

Teraz, gdy arkusz został przesłany na serwer, musimy jeszcze tylko włączyć jego dodawanie do sekcji <head> strony. Wystarczy, że w sekcji „DEVELOPER CONFIGURATIONS” zaznaczymy go na liście znajdującej się obok etykiety „Load Files on HTML Header”, a następnie klikniemy na przycisku „Zapisz”.

dodawanie arkusza css do nagłówka strony

I gotowe! 🙂

Jak edytować nasz plik CSS?

Przesłany przez nas plik arkusza trafił na serwerze do katalogu /modules/customcss/content. Po otwarciu go za pomocą dowolnego edytora programistycznego (my korzystamy z Notepad++) będziemy mogli dodawać, edytować i usuwać poszczególne reguły CSS, definiujące wygląd elementów na naszej stronie WWW. Osoby dopiero raczkujące w tym temacie odsyłamy do zasobów Webkod.pl oraz Wc3school, z których sami korzystaliśmy podczas nauki…i nadal korzystamy w chwilach zwątpienia.

Do pobrania

Dla osób chcących szybko zacząć pracę nad zmianą wyglądu swojego sklepu, załączamy potrzebne do tego narzędzia: Notepad++ oraz moduł contentBox, przemianowany na Custom CSS.

Notepad++ wersja 7.6 – kliknij, aby pobrać

Custom CSS – kliknij, aby pobrać

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *