Computertrainingen & WordPress Webdesign

WooCommerce CSS stylesheet aanpassen en overzichtelijker maken

woocommerce-logoSoms wil je wat instellingen aanpassen in een CSS stylesheet. Dat is bij de WooCommerce CSS stylesheet tot nu toe niet eenvoudig. Misschien gaan ze dat in de toekomst nog eens anders doen. Maar nu staat alles als het ware op één regel. Ook bij de optie “Automatische terugloop” (Word Wrap) blijft alles één brij van codes.

Maar u kunt uw WooCommerce CSS stylesheet aanpassen en overzichtelijker maken op een makkelijke en snelle manier, zodat de CSS file hierdoor overzichtelijker wordt.

Het makkelijkst is dit te doen met het programma Notepad++, een kladblok programma met extra opties, dat gratis de downloaden is van het Internet.

Met de optie “Vervangen” (Zoeken & Vervangen) kun je met een kleine handeling de CSS stylesheet aanpassen.

Bijvoorbeeld van:

.clear{clear:both}.nobr{white-space:nowrap}.etc…

Naar:

.clear {
clear:both
}
.nobr {
white-space:nowrap
}
.etc…
 

Doe de volgende stappen:

1. Ga naar de optie Zoeken & Vervangen
2. Geef als zoekoptie het teken {
3. Vervang dit met {\n   (via de knop “Alles Vervangen”)

Let op, zorg dat de zoekmethode op “Uitgebreid” staat.

Vervolgens:
4. Geef als zoekoptie het teken }
5. Vervang dit met \n}\n
Klaar!
 

Voordeel: Sneller en overzichtelijker werken
Het is nu zelfs mogelijk om in Notepad++ de gegevensstructuur van de stylesheet samen te vouwen (samenvouwen) of uit te vouwen (uitvouwen) met de opties ALT 0 en ALT+SHIFT 0 om nog makkelijker met de file te werken. Met Samenvouwen worden de classes wel getoond, maar de instellingen niet. Hiermee zoek je sneller naar de gewenste class en door te klikken op het + teken voor de class, worden de instellingen van deze class uitgevouwen.

Voordat u de file gaat uploaden, zorg dat u een back-up hebt van de originele file, voor het geval er wat fout is gegaan.

Ik bied graag mijn service aan voor uw WordPress Website onderhoud of aanpassingen te doen. Ook leveren we complete Thema’s op maat zowel voor WordPress Blogs, Websites, Webshops, etc.  Wij verzorgen ook WordPress Trainingen en Workshops. Meer info is ook te vinden op www.PlusComp.nl

Succes!

Post to Twitter