Header
Partagez | 

[FA & Xooit] Mises en page prédéfinies

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA & Xooit] Mises en page prédéfinies   Lun 6 Juin - 8:37

Bonjour à tous Smile

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 1



Mon texte 2



Code:
<h1 class="titre_partie">Mon texte 1</h1>

<h1 class="titre_en_tete">Mon texte 2</h1>

ou

image tuto
image tuto

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
Code:
</style>

Allons y Smile

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.

Code:
class="mon_nom"

Ensuite, ça se complique un peu Smile 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 :
Code:
padding-left:200px;

*** Les bordures :
Code:
border: dashed 2px black;

*** La taille :
Code:
width:600px;
min-height:200px;
height:auto;

C'est presque terminé Smile 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 rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
avatar

Mes clubs

Invité

Invité

Message Sujet: Re: [FA & Xooit] Mises en page prédéfinies   Dim 22 Juil - 18:45

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.
Revenir en haut Aller en bas
[FA & Xooit] Mises en page prédéfinies
Page 1 sur 1
 Sujets similaires
-
» [Annulée] Demande de page d'aceuil
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» lien vers page php
» compteur php dans page générée par e-anim
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+