Header

Partagez | 

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

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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




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

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

avatar

Mes clubs

Invité

Invité

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
-
» [Question] Mise en page forum
» [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
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens