Een content pagina aanpassen met HTML en CSS

Eenmaal u een gewone pagina hebt aangemaakt met behulp van één van de vooraf gedefinieerde templates, zal u misschien verder willen gaan. Misschien wil u onderaan een nieuw blok toevoegen of een grote gecentreerde header bovenaan toevoegen?

Wanneer u omschakelt naar expert modus kan u rechtstreeks de onderliggende taal bewerken achter de pagina, die de HTML- en CSS-code is.

HTML en CSS zijn de talen achter elke internetpagina; u kan er zeer geavanceerde zaken mee doen, maar in essentie zijn ze ontworpen om expressief en eenvoudig te leren te zijn. Nadat u er enige tijd mee heeft gespeeld, kan u meestal eenvoudige dingen doen, zoals het wijzigen van de lay-out van uw pagina, het wijzigen van de grootte van uw tekst, ...

In dit artikel overlopen we enkele basiswijzigingen aan een standaard paginatemplate. Het is niet de bedoeling dat we HTML en CSS aanleren aangezien er anderen zijn die dit veel beter kunnen dan wij. Dit zijn echter voorbeelden waarmee u kan beginnen en waarop u kan voortborduren.

We gaan eerst een nieuwe pagina aanmaken op basis van de "Hoofdblok + rechter kolom" template, zoals we gezien hebben in het artikel Een gewone contentpagina aanmaken. Vervolgens gaan we overschakelen naar de expertmodus met behulp van de link bovenaan rechts van de interface. U heeft nu twee "CSS" en "HTML" tabbladen, die de code achter de pagina bevatten.

De CSS-tab is voorlopig nog leeg aangezien er geen specifieke CSS-code is. De HTML van de pagina is evenwel hier:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Een nieuwe rij toevoegen

Elke <div> tag vertegenwoordigt een blok in de pagina; de klasse die gekoppeld is aan elk blok bepaalt het voorkomen ervan, zoals de breedte ervan.

Meer in het bijzonder:
  • <div class="container-fluid"> is het blok rond de volledige pagina en zorgt ervoor dat de volledige beschikbare breedte in de browser wordt ingenomen

  • <div class="row"> vertegenwoordigt een rij, die op haar beurt andere blokken bevat. Door te redeneren door middel van "rijen", zorgen we ervoor dat onze blokken niet door elkaar raken wanneer de ene groter is dan de anderen.

  • <div class="col-md-8"> en <div class="col-md-4"> zijn twee blokken die de "echte" inhoud bevatten (tekst bijvoorbeeld). Het idee met de klassen col-md-8` en col-md-4 is om de beschikbare ruimte in elke rij te bekijken als een rooster van 12 "cellen"; uw blokken binnen deze rij kunnen een totaal aantal van 12 cellen omvatten en elk blok gebruikt col-md-X waarbij X het aantal cellen is dat deze rij omvat. Dus hier willen we één blok dat twee derden van de ruimte inneemt en een andere blok dat één derde inneemt. Dus gebruikten we 8 en 4 om de beschikbare 12 cellen te delen. Deze logica ("grid"-logica genaamd) staat gedetailleerd beschreven in het artikel Een responsief portaal ontwerpen.

  • <div class="ods-box"> maakt enkel een visueel blok aan met een rand en een achtergrond, dat meer geschikt is om tekst te bevatten.

Nu willen we een nieuwe lijn met drie blokken toevoegen, waarbij elk blok een derde van de ruimte inneemt. Volgens onze vorige logica, voegen we een nieuwe rij toe en nemen drie blokken elk 4 cellen in.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
    <div class="row">
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Onze voorbeeldweergave ziet er nu als volgt uit:

Een basisstijl instellen

CSS-code kan gebruikt worden om de manier te wijzigen waarop uw content wordt weergegeven: u kan de grootte van de tekst wijzigen, een gekleurde achtergrond, randen toevoegen, de kleur wijzigen, ...

Er zijn meerdere manieren om CSS-"regels" toe te passen op een element van uw pagina, maar een goede reflex die u in het achterhoofd moet houden, is om altijd "klassen" te gebruiken: door class="myclass" toe te voegen aan een element in uw pagina, koppelt u een "klasse" aan uw element en vervolgens kan u regels voor die klasse schrijven in uw CSS-stijl. Zo kan u dezelfde klasse toepassen op verschillende elementen en wanneer u uw pagina wijzigt, zullen de regels nog altijd van toepassing zijn op uw element.

Laten we ervan uitgaan dat we sommige tekst groter willen maken dan gewoonlijk. Allereerst moet u een klasse aan het element toevoegen die de tekst bevat. In dit geval "Hallo wereld!":

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="ods-box">
                <span class="larger-text">Hello world!</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ods-box"></div>
        </div>
    </div>
</div>

Vervolgens moeten we enkel een regel toevoegen in de CSS-code, waarin staat dat de klasse "larger-text" een grotere tekstgrootte zou moeten hebben:

.larger-text {
    font-size: 24px;
}

Er zijn veel verschillende CSS-regels die u aan elk van uw elementen kan toevoegen.

Opmerking

Er kunnen themakleuren, zoals die gedefinieerd staan in de Look & Feel-sectie van de back office, als CSS-variabelen gebruikt worden in de stijlbladpagina (voor meer informatie, zie Documentatie over het personaliseren van thema's en over het portaalicoon).

Merk op dat het eindresultaat niet in de voorbeeldweergave van de pagina zal weergegeven worden wanneer Internet Explorer wordt gebruikt.