Stylizacja komponentów na panelu klienta przy pomocy klas

Aby sprawdzić czy dany komponent ma przypisaną klasę należy:

Użyć prawego przycisku myszki

(Ukaże się lista z możliwościami do wyboru, klikamy Zbadaj)

Lub przy użyciu przycisku F12

1 Opcja ta jest odpowiedzialna za zbadanie konkretnej rzeczy na panelu, np. przycisku, widoku pakietu, widoku rodzaju, widoku koszyka itd.

Użycie opcji nr 1 następnie wybranie 2 "zobacz menu" i ukaże nam się po prawej stronie element, który wybraliśmy.

Ważne aby była to zakładka elementy, widoczny jest wtedy cały 3 znacznik:

<a class="diet-type__view-menu css-1uu7lf5" href="/menu">Zobacz menu</a>

W tym przypadku opieramy się na klasie diet-type__view-menu.

W panelu administracyjnym przechodzimy do zakładki Konfiguruj markę > Wygląd panelu klienta

Odszukujemy kontener CSS, wpisujemy naszą klasę i ją formatujemy:

( przy deklaracji klasy -> uwaga musimy pamiętać o kropce oraz klamrach)

Przykładowa stylizacja klasy:

.diet-type__view-menu {

text-decoration: none;

border: dotted; <--- Właściwość border-style określa, jaki rodzaj ramki ma być wyświetlany, np. dotted określa kropkowaną.

font-size: 14px; <-- Właściwość font-size określa rozmiar tekstu, zazwyczaj wyrażana w px.

color: red; <-- Zmiana koloru tekstu przy pomocy color, na dowolny kolor w postaci nazw koloru lub RGB .

width: 9em; <-- Szerokość względem rozmiaru czcionki elementu (np. 9em oznacza 9 razy większy rozmiar od aktualnej czcionki)

height: 3em; <-- Wysokość względem rozmiaru czcionki elementu (np. 3em oznacza 3 razy większy rozmiar od aktualnej czcionki)

line-height: 2em; <-- Właściwość line-height określa wysokość linii.

text-align: center; <-- Właściwość text-align określa poziome wyrównanie tekstu w elemencie

border-radius: 30px; <-- Właściwość border-radius definiuje promień narożników elementu.

}

Co daje nam taki efekt: