Vormgeving van de webwinkel aanpassen via aangepaste CSS [NB]

Wat is CSS?

CSS staat voor Cascading Style Sheets. CSS wordt gebruikt voor het opmaken van HTML-pagina's. Met CSS is de opmaak en vormgeving van uw webshop vanuit één bestand te regelen. Op W3schools is CSS makkelijk te leren.

CSS aanpassen

Het uiterlijk van de webwinkel kan worden aangepast via de thema instellingen. Naast de thema instellingen is er nog een mogelijkheid tot het verder aanpassen van het uiterlijk van de webwinkel. Denk hierbij aan het veranderen van de positie & grootte van een object of de lettertype grootte en kleur van een object.

Via DESIGN > Thema aanpassen > Aanpaste CSS kan de aangepaste CSS worden benaderd. Door CSS toe te voegen kan de originele CSS van het thema worden overschreven.

aangepastecss.png

Element inspecteren

Internetbrowsers zoals Google Chrome & Firefox hebben een mogelijkheid tot het inspecteren van een HTML element. Een HTML element kan CSS bevatten die met via het inspecteren kan worden uitgelezen en worden aangepast. De CSS van het HTML object kan worden gekopieerd en vervolgens worden geplakt in de de aangepaste CSS. De pagina kan vervolgens ververst worden om de wijziging te kunnen zien. 

element_inspect.gif

Google Chrome

  1. Klik rechter muisklik op een object die u wilt inspecteren
  2. In het menu klikt u vervolgens op inspecteren

of

  1. Klik rechts bovenin op de 3 puntjes
  2. Klik vervolgens op Meer hulpprogramma's
  3. Klik vervolgens op Hulpprogramma's voor ontwikkelaars

ontwikkelmenuchrome.png

Firefox

  1. Klik rechter muisklik op een object die u wilt inspecteren
  2. In het menu klikt u vervolgens op inspecteren

of 

  1. Klik rechts bovenin op de 3 streepjes
  2. Klik vervolgens op Ontwikkelaar
  3. Klik vervolgens op Inspecteer

Safari (Mac)

  1. Klik links bovenin op Safari
  2. Klik vervolgens op Voorkeuren
  3. Klik vervolgens op Geavanceerd
  4. Activeer Toon Ontwikkel-menu in menubalk

    activeer_ontwikkelmenu.png

  5. Sluit vervolgens het menu
  6. Klik rechter muisklik op een object die u wilt inspecteren
  7. In het menu klikt u vervolgens op inspecteren 

Safari (Windows)

  1. Klik rechts bovenin op het tandwiel icoon
  2. Klik vervolgens op Voorkeuren
  3. Klik vervolgens op Geavanceerd
  4. Activeer Toon Ontwikkel-menu in menubalk

    ontwikkelmenusafariwin.png

  5. Sluit vervolgens het menu
  6. Klik rechter muisklik op een object die u wilt inspecteren
  7. In het menu klikt u vervolgens op inspecteren 

Fouten opsporen

Een fout met CSS is snel gemaakt. Via Csslint.net kunnen fouten worden opgespoord. Kopieer de inhoud van de aangepaste CSS in het witte vlak en klik vervolgens op LINT!. De verbeterpunten zullen vervolgens worden getoond.

csslint.png

Hebt u meer vragen? Een aanvraag indienen