Styles for logos, images and documents

The style attributed to logos

Any logos included in an SPIP element (sections, articles, news items, authors, sites) are systematically assigned an attribute class called .spip_logos, which is included in each HTML <img> tag. This style attribute can be very useful, for example, in specifying the position of the logo on the page.

So to not only align logos to the right of their containers (cartouche), for example, you can stipulate a standard space between the image and the text with the simple styling code :

.cartouche .spip_logos {
    float: right;
    margin-left: 1em;
}

The styles attributed to images and documents

The insertion of <docXX|left> and <imgXX|right> shortcuts for documents and images in the body of the article (or news item) text can be controlled with CSS style class attributes.

There are three standard style classes that can be used on documents, their titles and their associated captions:
-  .spip_documents refers to the box that contains the thumbnail image and document information (<docXX|left>) or an image inserted without title or description (<imgXX|right>);
-  .spip_doc_titre controls the display of document titles;
-  .spip_doc_descriptif controls the display of document descriptions.

Three additional styles are available to allow precise positioning and display of documents and images within the page, dependent on their "position" definitions within the SPIP body text:
-  .spip_documents_center when the document is centered (<docXX|center>) ;
-  .spip_documents_left when the document is left-aligned (<docXX|left>) ;
-  .spip_documents_right when the document is right-aligned (<docXX|right>).

Note that these styles can be applied just as well to images (<imgXX>) as to documents (<docXX>).

NB : Before making drastic changes to these style definitions, remember that they are also used by the default templates (since SPIP 1.9), for styling any portfolio elements and lists of attached documents (attached to articles and/or sections).

Images with or without borders

It has been possible to apply borders to the images. For example : .spip_documents img { border: 1px solid grey; } will surround your images with a thin grey border line.

Alternatively, if you wish to dispense with the stunning blue borders that traditionally indicate a “clickable image” in certain browsers (such as FireFox), don’t forget to disable the default border behaviour with the following code : .spip_logos { border: 0; }.