Style des logos
De logo’s van de verschillende objecten in SPIP (rubrieken, artikelen, nieuwsberichten, auteurs en sites) krijgen systematsich een stijlattribuut .spip_logos, op de HTML tag <img>. Deze class kan handig zijn om bijvoorbeeld de positionering van het logo vast te leggen.
Wil je het logo bijvoorbeeld rechts uitlijnen in het gebied dat wordt aangeduid met «cartouche» met een ruimte tussen de tekst en het logo, dan geef je in je stylesheet aan:
.cartouche .spip_logos {
float: right;
margin-left: 1em;
}Stijlen van afbeeldingen en documenten
Ook het invoegen van documenten en afbeeldingen door middel van de opmaakcodes <docXX|left> en <imgXX|right> wordt met CSS gedefinieerd.
Drie definities kunnen naar persoonlijke wensen worden aangepast, de weergave van documenten, titels en omschrijvingen (legendes):
- .spip_documents betreft het blok wat het icoon en de documentinformatie bevat (zoals met opmaakcode <docXX|left>) of een afbeelding zonder titel of omschrijving (bijvoorbeeld met <imgXX|right>);
- .spip_doc_titre controleert de weergave van de titel zelf;
- .spip_doc_descriptif controleert de omschrijving.
Drie aanvullende stijlen worden gebruikt en zijn onmisbaar voor de positionering van het document of de afbeelding op de pagina:
- .spip_documents_center voor een gecentreerde weergave (<docXX|center>);
- .spip_documents_left bij een links uitgelijnd document (<docXX|left>);
- .spip_documents_right bij een rechts uitgelijnd document (<docXX|right>).
Deze stijlen hebben zowel betrekking op documenten als op afbeeldingen, dus worden zowel toegepast bij (<docXX|uitlijning>) als bij (<imgXX|uitlijning>).
NB: Voor je deze aanpassingen in je stylesheet doet, moet je eerst controleren wat de invloed zal zijn op de andere standaard skeletten die deze definities ook zullen gaan gebruiken, bijvoorbeeld voor de portfolio en de lijst van bijgevoegde documenten (bij artikelen en rubrieken).
Afbeeldingen met of zonder kader
Je kunt een kader rond een afbeelding definiëren. Zo zal: .spip_documents img { border: 1px solid #666; } Je afbeeldingen een smalle grijze omlijsting geven.
Omgekeerd, wanneer je van dat afgrijselijke kader om afbeeldingen met een hyperlink (in sommige browsers) af wilt, forceer je die omlijsting naar een breedte nul: .spip_logos { border: 0; }.