home | sitemap

Overige opmaak 

Via de  'overige opmaak'-knop (rode stift) op de werkbalk kan de vormgever de redacteur naast de standaard opmaak wel meer dan 1000 extra opmaakmogelijkheden aanbieden.

Standaard/default

Door gebruik te maken van de knoppen H1, H2, H3, B en I kan een redacteur paragrafen, regels en/of woorden opmaken. H1, H2 en H3 werken op een hele paragraaf: de paragraaf waar de tekstcursor in staat wordt een kopregel, of als het al een kopregel is, weer een gewone paragraaf. B en I hebben effect op het woord waar de tekstcursor in staat of de geselecteerde tekst: het woord of de tekst wordt vet of cursief.

B en I kunnen uiteraard ook op een kopregel worden toegepast. Let wel: aangezien een kopregel meestal al vet wordt weergegeven zal een woord in de kopregel dat expliciet vet wordt gemaakt niet extra of dubbel vet worden weergegeven. Alleen als de kopregel via css niet vet is gemaakt zal B effect hebben. Desondanks kan door toepassen van B in een kopregel wel een speels effect worden verkregen: via een geschikte css regel kan bijvoorbeeld een woord in de kopregel een andere kleur worden gegeven:

#tekst h1 {
  color: black;
}
#tekst h1 strong {
  color: red;
}

heeft als effect:

Een kopregel met een blauw woord. 

De extra mogelijkheden

Door gebruik te maken van 'overige opmaak' (de naam doet de kracht van de functionaliteit geen eer) kan aan de volgende elementen andere/extra opmaak worden toegekend:

Toepassen

Voor alle elementen geldt: ze de tekstcursor in het element en kies de gewenste opmaak en het element krijgt een extra classname. TABLE en IMG zijn een uitzondering: in deze elementen kun je geen tekstcursor zetten. Om een TABLE extra opmaak mee te geven: klik op de rand van de tabel zodat de kleine vierkantjes verschijnen om de tabel groter/kleiner te maken. Om een IMG extra opmaak mee te geven: klik op de afbeelding zodat de kleine vierkantjes verschijnen om de afbeelding groter/kleiner te maken.

Voor elk van de elementen kan de redacteur uit 6 opmaken kiezen: Opmaak 1 t/m Opmaak 5 en Omlijnen. Door het kiezen van een opmaak krijgt het element een classname, resp. bgp1 t/m bgp5 en omlijnp. 

Staat de tekstcursor bijvoorbeeld in een H2 en kies de redacteur Opmaak 3, dan krijgt de H2 als classname:

<h2 class="bgp3">Dit is een kopregel</h2>

Een element kan op deze manier maar 1 classname hebben. Heeft een element al een classname en wordt een andere opmaak gekozen, dan geldt de laatst gekozen opmaak.

Via de optie 'Verwijder opmaak' kan de redacteur de extra opmaak weer verwijderen.

Met 10 elementen en 6 mogelijkheden zijn er sowieso al 60 mogelijkheden. Echter, een TABLE, met een TD, met een UL, met daarin een A, die alle 4 een opmaak hebben gekregen is ook een mogelijkheid. Op deze manier zijn er dus ontelbare mogelijkheden te bedenken (die wel even duidelijk aan de redacteur uitgelegd moeten worden!)

Wat er aan opmaak kan worden ingesteld wordt alleen beperkt door de grenzen van css.

Voorbeelden

Een afwijkend font voor alle elementen die Opmaak 4 hebben gekregen:

#tekst .bgp4 {
  font-family: "Comic Sans MS", Arial, sans-serif;
  color: purple;
}

Dit is een H1.

Dit is een gewone paragraaf met wat tekst. Dit is een gewone paragraaf met wat tekst. Dit is een gewone paragraaf met wat tekst. Dit is een gewone paragraaf met wat tekst.

Op basis van bovenstaande voorbeeld een toevoeging: een hyperlink in de paragraaf moet rood zijn en altijd in hoofdletters, behalve als de hyperlink Opmaak 3 heeft, dan graag groen en vet op grijze ondergrond:

#tekst p.bgp4 a {
  color: red;
  text-transform: uppercase;
}
#tekst p.bgp4 a.bgp3 {
  color: green;
  font-weight: bold;
  text-decoration: none;
  background: #ddd;
}

Dit is een gewone paragraaf met wat tekst. Dit is een gewone paragraaf met wat tekst. Dit is een gewone paragraaf met wat tekst. Dit is een gewone paragraaf met wat tekst.

Een afbeelding met Opmaak 2 moet een zwart kader krijgen van 2 pixels:

#tekst img.bgp2 {
  border: 2px solid black;
}

 

Een opsomming moet in plaats van de standaard rondjes een pijltje krijgen met Opmaak 3:

#tekst ul.bgp3 {
  list-style-image: url(/gfx/list-item.gif);
}