• Terug naar overzicht

    Opmaak wijzigen met de ingebouwde CSS-editor

    3
    apr
    Door Ninke

    Met de recente update van het CMS is het mogelijk om CSS-bestanden van een website aan te passen. Dit maakt het makkelijker om zelf kleine (of grote) opmaak wijzigingen door te voeren.


    Website-ontwerpen kennen vele variaties en stijlen. Zo kan het voorkomen dat naast de algemene opmaak van de website, elk los contentvlak weer voorzien is van een eigen opmaak. Soms heeft een vlak een schaduwrand of is er een transparantie toegepast. Om dit technisch te kunnen realiseren wordt er gebruikt gemaakt van bepaalde code in HTML en CSS. De HTML vormt hierbij de algemene structuur, de CSS bepaalt hoe informatie er vervolgens uit komt te zien. Een opmaak kan door middel van een gekoppeld CSS-bestand gerealiseerd worden waarin verschillende onderdelen en/of vlakken van een website gedefinieerd zijn.

    Wijzigingen zijn direct zichtbaar
    Hoe gaat gaat het bewerken van het CSS-bestand met de ingebouwde CSS-editor in zijn werk? De CSS-manager is als nieuw item beschikbaar in het dashboardmenu, waarna de website waarin je werkt wordt ingeladen. Onderin de pagina is een nieuw vlak zichtbaar waarin de CSS-code wordt getoond en die te bewerken is. Wijzigingen zijn direct zichtbaar en kunnen worden doorgevoerd. Een foutje gemaakt? Geen probleem. Met het opslaan wordt een nieuwe versie van het CSS-bestand aangemaakt waarbij je via het dropdown-menu altijd weer een vorige versie kunt selecteren.

    Geen FTP-toegang benodigd
    Het grote voordeel van de CSS-editor in het CMS is dat kleine wijzigingen in de opmaak niet langer meer met FTP-toegang uitgevoerd hoeven te worden. Bijvoorbeeld: een navigatiemenu van een website heeft tekstknoppen. De tekst bleek voor de bezoekers van de website erg moeilijk te lezen. De tekstgrootte van de knoppen was te klein. In de CSS-manager kun je heel eenvoudige de tekstgrootte aanpassen zodat de knoppen beter leesbaar zijn.
     

    Voor:   Na:

    #menu ul li a{

        font-size: 10px;

    }

     

    #menu ul li a{

        font-size: 14px;

    }

    Foutje gemaakt?
    Met een paar kleine wijzigingen is het menu nu beter te zien wat de usability ten goede komt. Hierbij dient natuurlijk wel de kanttekening gemaakt te worden dat enige kennis van HTML en CSS wenselijk is. Ook zonder deze kennis kunnen aanpassingen gemaakt worden en kun je altijd weer terug naar een vorige versie in het geval van gemaakte fouten. Kom je er vervolgens toch niet uit dan kun je altijd contact met ons opnemen.

    Tip: op www.codecademy.com/tracks/web staan vele handige tips en trucs als je je kennis van HTML en CSS wilt bijspijkeren (Engels).

Deel dit