Miettes Nombre de messages: 54485
$ops: 26248
Points: 945
 Bonjour à tous  Dans ce tutoriel, nous allons apprendre à réaliser des styles pré-définis pour nos forums. Par style pré-définis, j'entends, faire ceci : Mon texte 1Mon texte 2| Code: | <h1 class="titre_partie">Mon texte 1</h1>
<h1 class="titre_en_tete">Mon texte 2</h1> |
ou
Pour cela, vous devrez mettre le code css :
-> Pour les utilisateurs de FA : Panneau d'admin >> affichage >> couleurs >> feuille de style
-> Pour les utilisateurs de xooit : Panneau d'admin >> Modifier les templates >> Overall_header.tpl >> mettre le code juste avant
Allons y
La partie HTML
Ici, c'est le plus simple. En effet, il suffit de donner un nom à votre style. On va supposer que le style peut revenir plusieurs fois dans la page. On va donc utiliser l'attribut "class" pour lui donner un nom.
Ensuite, ça se complique un peu Suivant le type d'élements que vous désirez afficher, on n'utilisera pas les mêmes balises html. Voici donc quelques exemples :
-> Si c'est un titre :
On utilisera les balises h1 ou h2 ou h3
| Code: | <h1 class="mon_nom">Titre de niveau 1</h1>
<h2 class="mon_nom">Titre de niveau 2</h2>
<h3 class="mon_nom">Titre de niveau 3</h3> |
-> Si c'est un bloc
On utilisera ici la balise "div"
| Code: | <div class="mon_nom">Mon petit bloc</div> |
-> Si c'est un paragraphe
On utilisera ici la balise "p"
| Code: | <p class="mon_nom">Mon paragraphe</p> |
-> Si c'est un groupe de mot
On utilisera ici la balise "span"
| Code: | <span class="mon_nom">Mon paragraphe</span> |
Vous l'aurez donc compris, les class peuvent s'appliquer sur toutes les balises (celles ci-dessus, mais aussi les listes, les tableaux, les fieldsets, les liens,...)
Maintenant que nous avons bien compris ceci, nous allons voir la mise en page, autrement dit, le CSS
La partie CSS
Avant de vous lancer corps & âme dans le codage, prenez 5 minutes pour réfléchir à la mise en page que vous aimeriez :
- Quelle typo ?
- Quelle taille de police ?
- Quelle couleur ?
- Couleur de fond ? Image de fond ? Les 2 ?
- Des bordures ? Quel type ? Epaisseur ? Couleur ?
- Des dimensions ?
- ...
Pour pour vous aider, n'hésites pas à faire un tour au niveau des codes css : [clic]
Exemple :
- Typo : Verdana
- Couleur de la typo : Beige (code couleur : #F5F5DC)
- Taille de la typo : 12px
- Une image de fond placé au centre à gauche [clic] (/!\ ne pas oublié de décaller le texte vers la droite pour éviter le chevauchement avec l'image = ajouter un padding-left)
- Une couleur de fond gris foncé (code couleur : #818180)
- Bordures en tirets noirs de 2 px
- 600px de large sur 200px de haut minimum
Maintenant que nous savons ce que nous voulons faire, il va falloir traduire ça en CSS
*** La typo :
| Code: | font-family:verdana;
color:#F5F5DC;
font-size:12px; |
*** Le fond :
| Code: | background-image:url('http://pvereecken.fr/images_creas/creas/autres/54447995.png');
background-repeat:no-repeat;
background-position: left center;
background-color:#818180; |
*** Le placement du texte pour éviter le chevauchement :
*** Les bordures :
| Code: | border: dashed 2px black; |
*** La taille :
| Code: | width:600px;
min-height:200px;
height:auto; |
C'est presque terminé Maintenant, il ne me reste plus qu'à dire à ma feuille de style : "Tu appliques ces propriétés à tous les éléments qui ont ce nom de class : mes_proprietes"
| Code: | .mes_proprietes{
font-family:verdana;
color:#F5F5DC;
font-size:12px;
background-image:url('http://pvereecken.fr/images_creas/creas/autres/54447995.png');
background-repeat:no-repeat;
background-position: left center;
background-color:#818180;
padding-left:200px;
width:600px;
min-height:200px;
height:auto;
} |
Une fois que ceci est copié dans votre CSS, vous pouvez l'utiliser sans problème dans les pages de votre forum.
| Spoiler: | | | 
 |
Vous rencontrer un souci avec ce tutoriel ? Venez poser votre question [ici]
 n'oubliez pas de lire et de suivre les règles de la section. |
Haldor Nombre de messages: 2422
$ops: 7958
Points: 330
Questions fréquentes
On voit mon code HTML, sans voir la mise en page. Pourquoi ?
Le plus souvent, c'est un problème de paramétrage dans le panneau d'administration ou dans le profil. Vérifiez que "Toujours autoriser le HTML" soit bien coché dans votre profil (préférences) et que dans votre panneau d'administration le HTML soit accepté : Panneau d'administration >> Général >> Message et E-mail >> Configuration >> Autoriser le HTML.. |
