JCE Editor - Stylen gebruiken

• 

Gegevens

Categorie: JCE Editor

Iedereen die met websites bezig is weet dat de vormgeving gedaan wordt met stylesheets, of css. Ook als je in de tekst een andere vormgeving wilt toepassen, kun je het beste stijlen gebruiken. Of het nu gaat om de tekst met kleuren of groottes te accentueren, of een afbeelding wilt laten uitlijnen, of een rand wilt geven. Gebruik de style-knop.

De functie voor stijlen is voor Joomla! 1.5 en de nieuwe versies aardig gelijk. Het gaat om de knop met de twee A's. Als voorbeeld wordt hier Joomla! 1.5 gebruikt, maar de werking in de nieuwere versies is verder helemaal hetzelfde. Als je reeds ervaring hebt met software als DreamWeaver of GoLive, zal de werking van deze functie je bekend voorkomen.

Als eerst volgt hier een beschrijving van de verschillende tabbladen. Daaronder enkele praktische voorbeelden.

CSS Stijl bewerken

1.5	1.6...

Klik op deze knop en je ziet een venster met verschillende tabbladen.

• Tekst
• Achtergrond
• Blok
• Box
• Rand
• Lijst
• Positionering

De waarden dit je in al deze tabs invult, worden omgezet naar inline stijlen. De HTML van de tekst verandert dus niet.

Tekst

In het tabblad Tekst kun je de tekst in de pagina opmaken. Je kunt hier onder andere kiezen voor een ander lettertype, lettergrootte, vet, cursief, regel-hoogte enzovoorts. Hiervoor dien je eerst in de tekst het deel te selecteren waaraan je de stijl wilt toekennen.

Achtergrond

In het tabblad Achtergrond is het mogelijk de achtergrond van een element op te maken. Je kunt enkel een kleur geven, maar ook een achtergrond-afbeelding opgeven.

Blok

In het tabblad Blok kun je het 'gedrag' van de tekst bepalen. Bijvoorbeeld uitvullen of links of rechts uitlijnen. Je kunt hier meer ruimte tussen woorden of zelfs letters geven. Of de eerste regel van een alinea laten inspringen.

Box

Bij Box kun je bepalen hoe breed of hoog een bepaald element moet zijn, of hoeveel ruimte margin of padding je tussen het element en z'n omgeving wilt hebben. Dit is bijvoorbeeld makkelijk als je een afbeelding in de tekst wilt, maar dat er een kleine witruimte tussen moet.

Rand

Rand geeft het element één of meerdere randen van verschillende stijlen, diktes en kleuren.

Lijst

Wanneer je een opsommingslijst anders wilt weergeven dat wat het standaard doet, kun je bij Lijst bijvoorbeeld een ander opsommingsteken kiezen.

Positionering

In Positionering geef je een element een absolute of relatieve plek ten opzichte van z'n omgeving. In de regel wordt dit niet veel gebruikt bij het opmaken van een pagina.

Voorbeelden

Een rand om een afbeelding

Stel, je hebt een afbeelding, maar de achtergrond van het plaatje tekent niet mooi af tegen de achtergrond van de website. Een oplossing is om er gewoon een randje om te zetten.

• Klik één keer op de afbeelding, zodat de afbeelding geselecteerd is.
• Open het Stijlvenster door op de dubbele A te klikken.
• Ga naar het tabbland Rand.
• Vul de waarden in naar voorkeur. Een standaard rand is 'solid'. Maar je kunt ook voor een onderbroken rand of een stippellijn kiezen. Kies een lijndikte en een kleur. Je kunt apart de boven-, rechter-, onder- en linkerrand kiezen. De dikte wordt standaard gegeven met dun, middel en dik (thin, medium, thick). Kies 'Value' als je er een preciezere waarde aan wilt geven, bijvoorbeeld in pixels.

Hier heb ik voor een gesloten, zwarte rand van 1 pixel gekozen. Als je vervolgens de stijl bekijkt in de code, is de volgende inline-style toegevoegd aan de image tag:

<img src="/images/poes.jpg" alt="Poes met rand" style="border: 1px solid #000000;" />

Tekst onder elkaar, zonder witruimte.

Als je een adres in de tekst wilt doen, zet je de adresregels onder elkaar met behulp van de 'break' [Shift+Enter]. Je kunt het ook doen met een opsommingslijst zonder opsommingstekens.

• Type het adres (of iets anders dat je onder elkaar wilt hebben zonder witruimte, bijvoorbeeld een gedicht) en geef gewoon een normale Enter.
• Selecteer de regels en klik op het opsommings-symbooltje in de knoppenbalk.
• Klik daarna gelijk op het Stijl-knopje CSS-bewerken
• Ga naar tabblad Lijst en kies in het dropdownmenu achter Type voor None.
• Ga vervolgens naar het tabblad Box. Zet bij 'Vulling (Padding)' alles op 0 en bij 'Marge (Margin)' alleen een waarde van 10 of 15 pixels bij 'Onder', de rest op 0.
• Klik nu op toepassen.

Als je vanuit deze tekst weer verder gaat typen, hou er rekening mee dat, wanneer je achter de laatste regel een enter geeft, je een nieuwe list-item aanmaakt. Geef je vervolgens nog een enter, ga je weer verder als een gewone alinea.

Geen witruimte tussen alinea en opsomming

Naar aanleiding van de vraag van Adrie Spruit die geen witruimte wilt tussen een opsomming en de alinea of de regel daar direct boven.

In dit voorbeeld:

• Klik op de regel of alinea die boven de opsomming staat (In dit voorbeeld).
• Klik op de 'p' onder de editor bij 'Pad:' om de alinea (paragraaf) te selecteren.
• Klik vervolgens op de knop 'CSS stijl bewerken'.
• Kies het tabblad 'Box'.
• Geef bij de opties 'Vulling/Padding' en 'Marge/Margin' een 0 (nul)
• Klik op 'bijwerken'.

Als html krijg je de volgende code:

<p style="margin: 0; padding: 0;">In dit voorbeeld:</p>

Meer voorbeelden?

Ben je zelf op zoek naar een opmaak-trucje in een pagina, maar kom je er niet uit, mag je het hier laten weten. We kunnen er op deze pagina aandacht aan besteden.