Mémento de mise à jour du site

Colonnes dans les articles

Pour le site Ecritel nous avons ajouté la possibilité d’organiser le texte en colonnes dans les articles. ceci n’étant pas natif dans SPIP on saisit directement du HTML

Ex. <div class="column three"> va ouvrir un bloc dans lequel on pourra créer trois <div></div>. Il existe « two », « three » et « four ».

Deux colonnes

<div class="column two"> <div>Ici le texte de la colonne 1</div> <div>Ici le texte de la colonne 2</div> </div>

Trois colonnes avec des titres

<div class="column three"> <div> <h3>Titre 1</h3> Ici le texte de la colonne 1 </div> <div> <h3>Titre 2</h3> Ici le texte de la colonne 2 </div> <div> <h3>Titre 3</h3> Ici le texte de la colonne 3 </div> </div>

Largeur des colonnes

Si il y a deux colonnes on a par défaut 50% / 50%
Sinon on utilise une classes suivante :
div_25_75, div_75_25
div_33_66, div_66_33
div_40_60, div_60_40

Ex. <div class="column two div_66_33"> pour une première colonne sur 66% de la largeur et une seconde colonne sur 33%.

Listes sur fond sombre avec photo

On utilise pour cette liste le code suivant.

<div class="reason"> <div class="column two"> <div> {{{Titre de la boite}}} {{Texte gras}} -* liste {{Texte gras}} -* liste </div> <div><img481></div> </div> </div>

Liste de logos

Créer un nouvel album et y placer les logos à afficher.

Puis insérer dans l’article <album_logos|id_album=xx> en indiquant le numéro de l’album.

Les images sont alors recadrées et affichées sur 3 colonnes dans l’ordre alphabétique des titres.

Diaporama et images de l’en-tête

Les images (et les textes) du diaporama de la page d’accueil sont gérés dans l’album n°7 : Diaporama de la page d’accueil à l’exception de la première slide dont le titre est « en dur » dans le squelette et le texte est le descriptif du site (gérable dans Configuration > Identité du site).

Pour les images de l’en-tête des autres pages du site, importer l’image en document joint et l’intituler « background ». Si un article n’a pas d’image c’est l’image de la rubrique qui est affichée, ou à défaut l’image du secteur (rubrique racine) ou à défaut l’image de New York.

Prévoir des images de 2100px de large.

Le lien de destination lors du clic est un champ ad hoc qu’il convient de renseigner avec la page de destination.

Inclure le code suivant pour afficher l’icône « Lire plus » :

<div class="button more"> <span class="ico"></span> <span class="label">Learn more</span> </div>

Boutons

Utilisation d’un « modèle » :

<bouton |text=texte au dessus du teaser |teaser=phrase d'accroche avant le bouton |label=Demande de devis ou plus d’informations |article=402 OU |document=201 >

Pour un bouton de type :

Centrer un contenu

<div class="center"> Mon contenu à centrer </div>

FAQ

<imgXX> ou <docXX> ?

Comment gérer l’ordre d’affichage des articles / rubriques / documents ?

Comment ajouter une vidéo dailymotion (youtube,...) à un article ?