Télécharger le tutoriel sur les styles CSS et leur application (voir ci-dessous)... (20/05/2024)

Les styles CSS par défaut

Le template du site détermine quelques styles par défaut notamment aux titres, au paragraphe et aux listes à puces et chronologiques.

Titre 1 (balise h1)

Paragraphe après le titre...

Un second paragraphe avec son espacement.

Titre 2 (balise h2)

Paragraphe après le titre...

Un second paragraphe avec son espacement.

Titre 3 (balise h3)

Paragraphe après le titre...

Un second paragraphe avec son espacement.

Titre 4 (balise h4)

Paragraphe après le titre...

Un second paragraphe avec son espacement.

Titre 5 (balise h5)

Paragraphe après le titre...

Un second paragraphe avec son espacement.

Titre 6 (balise h6)

Exemple d'un paragraphe (balise p)...

Un second paragraphe avec son espacement.

• Liste de 1^er niveau (balises ul + li)
  
  • Liste de 2^ème niveau (balises ul + li + ul + li)
    
    • Liste de 3^ème niveau (balises ul + li + ul + li + ul + li)
• Liste de 1^er niveau (balises ul + li)

Paragraphe suivant...

Les styles CSS personnalisés

Les styles CSS personnalisés sont des styles supplémentaires ajoutés au template qui peuvent être appliqués à du contenu par la liste déroulante de l'éditeur "Styles CSS".

Pour appliquer un style CSS à du texte, un tableau, ou à un média (image, vidéo), sélectionnez-le puis cliquez-sur le style souhaitée dans la liste déroulante « Styles CSS ».

L'application d'un style à une portion de texte est extrêmement simple, il suffit de sélectionner la partie souhaitée puis de sélectionner le style CSS souhaité.

Mais pour appliquer un style à un bloc de texte entier tel un paragraphe ou un lien, vous devez au préalable sélectionner sa balise en cliquant sur sa représentation dans la barre d'état de l'éditeur.

Note : les styles CSS personnalisés peuvent être adaptés en éditant le fichier "custom.css" en administration du site, dans la gestion des fichiers du template.

Vous pouvez visualiser les balises des différents formats du contenu en cliquant sur l'icône

Styles CSS applicables à l'ensemble des balises et aux portions de texte

Les styles CSS suivants sont applicables à une portion de texte en le sélectionnant, et à l'ensemble des balises classiques en la sélectionnant dans la barre d'état de l'éditeur.

Si vous appliquez un de ces styles à une portion de texte dans une ligne, la balise 'span' d'ouverture et de fermeture sera automatiquement ajoutée encadrant le texte sélectionné. Exemple avec son résultat : <span class="ok">Texte</span>.

note	idee	info
ok	go	telecharger
stop	alerte	cadenas
aide	securite	params
plus	moins	recherche
plan	date	heure
panier	carte	discussion

Styles CSS applicables à l'ensemble des balises

Les styles CSS suivants sont applicables à l'ensemble des balises classiques en la sélectionnant dans la barre d'état de l'éditeur.
Ces styles ne sont pas applicables à des portions de texte !

bloc_gris		bloc_jaune		bloc_rouge
bloc_bleu		bloc_vert		bloc_brun
bloc_note		bloc_idee		bloc_info
bloc_ok		bloc_go		bloc_telecharger
bloc_stop		bloc_alerte		bloc_cadenas
bloc_aide		bloc_securite		bloc_params
bloc_plus		bloc_moins		bloc_recherche
bloc_plan		bloc_date		bloc_heure
bloc_panier		bloc_carte		bloc_discussion

Styles CSS appliqués aux liens (balise a)

Les liens sont reconnaissables par la balise 'a'. Il est donc également possible d'appliquer un style aux liens.

Les styles des boutons ne s'appliquent qu'aux liens (balise a), vous devez donc sélectionner la balise « a » dans la barre d'état de l'éditeur avant d’appliquer le style.
 
Style 'bouton-rouge' Style 'bouton-bleu' Style 'bouton-vert' Style 'bouton-violet' Style 'bouton-noir'

 

---

Créer son style

Vous pouvez en tout temps changer le style d'un format que ce soit son style original ou celui d'un style CSS en appliquant une modification de style avec l'outil « Styles » . Ces styles s'ajoutent dans la balise du format sélectionné (p, a, etc.), ils ont priorités sur les styles appliqués au format.

Pour modifier le style d'un format ou du style CSS qui lui est appliqué, sélectionnez sa balise dans la barre d'état de l'éditeur puis cliquez sur l'icône de la barre d'outils, une fenêtre popup s'ouvre avec 7 onglets contenant l'ensemble des paramètres de style possible.