23-03-2016 om 12:41:45 | Erwin Vaneveld

Css webshop tips and tricks voor een mooi resultaat


Is css kennis echt nodig voor je Shoptrader webshop? Uiteraard kun je heel veel aanpassen via website uiterlijk in de backoffice, maar voor de puntjes op de i is het toch wel eens handig. Is het lastig te leren? Valt wel mee, er is zo veel kennis online. Je hebt echt geen cursus nodig om te starten.
 

Css van je webshop aanpassen
 

De meeste designers en programmeurs werken met Firebug van Firefox, ook wel Chrome maar ik ga hier even uit van Firefox. De add-on Firebug kun je binnen Firefox installeren. Daarmee kun je eigenlijk vooraf css aanpassen in je browser en als dat bevalt plaats je dit in de default.css (komt straks) om dit definitief door te voeren. Installeer Firefox met Firebug en open je webwinkel. Eenmaal geïnstalleerd druk op je rechtermuisknop Element inspecteren met Firebug, dan zie je een extra scherm ongeveer zoals hieronder. Wanneer je een specifiek element wilt aanpassen klik dan op het vierkantje (2e knopje in de balk) en klik op een onderdeel, in mijn geval bijvoorbeeld een driehoekje voor alle list items in de footer.

css aanpassen webshop

In dit geval ga ik de driehoekjes weghalen. Jaha, er komt een optie om dit weg te halen maar nu weet je alvast hoe dat kan via css. Klik op het element div.box ul li td.liicon en doe een paar keer tab net zolang tot er een nieuwe regel verschijnt. Dan plaats ik in dit geval display:none; erbij. Maak van dit: div.box ul li td.liicon { width: 20px; } maak ik dit: div.box ul li td.liicon { width: 20px; display:none; } Je ziet dit real-time wijzigen in je browser. Uiteraard alleen bij jou. Wil je dit echt doorvoeren dan zul je het hele stuk moeten plaatsen in default.css. Wat dat is lees je verder.

css mogelijkheden
 

Default.css
 

Default.css wordt als laatste css ingeladen en overruled alle bestaande css. Kopieer het hele stukje in z’n geheel in default.css. Sla deze op. Controleer de homepage door nog even te refreshen met ctrl f5. En, weggewerkt die driehoekjes? Default.css vind je onder Website uiterlijk, css aanpassen. Het is trouwens aan te raden om een kladblok te gebruiken. Kopieer de hele inhoud van de css naar je kladblok. Bewerk in kladblok. Dan vanuit kladblok in de css te kopiëren. Liever nog notepad plus plus. Lees verder hierover.
 

Handige tools en sites
 

Hoe weet je nu wat er allemaal mogelijk is met css? Een bekende website met heel veel uitleg en voorbeelden is bijvoorbeeld w3schools http://www.w3schools.com/css/default.asp. Eerder in dit artikel heb ik al verteld dat je het best de default.css eerst in een kladblok kan kopiëren. Dan bewerken en dan terug kopiëren. Voor kladblok gebruiken veel designers en programmeurs notepad plus plus https://notepad-plus-plus.org/. Wanneer je hier css in bewerkt zal deze je helpen met voor gedefinieerde eigenschappen. Ook Firebug zal je helpen met voor gedefinieerde eigenschappen.


Vergeet tables, gebruik divs
 

Waarom? Simpel, minder code en meer mogelijkheden. Tables zijn ouderwets. Ook zijn divs beter te bewerken wanneer het gaat om responsive webdesign. Voorbeeld wat je zelf zou kunnen doen in je webwinkel. Maak een informatiepagina aan en bewerk deze. Klik op de code knop in de teksteditor. Plaats hier onderstaande 3 regels code en sla op. Bekijk de pagina aan de voorkant door op het monitoricoontje te klikken. <div class=”kolom1″>kolom1</div> <div class=”kolom2″>kolom2</div> <div class=”kolom3″>kolom3</div> Plaats in je default.css de volgende code: div.kolom1{ float:left; position:relative; background:#ff0000; width:33%; } div.kolom2{ float:left; position:relative; background:#33ff00; width:33%; } div.kolom3{ float:left; position:relative; background:#0000ff; width:33%; } Bekijk wederom de pagina aan de voorkant. Dan heb je dit resultaat:

resultaat css aanpassingen


En op mobiel dan?
 

In bovenstaand voorbeeld zie je 3 kolommen naast elkaar staan. Je zou hier 3 afbeeldingen in kunnen plaatsen. Op mobiel wil je wellicht geen 3 afbeeldingen naast elkaar maar netjes onder elkaar. Dit wordt gerealiseerd door @media regels. Ook wel een extra css regel die bij bepaalde resoluties juist extra css toepast of uitsluit. In onderstaand voorbeeld plaats ik wederom css voor de 3 kolommen echter zet deze op 100% width. Ik plaats onderstaande code onder de code (gebruikt in het vorige hoofdstukje) weer in default.css en sla deze op. @media screen and (max-width: 480px) { div.kolom1{ width:100%; } div.kolom2{ width:100%; } div.kolom3{ width:100%; } } Ga naar de voorkant en bekijk het resultaat. Gebruik je Firefox dan kun je met ctrl shift m (mobiel) de resolutie verkleinen. Zoals je ziet schiet hij bij 480 en kleiner naar 3 kolommen onder elkaar.

css responsive
 

Gebruik iconen binnen je webshop
 

Iconen maken nou eenmaal je website professioneler dat is een feit! Shoptrader gebruikt ook een mooie iconen-set binnen je webshop. Daar kun je zo gebruik van maken. Ga naar https://icomoon.io/preview-ultimate.html en type een zoekwoord. In mijn geval zoek ik op truck omdat ik een vrachtwagentje wil tonen omdat ik bijvoorbeeld gratis verzend boven 25 euro. Uiteraard kun je van alles zoeken. Ik zie daar bijvoorbeeld truck staan. Ik klik in mijn teksteditor op code en plaats de volgende code: <span class=”icon-truck”>&nbsp;</span>Gratis verzenden boven &euro;25,- En de css pas ik ook enigszins aan met wat shaduw text-shadow: 2px 2px 4px #666;

css design

Tot zover! Nogmaals css is leuk om een beetje te kennen echter niet noodzakelijk om je webshop in te richten. Het geeft je net even meer mogelijkheden. Mocht je commentaar hebben… Er is een hele nieuwe website met maar liefst 15000 css regels (ja zo gek kan je het maken) en een mooi systeem om commentaar te plaatsen. Heb je zelf nog tips of tricks of wil je iets wijzigen op je webshop maar je weet niet hoe, deel deze dan hieronder in de reacties. Ik ben erg benieuwd naar jullie ervaringen.