Header

Partagez | 

[Xooit][Template] Modifier la mise en page des descriptions

Message Sujet: [Xooit][Template] Modifier la mise en page des descriptions   Lun 6 Juin - 8:36

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 à faire ceci :


Vous allez voir, c'est très simple quand on comprend pourquoi faire telle ou telle chose.

C'est partie !

Modification du template



Avant tout, nous allons devoir modifier le template affichant nos catégories. Ce template s'appelle : "index_body.tpl". Dans celui-ci, repérez ce passage

Code:
<td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>

     </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}

     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>

Ce code correspond à la case décrivant votre forum/sous forum. Décortiquons un peu ça :

{catrow.forumrow.FORUM_NAME} = Le nom du forum (sur mon exemple "La salle du Dhamma")
{catrow.forumrow.FORUM_DESC} = La description du forum (sur mon exemple "Nouveau venu ? Viens écouter les ens....")

Code:
<span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span>

= l'affiche des modérateurs de sections

On va commencer ici par modifier l'affichage des colonnes (pour avoir les stats' dans la partie "description". Pour cela, je vous invite à lire [ce tutoriel].

Ensuite, on va encadrer ce qu'on veut modifier
*** La description :
Code:
<div class="description">{catrow.forumrow.FORUM_DESC}</div>

*** Les stats : (on va aussi changer un peu le texte)
Code:
<div class="stats_cate">{catrow.forumrow.TOPICS} sujets contenant {catrow.forumrow.POSTS} messages</div>

Au final, notre code précedent, n'est plus du tout le même, il ressemble à ça maintenant :
Code:
<td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>

     </span>
     <div class="stats_cate">{catrow.forumrow.TOPICS} sujets contenant {catrow.forumrow.POSTS} messages</div><div class="description">{catrow.forumrow.FORUM_DESC}</div>
     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>

Validez votre template et publiez le. Pour le moment, ça ne ressemble à rien

Spoiler:
 

Modification du css



Rappel : Les codes ci-dessous sont à copier dans Panneau d'admin >> Modifier les templates >> Overall_header.tpl >> mettre le code juste avant
Code:
</style>


Travaillons maintenant la mise en page ^^ Pour pour vous aider, n'hésites pas à faire un tour au niveau des codes css : [clic]

*** Les titres :

Ici, nous n'avons pas changé le template. On va donc se baser sur le code de base de xooit. On va néanmoins :
  • Centrer le texte
  • Lui donner une couleur
  • Lui ajouter une bordure
  • Enlever le gras
  • Donner une taille de police au texte
  • Mettre le texte en petites capitales


Code:
a.forumlink{
   display:block;
   font-size:14px; /* la taille de la police */
   padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
   text-align:center;
   font-variant:small-caps; /* Les petites capitales */
   color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
   border-bottom:4px double #6a3e1a;
   font-weight:normal; /* Le texte non boldé */
   margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
   }

Appliquons aussi un style quand la souris passe sur le texte

Code:
a.forumlink:hover{
   font-variant:small-caps;
   color:#6e5831 !important;
   border-bottom:4px double #6a3e1a;
   font-weight:bold; /* Texte en  gras */
   display:block;
   }

Spoiler:
 

*** La mise en page des stats'
Ici, on va :
  • Aligner le texte à droite
  • Ajouter des bordures en bas et à droite
  • Mettre le texte en italic
  • Ne pas afficher la bordure sur toute la largeur de la case
  • Donner une taille de typo
  • Placer le bloc à droite


ce qui nous donne :

Code:
div.stats_cate{ /* La div ayant pour class 'stats_cate' */
   font-size:12px;
   text-align:right;
   border-bottom:#6a3e1a 1px solid;
   border-right:#6a3e1a 3px solid;
   font-style:italic; /* On met le texte en italic */
   color:#6a3e1a;
   padding-right:4px; /* On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
   margin-bottom:4px;
   margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */
   width:220px; /* On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
   margin-left:385px; /* On place le bloc à droite en le décallant par rapport au bord gauche de la case */
   }

ça commence à prendre forme

Spoiler:
 

*** La description :

Il ne nous reste plus que la mise en page de la description du forum/sous forum. Cette fois, on va :
  • Lui donner une couleur de fond
  • Arrondir les coins du bloc
  • Mettre une bordure en trait plein
  • Imposer une largeur ainsi qu'une hauteur minimum
  • Donner une taille à notre texte ainsi qu'une couleur


Code:
div.description{  /* La div ayant pour class 'description' */
   background-color:#efdec0; /* On lui donne une couleur de fond */
   -moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
   -webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
   border-radius:10px; /* réglage des arrondis des coins */
   border:1px solid #b79981;
   width:560px;
   min-height:20px; /* La hauteur minimum */
   font-size:12px;
   text-align:justify;
   text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
   padding:4px;
   margin:4px;
   color:#6e5831;
   }

Et voilà ! Vos descriptions sont totalement personnalisées Wink


Evidemment, à vous d'adapter le style à vos forums Smile




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
[Xooit][Template] Modifier la mise en page des descriptions
Page 1 sur 1
 Sujets similaires
-
» Modifier la mise en page du "voir un profil"
» Mise en page des descriptions des forums
» S. Demande de mise en page - Site du forum
» [Nocturne] Mise en page
» Mise en Page d'acceuil
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