Style des logos
Les logos des éléments (rubriques, articles, brèves, auteurs, sites) sont systématiquement dotés du style .spip_logos, placé sur la balise HTML <img>. Ce style peut être très utile pour, par exemple, déterminer la position du logo.
Ainsi pour aligner à droite les logos placés dans le cartouche, par exemple, tout en ménageant un espace entre l’image et le texte, vous ferez simplement :
.cartouche .spip_logos {
float: right;
margin-left: 1em;
}
Styles des images et documents
L’insertion avec les raccourcis <docXX|left> et <imgXX|right>, de documents et images dans le corps de texte d’un article (ou d’une brève), est contrôlée par des styles CSS.
Trois définitions de style permettent de personnaliser l’affichage des documents, de leurs titres et légendes :
- .spip_documents concerne la boîte qui contient la vignette et les informations du document (<docXX|left>) ou l’image insérée sans titre ni descriptif (<imgXX|right>) ;
- .spip_doc_titre contrôle l’affichage du titre du document ;
- .spip_doc_descriptif contrôle l’affichage du descriptif du document.
Trois styles sont utilisés en complément, indispensables pour définir le positionnement du document ou de l’image dans la page :
- .spip_documents_center quand le document est centré (<docXX|center>) ;
- .spip_documents_left quand le document est aligné à gauche (<docXX|left>) ;
- .spip_documents_right quand le document est aligné à droite (<docXX|right>).
Notez bien que ces styles concernent de la même façon les images (<imgXX>) et les documents (<docXX>).
NB : Avant de modifier radicalement ces définitions de style, notez que celles-ci sont également utilisées, dans les squelettes par défaut (depuis SPIP 1.9), pour styler les éléments du portfolio et des listes de documents joints (aux articles et/ou rubriques).
Images avec ou sans bordure
Il est possible d’appliquer une bordure aux images. Par exemple : .spip_documents img { border: 1px solid #666; } encadrera vos images d’une fine bordure grise.
Inversement, pour ne pas voir vos logos encadrés de cette horrible bordure bleue qui signale traditionnellement les « images cliquables » sur certains navigateurs (comme FireFox), n’oubliez pas de régler leur bordure à zéro : .spip_logos { border: 0; }.