Zmiany CSS w szablonach sklepu dla trybu ciemnego sklepu

Użytkownicy, którzy korzystają ze standardowych lub dodatkowych gotowych szablonów graficznych nie muszą wprowadzać w swoich szablonach żadnych zmian. Niezbędne zmiany zostały wprowadzone do tych szablonów w ramach aktualizacji sklepu.

W przypadku szablonów indywidualnych lub tworzonych przez zewnętrzne firmy może być potrzeba przygotowania dodatkowego kodu CSS, który umożliwi wyświetlanie ciemnego trybu. Tryb wysokiego kontrastu (tryb ciemny) jest możliwy do włączenia jeżeli sklep korzysta z modułu "Rozszerzenie WCAG", który dostępny jest w menu Wygląd / Moduły stałe. Opcja kontrastu jest dostępna tylko dla szablonów utworzonych w oparciu o system szablonów oznaczonych jako V2.

Zmiana sklepu na tryb ciemny polega na zmianie kodu CSS szablonu. Jako tło podstawiany jest kolor czarny, litery oraz ramki w kolorze białym. Elementy nawigacyjne np. przyciski wyświetlane są w kolorze żółtym z czarnymi literami. Takie zestawienie kolorów zapewnia wysoki kontrast dla osób z niepełnosprawnościami.

Moduł zawiera predefiniowane ustawienia większości elementów. Jednakże w przypadku indywidualnych szablonów i zastosowanych w nich rozwiązań może zaistnieć potrzeba dodania dodatkowego kodu CSS dla wybranych elementów. Taka sytuacja może się pojawić np. dla elementów, które nie mają ramek, a mają tylko cień. Po zmianie trybu na ciemny i tło sklepu i tło danego elementu będzie czarne - co spowoduje, że element, który ma cień, będzie się zlewał z resztą strony. W takim przypadku dla tego elementu trzeba dodać ramkę w trybie ciemnym.

UWAGA ! Poniższe informacje przeznaczone są dla osób, które znają podstawy kodu CSS. Nieprawidłowo wprowadzone zmiany lub modyfikacje kodu przez osoby bez znajomości CSS mogą prowadzić do błędnego wyświetlania strony sklepu.

Tryb ciemny w sklepie jest identyfikowany przez klasę CSS o nazwie .Kontrast, która jest dodawana do elementu body w kodzie sklepu. Dzięki temu podając jako pierwszy parametr CSS w/w klasę można tworzyć reguły CSS tylko dla trybu ciemnego. Dodatkowy kod CSS dla trybu ciemnego zalecamy dodawać na końcu pliku style.css w katalogu /css szablonu. Można także utworzyć dodatkowy plik ze stylami CSS dla trybu ciemnego i wczytywać go po pliku głównym CSS szablonu.
 

Jak stosować dodatkowy kod CSS ?

Jeżeli przykładowo element z klasą CSS o nazwie .TloMenu po zmianie na tryb ciemny ma mieć dodaną ramkę, trzeba wstawić kod:

body.Kontrast .TloMenu { border:1px solid #fff; }

Innym przykładem może być dodanie dla nagłówka boxów tła o kodzie koloru #333333, w takim przypadku trzeba wstawić kod:

body.Kontrast .BoxNaglowek, body.Kontrast .BoxNaglowek *:not(.BoxRozwinZwin), body.Kontrast .BoxNaglowekKategorie, body.Kontrast .BoxNaglowekKategorie *:not(.BoxRozwinZwin) { background:#333333 !important; }

Important trzeba dodać jeżeli nagłówek w standardowej wersji ma inny kolor, żeby wymusić podstawienie nowego koloru. W/w kod wstawia tło we wszystkie elementy nagłówka boxów, ale pomija elementy odpowiedzialne za rozwijanie boxów w wersji mobilnej.

Żeby dopasować kod CSS szablonu do trybu ciemnego trzeba włączyć moduł "Rozszerzenie WCAG" w menu Wygląd / Moduły stałe i następnie w sklepie w module włączyć "Kontrast". Po tym będzie można sprawdzić, które elementy szablonu są błędnie wyświetlane i dla których trzeba dodać dodatkowy kod CSS.

Jeżeli w Twoim sklepie w trybie ciemnym część elementów nie wyświetla się poprawnie, a Ty nie wiesz, jak wprowadzić te zmiany - zleć je swojemu informatykowi lub skontaktuj się z nami (sprawdzimy co jest źle i określimy koszty modyfikacji).