Aangepaste CSS

Stappenplan Alle abonnementen 2 min. leestijd

Gebruik Stijlblad / CSS als instellingen, lettertypen en kleuren niet doen wat je nodig hebt: een speciaal hovereffect, de lettergrootte van één item of een kleine correctie voor je thema. De CSS wordt met het menu opgeslagen en aan je webwinkel toegevoegd als je publiceert.

Opmerking

Voor aangepaste CSS heb je basiskennis van CSS nodig. Schrijf je liever geen code? Neem contact met ons op; we helpen je gratis met kleine stijlwijzigingen.

Aangepaste CSS toevoegen

1. Het tabblad Geavanceerd openen

   Klik in de menu-editor op het pictogram Geavanceerd (</>) in de linkerzijbalk (1).

   

   Open het tabblad Geavanceerd (1) en typ je CSS bij Stijlblad / CSS (2).

2. Je CSS toevoegen

   Typ of plak je CSS bij Stijlblad / CSS (2), in plaats van de placeholder //enter css custom here.

3. Opslaan en publiceren

   Klik op Opslaan en daarna op Publiceren. Vernieuw je webwinkel geforceerd om het resultaat te zien.

De juiste elementen kiezen

De CSS wordt ongewijzigd aan de pagina toegevoegd en is niet beperkt tot dit menu, dus maak je selectors specifiek:

• Alle menu’s: begin met .gm-menu.
• Eén menu: begin met .gm-menu-<ID>. Je vindt de ID door met de rechtermuisknop op het menu in je webwinkel te klikken en Inspecteren te kiezen.
• Eén item: geef het een Extra klassenaam in de sectie Geavanceerd van de instellingen van het item (zie Een menu-item bewerken) en gebruik die klasse.

Bijvoorbeeld om een item met de extra klassenaam sale-item vet en rood te maken:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

Het tabblad Geavanceerd bevat ook Beschikbaarheid per markt, waarmee je het menu beperkt tot geselecteerde markten. Zie Menu’s per markt tonen.

Problemen oplossen

Mijn CSS heeft geen effect

• Controleer of je na het opslaan op Publiceren hebt geklikt.
• De eigen stijlen van de app gebruiken vaak !important, dus je regel heeft dat misschien ook nodig.
• Zoek naar typfouten, zoals een ontbrekende }: één fout kan alle regels erna laten mislukken.

Gerelateerde pagina's

• Kleuren van het menu aanpassenStel de kleuren in van de menubalk, submenu's, tabbladen, productlabels en de knop In winkelwagen.
• Lettertypen van het menu aanpassenKies de lettertypefamilie, letterdikte en lettergrootte voor elk onderdeel van het menu.
• Een menu-item bewerkenWijzig de titel, link, het pictogram, de kleuren, badge, het submenu en de zichtbaarheid van een item, of dupliceer, verplaats en verwijder het.

Was dit nuttig?

Probleem melden