AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.



11 résultats trouvés pour categories

Cheshire Cat

Catégories style steampunk - Dim 19 Fév 2017 - 14:49



Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de catégories avec un style plutôt steampunk ^-^
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Un aperçu en image:
Spoiler:


Optimisé pour tous les navigateurs - Version PHPBB2

Installer vos nouvelles catégories:
Pour commencer l'installation de nos nouvelles catégories, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > Index_box et remplacer le code d'origine par le suivant.

Code:
<div class="catLiens">
  <!-- BEGIN switch_user_logged_in -->
  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW} - </a>
  <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF} - </a>
  <!-- END switch_user_logged_in -->
  <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie">
 {catrow.tablehead.L_FORUM}
 <!-- END tablehead -->
 <!-- BEGIN forumrow -->
  <div class="catCentre">
  <div class="inline catGauche">
          <div class="catStats">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</div>
          <div class="inline catLast">
                  <img class="newOldLock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
  {catrow.forumrow.LAST_POST}
          </div>
          <div class="inline catAvatar">
 <!-- BEGIN avatar -->
                  {catrow.forumrow.avatar.LAST_POST_AVATAR}
  <!-- END avatar -->
          </div>
  <div class="inline sousForums">{catrow.forumrow.LINKS}</div>
  </div>
  <div class="inline catDroite">
  <a class="catTitreForum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  <div class="catDescrip">{catrow.forumrow.FORUM_DESC}</div>
        </div>
  </div>
 <!-- END forumrow -->
 <!-- BEGIN tablefoot -->
  <img src="http://zupimages.net/up/17/13/mt9t.png" />
</div><!-- END tablefoot --><!-- END catrow -->


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

Code:
/* Catégories réalisées par Cheshire Cat */
.catLiens{
  text-align:center;
}
.categorie{
  width:800px;
  margin:0 auto;
  font-family:calibri;
  font-size:12px;
}
.inline{
  display:inline-block;
  vertical-align:top;
}
.categorie h2{
  margin:20px 0 0;
  padding:30px 0;
  box-sizing:border-box;
  background-image:url('http://zupimages.net/up/17/13/mt9t.png');
  font-size:30px;
  font-weight:normal;
  text-align:center;
  color: #523e32;
  text-shadow: 0 0 3px #55493f;
}
.catCentre{
  padding:0 20px 40px 20px;
  background:#21130d;
}
.categorie h2 + .catCentre{
  padding-top:40px;
}
.catGauche{
  width:400px;
  background-color:#a9a08b;
  margin-right:10px;
  padding:10px;
  box-sizing:border-box;
}
.catStats{
  color:#654f3f;
  font-size:15px;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.catLast{
  width:130px;
  height:120px;
  padding:5px;
  box-sizing:border-box;
  background-color:#ccc6b8;
  text-align:center;
  line-height:20px;
  overflow:auto;
}
.catAvatar{
  width:80px;
  height:120px;
  margin:0 10px;
  overflow:hidden;
  background-color:#ccc6b8;
}
.catAvatar img{
  width:100%;
}
.sousForums{
  width:150px;
  height:120px;
  background-color:#ccc6b8;
  font-size:0;
  overflow: auto;
}
.sousForums a{
  display:block;
  background:#fff;
  font-size:12px;
  text-align:center;
  margin-bottom:5px;
}
.catDroite{
  width:350px;
  background-color:#a9a08b;
  padding:10px;
  box-sizing:border-box;
}
.catTitreForum {
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.catDescrip{
  height:120px;
  background-color:#ccc6b8;
  margin-top:5px;
  padding:10px;
  overflow:auto;
  text-align:justify;
  box-sizing:border-box;
}


N'hésitez pas à poster un petit message, ça fait toujours plaisir !

Nemalus

Catégorie "Winds of Winter" - Lun 14 Nov 2016 - 10:22




Catégories réalisées suite à la demande de Ailes.
Les couleurs sont modifiables, merci de ne pas retirer le crédit.

Voici un aperçu :

lien direct : www

Version forum : testé sur phpbb2

Dimensions des images :
Les images de description doivent être si possible au format 250px x 100px;
Les images "Pas de nouveaux messages ; Nouveaux messages ; etc" doivent être en 35px X 35px

Pour ajouter des images de description : www
Pour activer les avatars : www


Remplacer l'intégralité du template index-box par :

Code:
<table width="900px" border="0" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
        </td>
        <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
        </td>
        </tr>
     
        </table><!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="TitreCategorie"><h2>{catrow.tablehead.L_FORUM}</h2></div>
        <div class="BlocCategorie"><!-- END tablehead -->

        <!-- BEGIN cathead -->
        <!-- END cathead -->
     
        <!-- BEGIN forumrow -->
        <div class="BlocForum"><div class="TitreForum"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="ImageForum" /><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="Forum"><div class="DescriptionForum">{catrow.forumrow.FORUM_DESC}</div><div class="BlocImageDescription"><div class="SousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="DernierMessage"><div class="NombreSetM">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div><hr /><table><tr><td><div class="AvatarForum"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></td><td>{catrow.forumrow.LAST_POST}</td></tr></table></div></div></div>
        <!-- END forumrow -->
     
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </div>
        <div class="BasCategorie"></div>
        <!-- END tablefoot --><!-- END catrow -->



Dans la feuille de style (CSS) ajouter le code :

Code:
/* BLOC TITRE CATEGORIE */
.TitreCategorie {
margin:5px auto 0; width:900px; padding:15px 0;
background:#D07F7F; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.TitreCategorie h2{
margin:0; font-size:32px; text-align:center;
color:white; font-family:Arial; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.BlocCategorie {
margin:auto; width:900px; padding:25px 0 15px;
background:#D7D5D5; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.BasCategorie {
margin:auto; margin-bottom:10px; width:900px; height:35px;
background:#D07F7F; /* MODIFIABLE */
}
/* BLOC FORUM */
.BlocForum{
width:850px; margin:auto; text-align:center;
}
/* BLOC TITRE FORUM */
.TitreForum {
margin:0 auto 5px;
font-size:25px;
width:805px; padding:5px 25px 5px 0;
text-align:left; /* MODIFIABLE */
}
/* TITRE FORUM */
.TitreForum a{
color:black !important; /* MODIFIABLE */
}
/* BLOC FORUM */
.Forum {
margin:auto; margin-bottom:10px;
width:830px; height:100px; overflow:hidden;
}
/* ICÔNES FORUM */
.ImageForum{
display:inline-block; vertical-align:top;
width:35px; height:35px;
margin-top:-18px; margin-left:-20px;
}
/* DESCRIPTION FORUM */
.DescriptionForum {
display:inline-block; vertical-align:top;
width:300px; height:90px; padding:5px; overflow:auto;
font-size:10px; text-align:justify;
background:#C6B5CA; color:black; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.DescriptionForum img{
position:absolute; margin-top:-5px; margin-left:310px;
width:250px; height:100px;
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
.BlocImageDescription {
display:inline-block; vertical-align:top;
width:250px; height:100px;
border-left:5px solid; border-right:5px solid;
background:white; border-color:#D7D5D5 !important; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.SousForums {
position:relative; z-index:2;
width:250px; height:90px; padding:5px 0; overflow:auto;
background:#42A8AE; /* MODIFIABLE */
color:rgba(0,0,0,0); line-height:6px;
opacity:0; transition:opacity 0.55s ease-in-out; -webkit-transition:opacity 0.55s ease-in-out;
}
.SousForums:hover {
opacity:1;
}
/* LIEN SOUS-FORUM */
.SousForums a{
display:block; margin:auto;
width:95%; line-height:16px;
background:white; color:#D07F7F !important; text-transform:uppercase; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.DernierMessage {
display:inline-block; vertical-align:top;
width:250px; height:90px; padding:5px;
text-align:center; font-size:10px; text-transform:uppercase;
background:#C6B5CA; color:black; /* MODIFIABLE */
margin-bottom:-50px;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.NombreSetM {
text-transform:none;
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.AvatarForum {
display:inline-block; vertical-align:top;
width:50px; height:50px; overflow:hidden;
background:#ccc; /* MODIFIABLE */
}
.AvatarForum img {
width:50px; filter:grayscale(1); -webkit-filter:grayscale(1);
}




Onyx

Catégories sombres turquoises - Jeu 29 Sep 2016 - 23:43




Catégories sombres turquoises


Salut !

Voici un petit LS de catégories que j'ai faites pour la demande de TénébreuseRP.

Pour voir l'aperçu : cliquez ici.
Pour voir l'aperçu au survol du bloc de gauche, de sujets et de messages : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer les catégories dans le template.
  • Puis, nous allons mettre en forme les catégories à l'aide du CSS.


- Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
- La version du forum est PhpBB3.

Mettre un crédit vers Never-Utopia est obligatoire.



1. Les catégories (Template Index_Box)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, on va entièrement remplacer le template "Index_Box" par ceci :
Code:
<ul class="linklist">
  <!-- BEGIN switch_user_logged_in -->
  <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
  <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
  <!-- END switch_user_logged_in -->
  <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
  <!-- BEGIN switch_user_logged_in -->
  <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
  <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cate_bloc">
  <div class="cate_title">
    <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
    {catrow.tablehead.L_FORUM}
    <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
  </div>
  <!-- END tablehead -->
  <!-- BEGIN forumrow -->
  <div class="forum_bloc">
    <div class="forum_bloc_left">
      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum_title">
        {catrow.forumrow.FORUM_NAME}
      </a>
      <div class="forum_sf">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </div>
      <div class="forum_oldnewlock">
        <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
      </div>
    </div>
    <div class="forum_bloc_middle">
      <div class="forum_desc">
        {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="forum_bloc_right">
      <div class="forum_lastmess">
        <!-- BEGIN switch_topic_title -->
        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
          {catrow.forumrow.LATEST_TOPIC_NAME}
        </a>
        <br />
        <!-- END switch_topic_title -->
        {catrow.forumrow.USER_LAST_POST}
      </div>
      <div class="forum_nbsujets">
        Sujets
        <div class="forum_nbsujets_hide">
          {catrow.forumrow.TOPICS}
        </div>
      </div>
      <div class="forum_nbmessages">
        Messages
        <div class="forum_nbmessages_hide">
          {catrow.forumrow.POSTS}
        </div>
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
  <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
  <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> • </li>
  <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  <!-- BEGIN switch_delete_cookies -->
  <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
  <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->




2. Mise en forme (CSS)


Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de 1 catégorie*/
.cate_bloc {
  width: 100%;
  margin: 20px auto 10px auto;
}
/*Haut de catégorie*/
.cate_title {
  text-align: center;
  margin-bottom: 15px;
}
/*Images de titre de catégorie*/
.cate_title_img {
  width: 120px;
  height: 76px;
  vertical-align: middle;
}
/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  line-height: 76px;
  vertical-align: middle;
  font-family: 'Dancing Script', cursive;
  font-size: 45px;
  color: #c4c4c4;
  text-shadow: 1px 1px 1px #000000;
}

/*Bloc de 1 forum*/
.forum_bloc {
  position: relative;
  width: 100%;
  margin: auto;
  height: 200px;
  margin-bottom: 20px;
  background: #172326;
  border: 2px solid #26464d;
  font-size: 13px;
  font-family: 'Verdana';
  color: #a3a3a3;
}

/*Bloc de droite*/
.forum_bloc_left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 250px;
  height: 200px;
  border-right: 2px solid #1b4f59;
}
/*Titre de forum*/
.forum_title {
  dislay: block;
  position: absolute;
  width: 240px;
  padding: 5px 5px 10px 5px;
  text-align: center;
  top: 0px;
  left: 0px;
  z-index: 4;
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  color: #2a858c!important;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000000;
}
/*Titre survolé*/
.forum_title:hover {
  color: #35a9b3!important;
}
/*Bloc Image OldNewLock*/
.forum_oldnewlock {
  position: absolute;
  width: 152px;
  height: 154px;
  top: 10px;
  left: -52px;
  z-index: 2;
  background: url('http://img4.hostingpics.net/pics/774596Normal.png');
}
/*Image OldNewLock*/
.forum_oldnewlock img {
  display: inline-block;
  margin: 2px 0px 0px 2px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*Bloc des sous-forums*/
.forum_sf {
  dislay: block;
  position: absolute;
  width: 240px;
  padding-right: 5px;
  height: 105px;
  bottom: 5px;
  left: 5px;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 13px;
  font-family: 'Verdana';
  text-align: center;
  color: #2a858c;
}
/*Liens des sous-forums*/
.forum_sf .gensmall {
  font-size: 13px;
  font-family: 'Verdana';
  color: #2a858c;
}
.forum_sf .gensmall:hover {
  color: #35a9b3;
}
/*Actions au hover du titre*/
.forum_bloc_left:hover .forum_sf {
  visibility: visible;
  opacity: 1;
}
.forum_bloc_left:hover .forum_oldnewlock img {
  visibility: hidden;
  opacity: 0;
}

/*Bloc de milieu*/
.forum_bloc_middle {
  margin-left: 252px;
  margin-right: 202px;
}
/*description des forums*/
.forum_desc {
  margin: 5px 0px 5px 5px;
  padding-right: 5px;
  overflow: auto;
  height: 190px;
  text-align: justify;
}

/*Bloc de gauche*/
.forum_bloc_right {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  height: 200px;
  border-left: 2px solid #1b4f59;
  text-align: center;
}
/*Dernier message*/
.forum_lastmess {
  height: 73px;
  padding: 25px 5px 0px 5px;
  line-height: 16px;
  vertical-align: middle;
}
/*Lien de dernier message*/
.forum_lastmess a {
  color: #2a858c;
}
.forum_lastmess a:hover {
  color: #35a9b3;
}
/*Bloc de sujets et messages*/
.forum_nbsujets, .forum_nbmessages {
  position: relative;
  width: 180px;
  height: 29px;
  font-size: 14px;
  padding: 10px;
  line-height: 29px;
  vertical-align: middle;
  border-top: 2px solid #1b4f59;
}
/*Bloc du nombre de sujets et messages*/
.forum_nbsujets_hide, .forum_nbmessages_hide {
  position: absolute;
  width: 180px;
  height: 29px;
  line-height: 29px;
  vertical-align: middle;
  padding: 10px;
  top: 0px;
  left: 0px;
  opacity: 0;
  background: #172326;
  text-shadow: 1px 1px 1px #000000;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*Apparition des nombres*/
.forum_nbsujets:hover .forum_nbsujets_hide,
.forum_nbmessages:hover .forum_nbmessages_hide {
  opacity: 1;
}


Voilà les boutons Nouveau, Pas de de Nouveaux Messages et Verrouillé :
http://img4.hostingpics.net/pics/233690CatgorieForum.png
http://img4.hostingpics.net/pics/881805CatgorieNouveau.png
http://img4.hostingpics.net/pics/231407CatgorieVerrouill.png

Sinon, dans le CSS, vous avez une image dans la class "forum_oldnewlock" que vous voudrez peut-être modifier si vous voulez personnaliser le tout :
http://img4.hostingpics.net/pics/774596Normal.png




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Cacher/révéler certains forums de différentes catégories (onglets) - Mar 20 Sep 2016 - 6:38




Cacher/révéler certains forums de différentes catégories (onglets)


Salut !

Sur le thème actuel (septembre 2016), il est possible de cocher/décocher les différents types de forums sur le menu afin de cacher/révéler les forums qui parlent uniquement de RPG, codage ou graphisme, même s'ils font partie de plusieurs catégories. Ce tutoriel vous permettra de faire la même chose avec l'option de garder vos choix en mémoire pour que vous n'ayez pas besoin cacher/révéler les forums que vous voulez à chaque fois que vous rechargez la page.

Exemple d'application :
Disons que vous avez un forum pirate et que vous avez séparé les catégories selon les parties du monde (Asie, Europe, Amérique, etc.). Seulement, certains forums sont principalement utilisés par pirates, d'autres par la marine, d'autres par les civils et d'autres par tout le monde. Histoire de faciliter la vie à tout le monde, vous décidez d'installer le système pour que les membres aient le choix de cocher/décocher les forums qu'ils veulent voir ou non.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons modifier un peu les catégories pour ajouter le système d'onglets.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • ensuite, nous allons voir comment personnaliser le javascript avec vos onglets.
  • Enfin, nous allons styliser un peu les onglets avec du CSS.


Vos catégories doivent avoir la hiérarchie "Séparer sur l'index : Moyen".
Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Ajout du système d'onglet (Template Index_Box)


Nous allons commencer par aller dans les templates, plus précisément dans le template "index_box".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, tout en haut du template, on va ajouter ceci :
Code:
<table id="selector">
  <tr>
    <td class="selectoroption">Nom onglet 1</td>
    <td class="selectoroption">Nom onglet 2</td>
    <td class="selectoroption">Nom onglet 3</td>
  </tr>
</table>


Je pense que je n'ai pas besoin de vous expliquer comment ajouter/modifier/enlever des onglets, c'est pas mal explicite u_u




Maintenant, on va entourer chaque forum d'une div pour bien les sélectionner et on va mettre un lien pour les identifier.

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Ensuite, trouvez ceci :
Code:
<!-- BEGIN forumrow -->


Et ajoutez ceci juste après :
Code:
<a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}" style="display: none;"></a><div>


Enfin, trouvez ceci :
Code:
<!-- END forumrow -->


Et ajoutez ceci juste avant :
Code:
</div>


Spoiler pour PunBB et phpBB2:


Salut!

Si vous avez ces versions de forum, le fonctionnement sera un peu différent.

Tout d'abord, dans le template, retrouvez cette balise :
Code:
<!-- BEGIN forumrow -->


Si la première balise directement après n'est pas une balise "tr", ignorez ce spoiler et suivez les instructions normales pour cette partie.

Si c'est une balise "tr", ajoutez ceci directement avant la balise "tr" :
Code:
<tr style="display: none;"><td><a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}"></a></td></tr>




2. Ajouter le javascript


Maintenant que les onglets ont été créés, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets de forum".
On choisit le placement "Sur toutes les pages".

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'block');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});


Spoiler pour PunBB et phpBB2:


Salut!

Si vous n'avez pas utilisé la technique du spoiler dans la section d'avant, parfait, ne lisez pas ce spoiler et utilisez la méthode normale.


Sinon, utilisez ce javascript :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 2*/
      ];
    }
    else if (optionindex == 2) { /*Onglet 3*/
      tableauop = [
        "/f3-", /*1er forum à enlever ou rajouter dans onglet 3*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').next().css('display', 'table-row');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});




3. Personnaliser le javascript selon votre situation


La première étape est d'aller regarder ce bout de code :
Code:
  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }


En gros, cette fonction associe les onglets à certains forums pour que le reste du javascript sache quel forum cacher/révéler et quand.

Pour rajouter un onglet, vous rajoutez cette partie avant le dernier } de la function :
Code:
    else if (optionindex == W) { /*Onglet Y*/
      tableauop = [
        "/fZ-", /*1er forum à enlever ou rajouter dans onglet Y*/
        "/fZ-", /*2e forum à enlever ou rajouter dans onglet Y*/
      ];
    }


Pour personnaliser le truc :
Le "W" est le numéro de l'onglet moins 1, donc si vous êtes au 3e onglet, vous remplacez le "W" par "2".
Le "Y" est le numéro de l'onglet.
Le "Z" est le numéro du forum à cacher/révéler. Pour savoir quel nombre mettre, allez sur le forum en question et regardez l'adresse url. Elle sera sous cette forme "http://nomduforum.com/f14-trucquelconque". Juste après le /f vous avez un nombre. C'est ce nombre là que vous devez mettre à la place du "Z".

Je pense que vous comprenez le principe ^^




Pour ceux qui ne veulent pas que la décision de cacher/révéler des forums reste en mémoire dans leur navigateur, vous pouvez enlever cette option en supprimant ce bout de code :
Code:
  if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }



3. Mettre en forme les onglets (CSS)


Vous remarquez, sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme les onglets à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc qui entoure les onglets*/
#selector {
  margin: 10px auto 10px auto;
  width: 100%;
  border-spacing: 5px;
  background: #353535; /*Couleur de fond*/
  border: none;
}
/*Onglets actifs*/
.selectoroption {
  padding: 5px;
  background: #656565; /*Couleur de fond*/
  color: #dfdfdf; /*Couleur de la police*/
  font-family: 'Cambria';
  font-size: 14px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
/*Onglets non-actifs*/
.selectoroption_hidden {
  opacity: 0.5;
}





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Nemalus

Catégories en 4 cases - Dim 28 Aoû 2016 - 18:05




Catégories réalisées suite à la demande de .Loumpia.
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait sous phpBB2.

Voici un aperçu :

lien direct : www

Remplacer l'intégralité du template index-box par :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><table width="100%" border="0" cellspacing="7" cellpadding="5" class="categories">
  <!-- BEGIN cathead -->
  <tr>
      <td class="{catrow.cathead.CLASS_CAT}" colspan="3" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <td class="newpost" align="center" valign="middle">
        <span class="lastpost" class="gensmall">{catrow.forumrow.LAST_POST}<br/><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span></span><div class="details" class="gensmall"></div>
                          </td>                <td align="center" valign="middle">
            <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                </td>
      <td valign="top" class="descriptions">
        <div class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
  <br/>
        <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}♠ </center>
       
              </td>
          <td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Dans la feuille de style (CSS) ajouter le code :
Code:
.categories {
  margin: auto;
  width: 880px;
  background:transparent;
  }
  table.categories td a {
  color:#4861A3;
  transition:color linear 0.2s;
  -webkit-transition:color linear 0.2s;
  }
  table.categories td a:hover {
  color:#6274a3;
  transition:color linear 0.2s;
  -webkit-transition:color linear 0.2s;
  }
  table.categories td.newpost {
  border-radius:30px 30px 30px 30px;
  padding-left:10px;
  background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
  border: 3px solid #EA9EE0;
  height:105px;
  width:200px;
  }
  table.categories td span.lastpost {
  height:56px;
  width:127px;
  overflow:visible;
  }
  table.categories td.descriptions {
  border-radius:40px 40px 40px 40px;
  padding-right:10px;
  width:450px;
  background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
  border: 3px solid #EA9EE0;
  height:105px;
  }
  table.categories div.description {
  padding:5px;
  margin:5px 0px 5px 0px;
  overflow:auto;
  height:40px;
  text-align:justify;
  }
  table.categories div.forumlink {
  text-align:center;
  }
  .categories div.forumlink a{
  font-size:20px;
  color:pink;
  font-family:'Cookie';
  }
  table.categories div.details {
  text-align:center;
  }
  table.categories div.lastpost-avatar {
  height:105px;
  width:75px;
  background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
  border: 3px solid #EA9EE0;
  }
  table.categories div.lastpost-avatar img {
  height:105px;
  width:75px;
  padding: auto;
  margin: auto;
  }


Nemalus

Catégories vertes - Dim 28 Aoû 2016 - 17:58




Catégories réalisées suite à la demande de Moro-PM.
Les couleurs sont modifiables, merci de me créditer si utilisation du code. Le code a été fait pour phpCC2

Voici un aperçu :

lien direct : www

Remplacer l'intégralité du template index-box par :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div align="center"><div class="titreCAT">{catrow.tablehead.L_FORUM}</div></div>
    <br clear="all" /><!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
    
<div class="glop"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> {catrow.forumrow.TOPICS} Topics et {catrow.forumrow.POSTS} Messages<br/><br/>
  <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="sousforum"><div align="center">{catrow.forumrow.LAST_POST}<br/><br/><div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div></div><div class="description">{catrow.forumrow.FORUM_DESC}<br/><br/><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}♠ </center></div></div>
    
    
    <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    
    <!-- BEGIN tablefoot -->
    <br clear="all" />
    <!-- END tablefoot --><!-- END catrow -->


Dans la feuille de style (CSS) ajouter le code :
Code:
/* TITRES CATEGORIES */
.titreCAT{
width:450px; height:15px; text-align:center; margin:0 5px; display:inline-block;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); /* MODIFIABLE */
}
.titreCAT h2{
font-size:30px; text-transform:uppercase; letter-spacing:3px;margin-top: -20px;
font-family:Pacifico; color:#BF6161; text-shadow:1px 1px 0px black; /* MODIFIABLE */
}
/* BLOC DESCRIPTION + SOUS-FORUMS */
.glop{
width:600px; margin:10px auto; padding:10px;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo9_r3_250.png'); box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* DESCRIPTIONS BLOC FORUMS */
.description {
margin-left: 5px;
width:350px; height:159px; padding:0px 5px; overflow:auto;
display:inline-block;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); 
font-size:11px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* IMAGES DESCRIPTIVES BLOC FORUMS */
.description img {
position:absolute; z-index:3; margin-left:-169px;
width:159px; height:159px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
/* SOUS-FORUMS */
.sousforum{
position:relative; z-index:5; display:inline-block;
padding:5px; width:149px; height:149px; overflow:auto; text-align:left;
background:#dfdfdf; /* MODIFIABLE */
opacity:0;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sousforum a{
color:white !important; /* MODIFIABLE */
}
.sousforum:hover {
opacity:1;
}


Liste des forums, personnaliser chaque forum seulement en CSS - Sam 16 Avr 2016 - 21:05



Hello :)

Le tutoriel d'aujourd'hui porte sur la personnalisation avec du CSS du style de chaque élément d'un forum sur l'index pour qu'il ait son propre style. C'est un CSS qui se rajoute "par dessus" le CSS de base de vos catégories.

J'ai écrit ce tutoriel assez rapidement, dans le but de m'adresser à des personnes déjà à l'aise avec plusieurs principes de CSS.
Ce tutoriel est une base, une fois le principe compris vous pouvez modifier à volonté en CSS vos forums sur l'index.

Ce tutoriel nécessite d'être assez à l'aise avec le HTML et le CSS.
Voici 2 liens intéressants sur les sélecteurs CSS.
- Principe du CSS : Les sélecteurs (Partie 1 : CSS2)
- Principes du CSS - Les sélecteurs (Partie 2 : CSS3)


Comme je suis une flemmarde, pour l'exemple nous allons reprendre un libre service sur le forum : Catégories simples phpbb2.

Exemple, nos forums au départ :

Nos forums après personnalisation (je voulais mettre en avant le Forum 2) :

J'ai changé le second forum en lui mettant des couleurs de fond différent, une hauteur différente pour le titre et la description.
Ceci est un exemple simple, mais on peut impacter sur tous les CSS comme on le souhaite ensuite (^--^)

Mise en place



Je rappelle les infos de base :
Le template se trouve ici : PA > Affichage > Templates > Général > index-box
Le CSS est à rajouter ici : PA > Affichage > Couleurs > Feuille de style CSS

Tout le code du template d'exemple ce trouve dans ce LS : Catégories simples phpbb2. Ce tutoriel peut s'adapter à beaucoup de structures de forum.

Ici la partie qui nous intéresse est celle qui permet d'afficher un forum, c'est à dire cette portion de code :

Code:
<!-- BEGIN forumrow -->
<div class="un-forum">

  <!-- Bloc statistiques (dernier message + statistiques) -->
    <div class="stats-forum">
        <div class="last-message">{catrow.forumrow.LAST_POST}</div>
        <div class="sujets-messages">{catrow.forumrow.TOPICS} sujets • {catrow.forumrow.POSTS} msg</div>
    </div>
    
    <!-- Bloc infos : titre + description + sous forums -->
    <div class="infos-forum">
        <div class="titre-forum"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
        
        <div class="description-forum">
            <div class="description">{catrow.forumrow.FORUM_DESC}</div>
            <div class="sous-forums gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        </div>
    </div>
    
    <!-- Bloc nouveaux messages / pas de nouveaux messages / verrouillé -->
    <div class="status-forum">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </div>
    
</div> <!-- fermeture .un-forum -->
<!-- END forumrow -->


On peut voir que la structure du HTML est celle ci :
-- .un-forum (un forum entier)
------ .stats-forum (le bloc des stastiques)
------------- .last-message (le bloc dernier message)
------------- .sujets-messages (le nombre de sujets / message)
------ .infos-forum (title + description + sous forums)
------------- .titre-forum (titre du forum)
------------- .description-forum (description + sous forums)
--------------------- .description (description)
--------------------- .sous-forum (liste sous forum)
------ .status-forum (bloc nouveaux messages / pas de nouveaux messages / lock)

J'ai mis un code couleur pour vous aider à distinguer les éléments :)

On peut dire que .last-message et .sujets-messages sont frères (car ils sont à côté dans le HTML). Ils sont aussi les enfants de ".stats-forum" car ils sont à l'intérieur.

De la même manière, .stats-forum, .infos-forum, .status-forum sont tous frères (ils sont sur le même "niveau" dans le HTML). Ils sont tous les enfants de ".un-forum".

Sélectionner un forum précis en CSS



Exemple simple, la couleur du titre du forum



Je souhaite modifier la couleur du titre du forum "Forum 2" pour avoir un texte en blanc.
Normalement dans le CSS je mettrais ceci :
Code:
.titre-forum a {
  color: #ffffff;
}


Le problème c'est que tous les liens deviennent blancs ><

Comment faire pour sélectionner seulement le lien "Forum 2" ? Nous allons utiliser un sélecteur d'attribut !
Voici à quoi ressemble notre lien :
Code:
<a href="/f16-forum-2">Forum 1</a>


On peut voir que notre balise "a" possède un attribut "href" qui a comme valeur "/f16-forum-2"
Pour sélectionner ce lien je peux donc faire :
Code:
.titre-forum a[href="/f16-forum-2"] {
  color: #ffffff;
}


Ce qui signifie "sélectionne dans .titre-forum la balise a qui a comme attribut "href" avec la valeur ""/f16-forum-2"

Pour simplifier le code, je peux mettre ceci :
Code:
.titre-forum a[href^="/f16-"] {
  color: #ffffff;
}


Ce qui signifie "sélectionne dans .titre-forum la balise a qui a comme attribut href la valeur qui commence par /f16-
Le "qui commence par" est indiqué par la présence du petit chapeau avant le signe égale :)

Cela simplifie le code car au lieu de mettre le nom du forum entier "/f16-forum-2", il suffit de mettre "/f16-".
Avec "/f16-forum-2", si je décide d'appeler mon forum "Petit éléphant volant", je vais devoir changer dans le CSS partout avec le nouveau lien.
Ici, "/f16-" indique le numéro du forum, même si le nom du forum change, je n'aurai pas besoin de modifier mon CSS. :hudada:




Nous avons donc réussi à changer la couleur du lien pour le forum "Forum 2" !

La couleur de fond de la zone "Dernier message"



Notre précédent exemple avec le sélecteur d'attribut est bien mais.... Comment faire pour modifier les autres parties ?

Maintenant, plus compliqué, comme je suis embêtante, je veux changer la couleur de fond de ".stats-forum" pour la mettre orange seulement sur le forum qui s'appelle "Forum 2".

En CSS on s'y prendrait comme ça :
Code:
.stats-forum {
  background: #f1c40f;
}


Le soucis c'est que ça change la couleur de fond partout >-<

Comment faire pour choisir seulement le forum "Forum 2" ? Nous allons utiliser un sélecteur d'attribut ainsi qu'un sélecteur d'adjacence.

On va modifier notre template pour rajouter un lien "invisible" au tout début d'un forum.
Juste après ceci  :
Code:
<!-- BEGIN forumrow -->
<div class="un-forum">


On va rajouter ce petit lien qui a la classe "forum-perso-link" :
Code:
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>


Pourquoi lui mettre un attribut style et ne pas gérer ça dans le CSS ?
Ici c'est juste une de mes préférences, je veux être sûre que même s'il y a un bug de CSS ce lien n'apparaitra jaaaaaamaaaais (de toutes les façons il n'a pas de contenu mais bon, on ne sait jamais, je préfère prendre mes précautions).


Attention à ne pas rendre son HTML invalide (par exemple un balise a en dehors d'une cellule (td) dans un tableau si vous avez le template de base. Si vous avez un template de base non modifié, allez dans la section "Problème avec mon code", on pourra vous aider :hug:


Si je reprends la structure que j'avais tout à l'heure, elle est donc devenue :
-- .un-forum (un forum entier)
------ .forum-perso-link (LE LIEN CACHÉ)
------ .stats-forum (le bloc des stastiques)
------------- .last-message (le bloc dernier message)
------------- .sujets-messages (le nombre de sujets / message)
------ .infos-forum (title + description + sous forums)
------------- .titre-forum (titre du forum)
------------- .description-forum (description + sous forums)
--------------------- .description (description)
--------------------- .sous-forum (liste sous forum)
------ .status-forum (bloc nouveaux messages / pas de nouveaux messages / lock)

Si je veux sélectionner le lien caché de "Forum 2", je vais donc mettre dans le CSS :
Code:
.forum-perso-link[href^="/f16-"] {
}


Ici, je ne veux pas changer le lien caché mais ".stats-forum" qui est juste à côté. Je peux donc faire :
Code:
.forum-perso-link[href^="/f16-"] + .stats-forum{
  background: #f1c40f;
}


Et... MAGIE MAGIE, ça maaaarche o/

Néanmoins, je vous conseille de remplacer le + par un ~, afin d'avoir un sélecteur d'adjacence indirecte.
Code:
.forum-perso-link[href^="/f16-"] ~ .stats-forum{
  background: #f1c40f;
}



Pourquoi un sélecteur d'ajacence indirecte ?
Imaginons que je souhaite modifier "status-forum", qui est donc "le dernier des frères". Si j'utilise simplement des + (sélecteur d'adjacence directe), ça va être un peu long :
Code:
.forum-perso-link[href^="/f16-"] + .stats-forum + infos-forum + .status-forum  {
}


Grâce à ça je pourrais sélectionner ".status-forum" (qui est tout à la fin) comme ceci :
Code:
.forum-perso-link[href^="/f16-"] ~ .status-forum {
}


Je peux utiliser .forum-perso-link[href^="/f16-"] ~ .status-forum car .forum-perso-link et .status-forum sont frères et que .status-forum est après .forum-perso-link.

Je compte sur vous pour chercher dans un moteur de recherche "sélecteur d'adjacence indirecte" si mon piètre exemple et l'exemple dans le tuto de Manumanu ne vous ont pas suffit. 8D


Modifier les enfants


(titre très étrange)

Ici, on peut voir que j'ai changé la couleur de fond et du texte du nombre de sujets / message en blanc.
Voici le CSS que j'ai mis :
Code:
.forum-perso-link[href^="/f16-"] ~ .stats-forum .sujets-messages {
  background: #f39c12;
  color: #fff;
}


------ .stats-forum (le bloc des stastiques)
------------- .last-message (le bloc dernier message)
------------- .sujets-messages (le nombre de sujets / message)
Je sélectionne ".status-forum" comme avant, et ensuite je sélectionne son enfant ".sujets-messages".

----


Le CSS correspondant pour le titre :
Code:
.forum-perso-link[href^="/f16-"] ~ .infos-forum .titre-forum {
  background: #f39c12;
  color: #fff;
  height: 100px;
  line-height: 100px;
  text-align: center;
}


Pour la description :
Code:
.forum-perso-link[href^="/f16-"] ~ .infos-forum .description-forum {
  height: 40px;
}


------ .infos-forum (title + description + sous forums)
------------- .titre-forum (titre du forum)
------------- .description-forum (description + sous forums)
Je sélectionne "infos-forum" et ensuite chaque enfant :)

Maintenant, en vous creusant la tête avec les sélecteurs CSS, vous pouvez modifier plein de choses o/

Conseils, amélioration



Personellement, utiliser les sélecteurs d'ajacence m'agacent vite, je fais donc mon HTML différement quand c'est possible.
Au lieu de mettre comme ceci :

Code:
<!-- BEGIN forumrow -->
<div class="un-forum">
  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>
  TOUT MON ANCIEN CODE SE TROUVE JUSTE APRES
<!-- END forumrow -->


-- .un-forum (un forum entier)
------ .forum-perso-link (LE LIEN CACHÉ)
------ .stats-forum (le bloc des stastiques)
------------- .last-message (le bloc dernier message)
------------- .sujets-messages (le nombre de sujets / message)
------ .infos-forum (title + description + sous forums)
------------- .titre-forum (titre du forum)
------------- .description-forum (description + sous forums)
--------------------- .description (description)
--------------------- .sous-forum (liste sous forum)
------ .status-forum (bloc nouveaux messages / pas de nouveaux messages / lock)



Je vais mettre une div autour de l'ensemble de chaque :

Code:
<!-- BEGIN forumrow -->
<div class="un-forum">
  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>
  <div class="forum-perso-autour">TOUT MON ANCIEN CODE SE TROUVE DANS CETTE NOUVELLE DIV</div>
<!-- END forumrow -->


-- .un-forum (un forum entier)
------- .forum-perso-link (LE LIEN CACHÉ)
------- .forum-perso-autour (entoure tout mon ancien code de forum)
------------ .stats-forum (le bloc des stastiques)
------------------- .last-message (le bloc dernier message)
------------------- .sujets-messages (le nombre de sujets / message)
------------ .infos-forum (title + description + sous forums)
------------------- .titre-forum (titre du forum)
------------------- .description-forum (description + sous forums)
--------------------------- .description (description)
--------------------------- .sous-forum (liste sous forum)
------------ .status-forum (bloc nouveaux messages / pas de nouveaux messages / lock)


Ainsi, mon CSS est plus facile à faire pour moi. Au lieu d'avoir :
Code:
.forum-perso-link[href^="/f16-"] ~ .stats-forum {
  background: #f1c40f;
}

.forum-perso-link[href^="/f16-"] ~ .stats-forum .sujets-messages {
  background: #f39c12;
  color: #ffffff;
}

.forum-perso-link[href^="/f16-"] ~ .infos-forum .titre-forum {
  text-align: center;
  background: #f39c12;
  color: #ffffff;
  height: 100px;
  line-height: 100px;
}

.forum-perso-link[href^="/f16-"] ~ .infos-forum  .description-forum {
  height: 40px;
}


Je peux mettre :
Code:
.forum-perso-link[href^="/f16-"] + .forum-perso-autour .stats-forum {
  background: #f1c40f;
}

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .sujets-messages {
  background: #f39c12;
  color: #ffffff;
}

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .titre-forum {
  text-align: center;
  background: #f39c12;
  color: #ffffff;
  height: 100px;
  line-height: 100px;
}

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .description-forum {
  height: 40px;
}


Je trouve ça plus rapide pour coder que de devoir toujours regarder les parents / frères / enfants :)

Pour les forums en HTML5


Pour ceux qui ont un forum avec un doctype HTML5 (car vous l'avez modifié vous même par exemple), vous pouvez simplifier encore plus le code et vous passer de ce "faux lien".

Au lieu de faire cette modification :
Code:
<!-- BEGIN forumrow -->
<div class="un-forum">
  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>


Il suffit de faire ceci :
Code:
<!-- BEGIN forumrow -->
<div class="un-forum" data-link="{catrow.forumrow.U_VIEWFORUM}">
  LE RESTE DE VOTRE


Ensuite, pour styliser, il suffit de mettre des sélecteurs d'enfants :
Code:
.un-forum[data-link^="/f16-"] .stats-forum {
  background: #f1c40f;
}

.un-forum[data-link^="/f16-"] .sujets-messages {
  background: #f39c12;
  color: #ffffff;
}

.un-forum[data-link^="/f16-"] .titre-forum {
  text-align: center;
  background: #f39c12;
  color: #ffffff;
  height: 100px;
  line-height: 100px;
}

.un-forum[data-link^="/f16-"] .description-forum {
  height: 40px;
}



En cas de problème, merci d'aller dans la section "Problème avec mon code" ♥


Si votre question est d'ordre générale sur la compréhension du tutoriel, n'ayez pas peur de commenter en dessous, je surveille le sujet. J'essayerai d'y répondre. (^-^)


D'une manière très similaire, on peut rajouter un id à chaque catégorie pour pouvoir ensuite les personnaliser séparément !
L'explication se trouve dans ce message précisément

Fangs

[HTML5 & CSS3] - Catégories & forums modernes - Mer 1 Juil 2015 - 18:58




Catégories et forums modernes

Bonjour à tous !  cheers


Me voici avec un nouveau libre service ! Ca faisait très longtemps que j'avais pas codé et du coup cet après midi je me suis dit qu'il était temps de s'y remettre !


Ce que je vous propose la c'est une mise en page des catégories et forums que j'aime pas mal. Je me suis bien débrouillé :)


Pour avoir un petit aperçu je vous invite à regarder cette image. (À noter que la description de forum apparaît au survol de l'image).


Il y a donc trois étapes à suivre pour ce LS donc:
- Le HTML dans les templates
- Le CSS
- Quelques codes dans la description de vos forums et dans votre titres de catégories


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2 ou PUNBB.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:

Assez parlé, tout d'abord on va premièrement se rendre dans le template 'index-box'. Vous allez tout selectionner et remplacer par ceci:


Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<div class="index_fc">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="categorie">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->
   <!-- BEGIN forumrow -->
      <div class="forum">
                <div class="forum_case">
                     <div class="description">
                        {catrow.forumrow.FORUM_DESC}
                     </div>
                     <div class="bottom_section"></div>
                     <div class="bottom_border"></div>                  
                     <div class="forum_name">
                           <a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                     </div>
                     <div class="tnm">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                     </div>
                </div>
      </div>
   <!-- END forumrow -->

<!-- END catrow -->
</div>

N'oubliez pas de publier votre template. Donc à ce stade-ci, votre forum doit être aussi laid que possible. C'est pourquoi nous allons nous occuper des CSS, et plus particulièrement ceux-ci que vous allez coller dans vos feuilles de style:

Code:

/* DEBUT MISE EN PAGE CATEGORIES ET FORUMS - FANGS */
/* clearfix categorie - regle un bug*/
.index_fc::after {
  clear: both;
  content: "";
  display:block;
}

.categorie {
  position: relative;
  clear: both;
  height: 50px;
  position: relative;
  margin-top: 50px;
  margin-bottom: -18px;
  margin-left: 35px;
  z-index: 2;
}

.categorie_txt {
  position: relative;
  font-size: 40px;
  font-family: 'Josefin Slab', Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  text-align: right;
}

.forum {
  width: 980px;
  margin: auto !important;
}

.forum_case {
  float: left;
  width: 490px;
  height: 245px;
  background-color: #111418;
}

.description {
  position: relative;
  width:490px;
  height: 245px;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom_section {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  background-color: #fff;
  opacity: 0.3;
}

.bottom_border {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  border-top: 1px solid #fff;
}

.tnm {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-right: 11px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-family: Georgia, Arial, serif;
}

.forum_name {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-left: 10px;
  z-index: 2;
}

.forum_link {
  color: #fff !important;
  text-shadow: 1px 1px 2px #000;
  font-variant: small-caps !important;
  text-decoration: none;
  font-size: 16px;
  font-family: Georgia, Arial, serif;
}

.description_img {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
}

.description_img:hover {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
  opacity: 0.2;
}

.description_txt {
  position: relative;
  width: 460px;
  height: 215px;
  padding: 15px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 12px;
  font-family: Georgia, Arial, serif;
  text-align: justify;
}

/* FIN MISE EN PAGE CATEGORIES ET FORUMS - FANGS */

Les deux premières étapes sont terminées. Mais ce n'était que du copier-coller. Les deux porchaines risquent d'être un peu plus longues.


Vous allez vous rentre dans la configuration de vos catégories et forums et pour chaque titre de catégories vous allez entrer ce code:


Code:
<span class="categorie_txt">Nom de votre catégorie</span>

Et enfin vous allez vous rendre dans les description de vos forums et allez utiliser ce code:


Code:
<div class="description_txt">
       Lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet.    
</div>
<div class="description_img">
      <img alt="**" src="URL DE L'IMAGE 490*245" />
</div>

Cette étape peut paraître longue mais elle est nécessaire.


Bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !


Invité

Catégories «Art Sport» - Dim 17 Mai 2015 - 16:32

{#}html{/#} {#}css{/#} {#}categories{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}



   

Catégories «Art Sport»

Capture d'écran (Aperçu)

   
- La version du forum doit être PhpBB2.
- Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer sur l'index : Moyen".
- Les catégories ont une largeur d'environ 800 pixels.
- Ce LS est fait pour des forums avec des noms assez courts parce qu'il n'y a pas beaucoup d'espace pour le nom.


Le template (index_box) :::
Code:
<link href="https://fonts.googleapis.com/css?family=Lobster+Two|Rochester" rel="stylesheet" />
<table width="95%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table class="forumline" width="95%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
    <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle">
      {catrow.tablehead.L_FORUM}
    </th>
  </tr>
 <!-- END tablehead -->
 
 <!-- BEGIN cathead -->
 <tr>
 
 <td class="{catrow.cathead.CLASS_CAT}" colspan="2" width="100%">
 <h{catrow.cathead.LEVEL} class="hierarchy">
 <span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 </h{catrow.cathead.LEVEL}>
 </td>
 <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="2" align="right"> </td>
 </tr>
 <!-- END cathead -->
 
 <!-- BEGIN forumrow -->
  <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
                                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><span class="namecat">{catrow.forumrow.FORUM_NAME}</span></a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
                  <table><td><div class="genmed cate-description">{catrow.forumrow.FORUM_DESC}</div></td>
                    <td><div class=" gensmall sousforums"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
              <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
                </script>
                      </div>
 </td><td align="left" valign="middle" height="50">
  <div class="sousforums"><div class="gensmall sujets_messages">Post : {catrow.forumrow.POSTS} | Topic : {catrow.forumrow.TOPICS}</div>
                            <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
 </td></table>
 </td>
 
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->



Le CSS :::
Code:
/* DEBUT CATEGORIES */
.sousforums {
  background-color: #BFCFC5;
  border: 1px solid #D4D4D4;
  box-shadow: 0 0 5px #E0E0E0;
  color: #555;
  font-size: 10px;
  font-style: italic;
  overflow: auto;
  width: 150px;
  height: 60px;
}

.cate-description {
  background-color: #BFCFC5;
  border: 1px solid #D4D4D4;
  box-shadow: 0 0 5px #E0E0E0;
  color: #555;
  font-size: 10px;
  font-style: italic;
  overflow: auto;
  width: 400px;
  height: 60px;
}

.secondarytitle {
  font-family: 'Lobster Two';
}

a.forumlink {
  text-align: left;
  z-index: 100;
  display: block;
  margin-bottom: -10px;
  font-family: 'Rochester';
  font-size: 25px;
  font-weight: 400;
  text-shadow: 1px 1px 1px #ff18e6;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

a.forumlink:hover {
  color: #d08777;
  padding-left: 40px;
}

/* FIN CATEGORIES */


   
Pensez à me créditer (Fait par Asphodèle sur Never Utopia.)


code (c) crackle bones

   

Faire un design différent pour chaque catégorie (HTML et CSS) - Mer 4 Mar 2015 - 22:14




Faire un design différent pour chaque catégorie (CSS uniquement)


Édit d'Onyx : Bien que les notions vues dans ce tutoriel fonctionnent, je vous conseillerais d'utiliser ce tutoriel de Nihil Scar Winspeare qui utilise une méthode plus simple et plus propre.


Vous savez qu'on peut faire une mise en forme pour les forums et les catégories... Mais saviez-vous que vous pouvez personnaliser chacune de vos catégories pour qu'elles soient tous différentes les unes des autres? Eh bien, c'est ce que ce tuto vous montrera ^^


Voici quelques exemple de ce qu'on peut obtenir :
Exemple 1
Exemple 2
Exemple 3


Voilà tout ce qu'on va voir qu'on peut personnaliser individuellement :
- Les titres de chaque catégorie.
- Le fond (design général) de chaque catégorie.
- Les titres de chaque forum.
- Le fond (design général) de chaque forum et de chaque partie de chaque forum.
- La description des forums.

Et tout ce qu'on ne peut pas personnaliser individuellement :
- La structure des catégories et des forums.
- Les images New/Old/Lock.
- La mise en forme (police et couleur) des liens vers les sous-forums.
- La mise en forme (police et couleur) du dernier message.
- La mise en forme (police et couleur) des statistiques (nombre de messages et de sujets)


Voici comment est séparé le tutoriel, soit nos grandes étapes à suivre :
1. Comment faire une disposition "générale" pour les catégories et forums. Aperçu.
2. Comment personnaliser chaque fond et titre de catégorie. Aperçu.
3. Comment personnaliser chaque fond et titre de forum. Aperçu.
4. Problèmes possibles


- La version du forum doit être "PHPBB2".
- La hiérarchie et la structure des catégories doivent être "Séparer sur l'index : moyen".
- Le niveau de ce tutoriel est intermédiaire/avancé.



1. Comment faire une disposition "générale" pour les catégories et forums


Rappel :
Ce tuto utilise PhpBB2 et la hiéarchie "Séparer sur l'index: moyen". Si vous êtes sur une autre version de forum ou que vous utilisez une autre hiéarchie, la procédure à suivre est un peu différente.

Avant tout, il faut construire une structure générale pour nos catégories et nos forums. Pour cela, vous pouvez utiliser les tutos déjà existants, des LS, vos propres compétences ou la structure que j'utiliserai pour vous montrer comment faire.

Normalement, avec la hiéarchie que nous avons choisie, les catégories sont faites avec des "table" et des "td". Néanmoins, outre le fait que l'usage des tableaux pour autre chose que mettre en forme des données est de plus en plus déconseillé, je trouve cela plus facile à comprendre visuellement lorsqu'on utilise des "div", alors l'exemple suivant vous montrera la structure des catégories à l'aide de "div". Cela ne vous empêche pas de bâtir vos propres catégories selon la méthode que vous préférez ^^

Donc voilà, en gros, comment les différentes parties du template Index_box sont structurées (les informations entre parenthèses sont des simple indications, ne les recopiez absolument pas dans votre template) :
Code:
(Autres trucs avant le début des catégories)

<!-- BEGIN catrow --> (Indique le début des catégories)

  <!-- BEGIN tablehead --> (Indique le début de la partie du haut de chaque catégorie)

    <div> (Ouverture de la div qui englobe toute la catégorie)

      <div> ( Ouverture de la div du titre de catégorie)
        {catrow.tablehead.L_FORUM}
      </div> (Fermeture de la div du titre de catégorie)

      <div> (Ouverture de la div qui englobe tous les forums)

  <!-- END tablehead --> (Indique la fin de la partie du haut de chaque catégorie)

  <!-- BEGIN forumrow --> (Indique le début de chaque forum)

        <div> (Ouverture de la div qui englobe un seul forum)
          Trucs à l'intérieur du forum
        </div> (Fermeture de la div qui englobe un seul forum)

  <!-- END forumrow -->  (Indique la fin de chaque forum)

  <!-- BEGIN tablefoot --> (Indique le début de la partie du bas de chaque catégorie)

    </div> (Fermeture de la div qui englobe tous les forums)

  </div> (Fermture de la div qui englobe toute la catégorie)

  <!-- END tablefoot --> (Indique la fin de la partie du bas de chaque catégorie)

<!-- END catrow --> (Indique la fin des catégories)


Une fois qu'on a notre structure globale de faite, on veut habituellement la mettre en forme. Pour cela, on on ajoute une "class" à chaque "div" (ou span, ou td, ou ce que vous préférez utiliser) et on s'en sert pour personnaliser chaque partie dans le CSS.

Pour ce qui est des éléments "à l'intérieur du forum" que je n'ai pas pris la peine de détailler, voici une petite liste rapide des différentes variables et de leur signification (avec PhpBB2 et la hiérarchie "Séparer sur l'index: moyen") :

VariableSignification
{catrow.tablehead.L_FORUM}Titre de forum
{catrow.forumrow.FORUM_FOLDER_IMG}URL de l'image Old/New/Lock. Habituellement, on prend on complet l'image qui contient cette variable lorsqu'on crée la structure des forums
{catrow.forumrow.U_VIEWFORUM}Lien d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_NAME}Le nom d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_DESC}Description de forum
{catrow.forumrow.switch_moderators_links.L_MODERATOR} {catrow.forumrow.switch_moderators_links.MODERATORS}Personnes qui peuvent modérer ce forum ou sous-forum
{catrow.forumrow.L_LINKS} {catrow.forumrow.LINKS}Liens des sous-forums d'un forum
{catrow.forumrow.TOPICS}Nombre de sujets dans un forum
{catrow.forumrow.POSTS}Nombre de messages dans un forum
{catrow.forumrow.avatar.LAST_POST_AVATAR}Avatar du dernier posteur
{catrow.forumrow.LAST_POST}Dernier message



Vous disposez de ces différentes variables en les entourant de "span", "div", "td" ou ce que vous préférez. Puis, vous fonctionnez pareil pour les personnaliser, à savoir en rajoutant des "class", puis en utilisant le CSS.

Il y a tellement de façons différentes de fonctionner qu'il n'y a pas de modèle précis... Néanmoins, pour le bien de ce tuto, il sera important d'entourer le titre de forum ainsi que le titre de catégorie d'un span ou d'une div (comme le titre de catégorie) et de lui donner une class précise.

De plus, il est important d'utiliser le plus possible des tailles "fixes". Si vous mettez certains éléments avec une largeur ou une hauteur en % ou que vous avez tendance à utiliser des "span" qui s'ajuste au contenu, cela risque de causer des problèmes par la suite.




Voici à quoi correspond la structure des catégories que j'utiliserai pour l'exemple du tuto et qui vous donnera cet aperçu :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
         
            <div class="forum_img_bloc">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
              </div>
           
              <div class="forum_lastmess_bloc">
                  {catrow.forumrow.LAST_POST}
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->


Ainsi que mon CSS (sans forum ou catégorie personnalisée) de base :
Code:
/*Bloc de catégories*/
.cate_bloc {
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


/*Bloc des titres de catégorie*/
.cate_title {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}
/*Titre des catégories*/
.cate_title h2 {
  margin: 0px;
  padding: 0px;
  font-size: 36px;
  color: #dfdfdf;
  font-family: 'Vivaldi';
  text-align: center;
}


/*Bloc de un forum*/
.forum_bloc {
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}
/*Bloc du milieu de forum*/
.forum_principal_bloc {
  width: 640px;
  margin: auto;
  padding: 2px 20px 10px 20px;
  background-color: #a3a3a3;
  border: 1px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-left: 3px solid #c4c4c4;
  border-radius: 30px;
}


/*Bloc de titre de forum*/
.forum_title_bloc {
  margin-left: -65px;
  height: 27px;
  margin-bottom: 5px;
  text-align: center;
}
/*Titre de forum*/
.forum_title_bloc a.forumlink {
  font-family: 'monotype corsiva';
  font-size: 24px;
  color: #dfdfdf!important;
  text-decoration: none!important;
  letter-spacing: 1px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre de forum survolé*/
.forum_title_bloc a.forumlink:hover {
  color: #dfdfdf!important;
  letter-spacing: 5px;
}


/*Bloc de image new-old-lock*/
.forum_img_bloc {
  float: left;
  height: 80px;
  width: 85px;
}


/*Bloc de la description*/
.forum_desc_bloc {
  float: left;
  margin-left: 25px;
  margin-top: -5px;
  height: 78px;
  width: 343px;
  border: 1px solid #dfdfdf;
  padding: 5px;
  border-radius: 10px;
  background-color: #c4c4c4;
  text-align: justify;
  font-size: 10px;
  overflow: auto;
}


/*Bloc du denier message et des statistiques*/
.forum_lastmess_stats_bloc {
  float: left;
  margin-left: 25px;
  height: 78px;
  width: 148px;
  text-align: center;
  background-color: #c4c4c4;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
}
/*Bloc des statistiques*/
.forum_stats_bloc {
  margin: auto;
  margin-top: 5px;
  width: 140px;
  height: 18px;
  text-align: center;
  font-size: 11px;
  font-family: 'times new roman';
  margin-bottom: 5px;
  border-bottom: dotted 2px #dfdfdf;
}
/*Bloc du dernier message*/
.forum_lastmess_bloc {
  margin: auto;
  width: 140px;
  text-align: center;
  font-size: 12px;
  font-family: 'times new roman';
}


/*Bloc des sous forums*/
.forum_sousforums_bloc {
  margin: auto;
  height: 20px;
  overflow: auto;
  width: 580px;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  font-family: 'Times New Roman';
  background-color: #a3a3a3;
  border-bottom: 3px solid #c4c4c4;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-radius: 0 0 30px 30px;
  vertical-align: bottom;
  line-height: 20px;
}
/*Écriture des sous-forums*/
.forum_sousforums_bloc .gensmall {
  vertical-align: bottom;
  font-size: 12px;
  line-height: 20px;
  font-family: 'Times New Roman';
}




2. Comment personnaliser chaque fond et titre de catégorie


Avant de commencer cette étape, il va falloir que toutes les catégories, forums et sous-forums soient déjà créés.

Si vous voulez savoir pourquoi, c'est que pour personnaliser chaque catégorie, on va aller "ajouter" un deuxième fond de catégorie qui cachera le premier. Ce "deuxième fond" ne s'ajustera pas automtiquement à la hauteur de la catégorie, alors nous devront lui donner une hauteur nous-même. Et si jamais vous rajoutez des forums ou sous-forums dans votre catégorie, vous devrez ensuite ajuster de nouveau la hauteur.

Bref, il faut que toutes les catégories, forums et sous-forums soient déjà créés avant de continuer.




Pour cette étape, nous allons utiliser ce qu'on appelle "les positions" et "le z-index". Je vais vous expliquer certaines de leurs particularités au fur et à mesure qu'on les utilisera. Néanmoins, si vous voulez plus d'informations, je vous invite à aller sur cette étape de cursus.




La question est :
Comment personnaliser une catégorie spécifique... Alors que la seule chose qu'on peut accéder dans une catégorie spécifique, c'est son titre?

La réponse est :
En se servant justement de ce titre!

Bon, ok, c'est chelou dit comme ça >< Du coup, je vais vous montrer un screen qui vous montrera une catégorie normale :
Schéma de base

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Pas vraiment de profondeur)
- Par dessus, on a le titre de catégorie et les forums. (Pas vraiment de profondeur)


Ce qu'on va faire, c'est qu'on va mettre des éléments supplémentaires dans le titre de catégorie et on va aller les positionner pour cacher l'ancien design de la catégorie, comme ceci :
Schéma de ce qu'on veut avoir

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)


Ok... mais pourquoi tu parles de profondeur et de "z-index" dans ton image? Ça veut dire quoi?
Je veux "cacher" certains éléments (titre de catégorie normal et fond de catégorie normal) avec d'autres éléments. Pour faire cela, je dois m'assurer que mes éléments personnalisés soient "par dessus" les éléments normal. Pour cela, j'utilise le "z-index".


Et c'est quoi un "z-index"?
C'est une propriété de CSS qui indique justement la profondeur d'un élément. Cela nous permet de superposer comme on le veut des éléments. Plus un z-index est élevé, plus l'élément sera "par dessus". Plus le z-index est petit, plus l'élément sera "en dessous".

Donc si je veux que mon fond de catégorie de personnalisé soit "par dessus" mon fond de catégorie normal, il va falloir que je lui donne z-index plus gros que le fond de catégorie normal, tout simplement.




Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser le fond et le titre de catégorie de chaque catégorie, on va passer par le seul endroit où nous avons accès à une catégorie spécifique : le titre de catégorie.

Donc nous allons aller dans la catégorie que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de catégorie d'un span avec la class "cate1" pour pouvoir personnaliser la mise en forme de ce titre de catégorie.
Quant au deuxième span avec la class "catefond1", il va correspondre à notre fond de catégorie personnalisé.




Maintenant, on passe aux modifications du CSS! On commence par ajouter une position "relative" à notre fond de catégorie de base.

Errr... Une position?
Pour ce qui nous intéresse dans ce tutoriel, une position a 2 utilités.

Premièrement, cela nous permet d'utiliser le "z-index". En effet, le "z-index" ne fonctionne que si notre élément a une "position".

Deuxièmement, cela nous permet de faire du "positionnement". Et oui, les "positions" permettent de "positionner", c'est logique :hum:. Entre autres, la position "relative" laisse le bloc à son emplacement actuel. C'est donc la position que nous allons utiliser le plus souvent lorsque nous souhaitons simplement nous servir du "z-index". Mais, on va aussi utiliser la position "absolute".

La position "absolute" fait que l'élément se place toujours en haut à droite de son plus proche "parent" ayant une position "relative". Si un élément avec position "absolute" n'a aucun parent avec position "relative", il se met automatiquement en haut à droite de l'écran. En effet, la position relative permet de lancer un message qui dit "hé ho, je suis votre référence et votre dieu". Du coup, les éléments avec position "absolute" vont chercher parmi leurs "parents" et vont aller se placer par rapport au premier qui a la position "relative" qu'il sera capable de trouver.


Ici, on va vouloir que notre fond de forum normal serve de "référence" à notre fond de forum personnalisé lorsqu'on va vouloir le positionner. Du coup, on ajoute une position "relative" à notre fond de catégorie de normal :
Code:
/*Bloc de catégories*/
.cate_bloc {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Ensuite, si on se référe à notre schéma de tout à l'heure, on constate que nos forums doivent être par dessus notre fond de forum personnalisé. Plus précisément, on a besoin d'un "z-index: 2;". Et pour pouvoir utiliser un "z-index", il nous faut une "position". On va donc mettre un "z-index: 2;" et une "position: relative;" à nos forums :
Code:
/*Bloc de un forum*/
.forum_bloc {
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}





Maintenant qu'on a positionné et ajusté la profondeur de nos éléments normaux, on va passer aux éléments "personnalisés". On va commencer par le titre de catégorie lui-même.

Pour cela, on copie/colle le CSS du titre de la catégorie de base, puis on va changer le nom pour ".cate_title .cate1".

Pourquoi ".cate_title .cate1"?
Tout à l'heure, nous avions entouré notre titre de catégorie d'un span avec la class "cate1". Du coup, nous mettons ".cate1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le titre de catégorie soit personnalisé partout et qu'il brise notre design, on met "cate_title" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
.cate_title .cate1 {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





La hauteur, les margins et la largeur n'étant pas pris en compte dans les éléments de type "inline" comme un "span". Alors si vous avez une hauteur, largeur ou des margins pour votre titre de catégorie, vous aller devoir transformer ajouter un "display: block;" pour transformer votre "span" en "bloc" et qu'il ait les bonnes dimensions. Si vous n'en avez pas, tant mieux pour vous, vous pouvez passer à la prochaine étape.

Présentement, cela me donne ceci :
Code:
.cate_title .cate1 {
  display: block;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





En suivant notre schéma de base, on se rend compte que si on ne veut pas que notre titre de catégorie personnalisé soit caché par le fond de catégorie personnalisé, on va devoir faire la même chose que pour les forums et lui mettre un "z-index". Donc on rajoute un "z-index: 2;" et une "position: relative;" pour que le "z-index" fonctionne :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





Voilà ce qu'on a pour le moment : aperçu.

C'est décalé T_T
Pas de panique, c'est normal ! Notre titre de catégorie normal a un padding de "10px". Comme notre titre de catégorie personnalisé est à l'intérieur, c'est normal que ce padding le décale. En plus, il y a une bordure à gauche, donc ça crée un décalage supplémentaire.

Pour régler ce décalage, on va se servir de "top" et le "left" pour le positionner correctement. Le "top" indique à quel distance du haut le bloc doit se placer et le "left" indique à quel distance de la droite le bloc doit se placer. Pour le haut, on veut annuler le padding de 10px, donc on va mettre "top: -10px;". Pour la gauche, on veut annuler le padding de 10px et aussi annuler le décalage de la bordure gauche de 3px. On va donc mettre un "left: -13px;".

Bref, à vous de calculer combien il y a de décalage en haut et à gauche à cause d'un "padding" ou d'un "border" et d'ajuster en conséquence avec "top" et "left". Si vous n'en n'avez pas, tant mieux, passez à l'étape suivante ^^

Pour moi, cela va donner ceci :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: -10px;
  left: -13px;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne ce screen.

Et voilà pour le titre de catégorie!




Maintenant, on passe au fond de catégorie personnalisé. Ce qu'on veut faire, c'est venir ajouter un fond qui va venir "cacher" le fond de catégorie de base. Pour cela, on va commencer par copier/coller le CSS du fond de catégorie de base, puis on change le nom pour ".cate_title .catefond1".

Pourquoi ".cate_title .catefond1"?
Tout à l'heure, nous avions ajoutés un span avec la class "catefond1" dans notre titre de catégorie. Du coup, nous mettons ".catefond1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le fond personnalisé de notre catéforie apparaisse partout et qu'il brise notre design, on met "cate_title" avant la class du fond de catégorie personnalisé. Comme ça, le fond apparait seulement lorsqu'il est dans une catégorie.

Donc pour le moment, cela ressemble à :
Code:
.cate_title .catefond1 {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Bon, on ne voit rien du tout ><. C'est normal, puisque c'est un "span" à l'intérieur duquel il n'y a aucun texte. Dans les éléments de type "inline" comme un "span", les margins, la hauteur et la largeur n'est pas prise en compte. Alors, on va aller ajouter un "display: block;" pour transformer notre "span" en "bloc" et le faire apparaître :
Code:
.cate_title .catefond1 {
  display: block;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





En suivant notre schéma de base, on se rend compte que notre fond de catégorie personnalisé doit être par dessus le fond de catégorie normal, en dessous des forums et en dessous du titre de catégorie personnalisé. Pour ça, on va devoir lui mettre un "z-index". Donc on rajoute un "z-index: 1;" :
Code:
.cate_title .catefond1 {
  display: block;
  z-index: 1;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Mais, mais, mais... Pourquoi ça ressemble à ce screen? C'est tout petit! Et c'est très très décalé T_T
Encore une fois, c'est normal Wink C'est tout petit parce qu'on ne lui a pas donné de "hauteur". Ça, on va s'en occuper en avant dernier.

Pour le décalage, il ne faut pas oublier qu'on est en position "relative"... Et qu'on est dans le titre, donc c'est normal que ça ne soit pas au bon endroit. Pour le positionner correctement, on va changer la position "relative" pour la position "absolute". Comme ça, le fond personnalisé va se placer dans le coin en haut à droite du fond normal. En plus, comme il y a un padding en haut de 20px et une bordure en haut de 5px, on va devoir ajouter un "top: -25px;". Comme il n'y a rien à régler du côté gauche, on se contente de mettre un "left: 0px;"

Cela va donner ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Mais c'est toujours trop petit, regarde T_T
Patience, j'avais dit qu'on devait lui donner une hauteur, non?

C'est à vous d'essayer des hauteurs jusqu'à ce que vous arrivez à la bonne. (ou vous pouvez le calculer avec un logiciel de graph ou un autre outil, à vous de choisir). Dans mon cas, il me faut une hauteur de 440px, ce qui donne ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  height: 440px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour le fond de catégorie!




Là, je viens de montrer comment faire pour personnaliser 1 titre de catégorie et 1 fond de catégorie. Pour les autres, c'est plus facile. Pour chaque catégorie que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Puis, vous recopiez le titre de catégorie personnalisé et le fond de catégorie personnalisé de la première catégorie en changeant le "1" de ".cate1" et de ".catefond1" par le chiffre que vous avez donné à votre autre catégorie et vous changez les couleurs ^^



3. Comment personnaliser chaque fond et titre de forum


Comment personnaliser le design d'un forum spécifique... Alors que la seule chose qu'on peut accéder dans un forum spécifique, c'est son titre et sa description de forum?

La réponse est :
En se servant justement du titre de forum ET de la description de forum ^^




Bon, un peu plus de détails ne feraient pas de mal, n'est-ce pas?

Jusqu'à présent, nous avons suivi ce schéma. Maintenant, nous allons suivre ce nouveau schéma.

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums normaux sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums personnalisés sont par dessus les forums normaux. (Profondeur 3)
- Le contenu de nos forums personnalisés (écriture) sont par dessus nos forums personnalisés (Profondeur 4)




Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser les forums et le titre de forum de chaque catégorie, on va passer par deux endroits. Pour le titre de forum personnalisé, on va passer par le titre de forum.

Donc nous allons aller dans le forum que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="forum1">Titre de forum</span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de forum d'un span avec la class "forum1" pour pouvoir personnaliser la mise en forme de ce titre de forum.




Maintenant, on vient personnaliser notre titre de forum en utilisant le nom "a.forumlink .forum1".

Pourquoi "a.forumlink .forum1"?
Juste tout à l'heure, nous avions entouré notre titre de forum d'un span avec la class "forum1". Du coup, nous mettons ".forum1" pour sélectionner cette class.

Quant au "a.forumlink" juste avant, c'est parce que les titres de forums n'existent pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de forum en haut de notre sujet. Comme on ne veut pas que le titre de forum soit personnalisé partout et qu'il brise notre design, on met "a.forumlink" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
a.forumlink .forum1 {
}





Si on regarde notre schéma, on voit que l'écriture doit avoir un "z-index" parce qu'on veut qu'il soit par dessus les forums personnalisés. Par conséquent, on va leur donner un "z-index: 4;" et un "position: relative;" pour que le "z-index" fonctionne :
Code:
a.forumlink .forum1 {
  position: relative;
  z-index: 4;
}



Minute papillon, pourquoi on a pas rajouté de "display: block;" comme pour le titre de catégorie?

Tout simplement parce que nous n'avions ni largeur, ni hauteur, ni marges. Le titre de catégorie en avait et devait recevoir un "display: block;" parce qu'un "span" n'accepte pas la largeur, la hauteur ou les marges. Si on en a pas, cela ne nous sert à rien de mettre un "display: block;"


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Je ne vous montre pas de screen parce que la couleur que j'ai choisi ressemble trop à l'ancienne, mais vous comprenez le principe, non?

Et voilà pour le titre de forum!




Maintenant, on passe au design de forum. Pour cela, on va commencer par ouvrir notre template Index_Box ainsi que la description du forum que nous voulons personnaliser.

Puis, on va reproduire entièrement la structure d'un forum dans notre description. Pour vous aidez, vous pouvez tout simplement recopier la partie entre "forumrow" de votre template et enlever les variables telles que le titre de forum, la description de forum, les statistiques, etc...

Pour moi, cela donne ceci :
Code:
<div class="forum_bloc">
                            
   <div class="forum_principal_bloc">
                                   
      <div class="forum_title_bloc">
                          
      </div>
                                 
      <div class="forum_img_bloc">
                          
      </div>
                                 
      <div class="forum_desc_bloc">
                           Bla bla bla
      </div>
                                 
      <div class="forum_lastmess_stats_bloc">
                                        
         <div class="forum_stats_bloc">
                               
         </div>
                                        
         <div class="forum_lastmess_bloc">
                               
         </div>
                                      
      </div>
                                 
      <div style="clear: both">
            
      </div>
                     
   </div>
                            
   <div class="forum_sousforums_bloc">
                     
   </div>
                        
</div>


Ok... Mais pourquoi on fait ça?
Bah, on voulait changer le design de la partie "forum", non? Alors on va le refaire au complet, mais avec quelques petites modifications.

... Quelles modifications?
Eh bien, pour commencer, on va ajouter la class "forum_bloc1" au bloc qui entourne notre forum (le "forum_bloc").

Sa class va donc devenir celle-ci :
Code:
<div class="forum_bloc forum_bloc1">


... Et ça sert à quoi?
À tout plein de choses! On va se servir de cette nouvelle class pour aller placer notre nouveau design de forum "par dessus" l'ancien, entre autre.

Pour débuter, on va aller mettre une position "absolute" à notre class ".forum_bloc1" Et comme on veut que ça soit en haut à droite de son "parent" ayant la position "relative" le plus proche (bref, le bloc qui englobe le forum), on lui donne un "top: 0px;" et un "left: 0px;". Cela va donner ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}





Ok, je comprends un peu... Mais regarde ceci! À part le titre du forum et la description de forum, le contenu a disparu!
Outch >< Et si on regardait notre schéma pour voir s'il sait la solution?

Comme le schéma l'indique dans sa "note", si on veut que l'écriture et le contenu du forum soit "par dessus" le design du forum personnalisé... On doit lui donner un "z-index: 4;".

Bah oui, mais je ne peux pas changer ça, les variables sont directment dans le template... non?
Oui, c'est dans le template, mais on va quand même aller le changer.

Donc on se rend dans notre template, et on entoure d'un span avec la class "forum_up" toutes les variables (sauf le titre de forum et la description de forum) qui sont dans la section forum (dans le "forumrow"). Cela devrait donner ceci :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
              <span class="forum_up">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
              </span>
            </div>
         
            <div class="forum_img_bloc">
              <span class="forum_up">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </span>
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                <span class="forum_up">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
                </span>
              </div>
           
              <div class="forum_lastmess_bloc">
                <span class="forum_up">
                  {catrow.forumrow.LAST_POST}
                </span>
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
            <span class="forum_up">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->





C'était long... Et maintenant?
Maintenant, on ajoute un "z-index" à cette nouvelle class.

On se rend donc dans notre CSS et on rajoute la class ".forum_up" avec le "z-index: 4;" et la "position: relative;" pour que le "z-index" fonctionne. Cela va donner ceci :
Code:
.forum_up {
  position: relative;
  z-index: 4;
}





Et cela nous donne cet aperçu.

Maintenant, on va enfin personnaliser les couleurs!

Pour cela, on regarde notre description et on copie toutes les class dans notre CSS, à l'exception du ".forum_bloc". Puis, devant chaque class, on ajoute ".forum_bloc1".


Pourquoi ".forum_bloc1"?

Parce qu'on veut que ce soit uniquement le design du forum qui a ".forum_bloc1" qui soit personnalisé. Au final, cela nous donne ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.forum_bloc1 .forum_principal_bloc {
}
.forum_bloc1 .forum_title_bloc {
}
.forum_bloc1 .forum_img_bloc {
}
.forum_bloc1 .forum_desc_bloc {
}
.forum_bloc1 .forum_lastmess_stats_bloc {
}
.forum_bloc1 .forum_stats_bloc {
}
.forum_bloc1 .forum_lastmess_bloc {
}
.forum_bloc1 .forum_sousforums_bloc {
}





Puis, vous changez les couleurs et tout ce que vous voulez. S'il y a des éléments que vous n'avez pas changé, vous pouvez tout simplement les enlever du CSS. Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour les design de forum!




Là, je viens de montrer comment faire pour personnaliser 1 titre de forum et 1 fond de forum. Pour les autres, c'est plus facile. Pour chaque forum que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="forum1">Titre de forum</span>


Quant aux fonds de forums, vous recopiez la description de forum du forum déjà personnalisé et vous changez le 1 du "forum_bloc1" pour le chiffre que vous avez choisi.

Enfin, dans le CSS, vous recopiez le CSS propre au forum déjà personnalisé et vous changez les 1 par le chiffre que vous avez choisi. À savoir que rien ne vous empêche de changer le chiffre nul part et de reprendre le même design pour tous les forums d'une même catégorie, comme je l'ai fait sur cette image.



4. Problèmes possibles


Si vous avez fonctionné pareil comme dans le tuto et que vous avez mis une "deuxième class" au bloc de fond de forum dans la description et que les changements ne s'effectuent pas même après la personnalisation :
Cause très probable :
Il ne faut jamais oublier que le CSS se lit de "haut en bas". Le navigateur le lit dans le même ordre. Donc si vous avez mis la personnalisation de vos forums plus haut dans le CSS que le design de base... Le design de base sera considéré comme "plus important" parce qu'il est "après", donc "plus bas". Il vous suffit de couper votre CSS de vos forums personnalisé et de le mettre "après", donc "plus bas" que le CSS des forums de base.

Par exemple, ici, le texte resterait noir parce que la class personnalisée est "plus haut", donc "avant". Il faudrait l'inverser :
Code:
.nom_personnalisé {
  color: red;
}
.nom {
  color: black;
}



Les membres voient des gros décalements quand ils ont des résolutions d'écran différentes :
Cause probable :
Avec des résolutions d'écran différentes, si les tailles sont en %, la taille des éléments est différente. Pour la largeur, cela devrait majoritairment rester pareil, mais c'est 99% sûr qu'il y aura des décalements par rapport à la hauteur.
Pour régler ce souci, il suffit de travailler avec des hauteurs et des largeurs fixes. Exemple, 800px de largeur par 150px de hauteur pour un forum, etc...


Et... Bah rien, j'ai plus d'idées de problème possible à moins d'avoir mal compris le tuto en fait ><


Alors c'est tout! Si jamais vous avez des problèmes avec ce Tutoriel, n'hésitez pas à passer dans "Problème avec mon code" pour recevoir de l'aide.

À plus !

Guide du template "index-box" (catégories) pour phpBB2 - Jeu 22 Aoû 2013 - 12:23



Bonjour,

Ce guide est sur la version de forum PhpBB2.

Je me permets de vous proposer un petit mode d’emploi du template index-box, tel que j’aurais bien aimé en trouver un sur internet lorsque j’ai commencé à travailler à la personnalisation de mon template.

Ce travail ne prétend pas être exhaustif et répondre à tout (car il y a encore des choses qui m’échappent). A ce titre, toutes les contributions pour l’améliorer seront grandement appréciées :). Il a pour objet de mieux aider à comprendre le fonctionnement du template, et donc à mieux comprendre les tutoriels de modification du template qui peuvent vous être proposés (pour éviter les copier coller bêtes et méchants).

Nous allons voir d’une part les différents éléments structurants de ce template, qui organisent les éléments sur la page. Et d’autre part, on s’intéressera aux différentes variables qu’il permet d’afficher.

Un p’tit merci suffit à faire apparaître la suite :).

Voici en premier lieu le template index-box de base de forumactif :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
 <th nowrap="nowrap" width="50">{L_TOPICS}</th>
 <th nowrap="nowrap" width="50">{L_POSTS}</th>
 <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
 </tr>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
 <h{catrow.cathead.LEVEL} class="hierarchy">
 <span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 </h{catrow.cathead.LEVEL}>
 </td>
 <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


1.  La structure du template

Contrairement à ce que l’on pourrait croire, les indications fournies entre crochets "<  !--TEXTE --  >" ne sont pas de simples commentaires, mais contiennent tous les éléments de structuration des pages de votre forum.


La toute première table du template, ci-dessous, correspond à la ligne au-dessus de votre première catégorie qui comporte le titre de votre forum et « voir les messages sans réponse » (quand vous n’êtes pas connecté) et aux trois lignes au-dessus de votre première catégorie (quand vous êtes connectés).

Ceci:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>

Fait donc apparaître cela:


D'ailleurs, ce tableau comporte deux "commentaires" de type "switch_user_logged_in".
"switch_user_logged_in" : Les éléments contenus entre sa balise BEGIN et sa balise END n’apparaissent qu’à la connexion du membre au forum. Ils sont donc invisibles aux simples invités.

A la suite de ce premier tableau, toute l’organisation de la page sera régie par les commentaires.

" catrow" :  Il s’agit du bloc contenant l’ensemble des catégories, forums et sous-forums. Il débute visuellement sur votre page sous le tableau ci-dessus et termine au-dessus de la ligne « marquer tous les forums comme lus ».

"tablehead": Il s’agit de l’en-tête du tableau dans le design de base. Si dans « structure et hiérarchie » vous avez choisi le mode « conserver les catégories sur l’index », cela correspond alors à la première ligne, qui contient « forum, sujets, messages, derniers messages », ci-dessous en gris.

Si vous avez choisi l’option « séparer les catégories sur l’index », alors cette ligne affichera directement le titre de la catégorie au lieu du mot « forum », comme ci-dessous.


Lorsque vous souhaiterez personnaliser votre template, notamment pour ajouter un en-tête à vos catégories, c’est entre ces balises qu’il faudra positionner votre div d’en-tête.


"cathead": Cette ligne n’apparaît dans le tableau de base que lorsque vous avez fait le choix de « conserver les catégories sur l’index ». Il s’agit alors de la ligne bleue de ma première illustration, qui n’affiche que le titre de catégorie.
Si vous avez choisi de « séparer les catégories sur l’index », alors les informations contenues entre ces balises ne seront pas affichées.

"forumrow": Tout ce qui est affiché entre ces balises constitue les listes de forums et sous-forums qui seront affichés sur votre page d’accueil, en fonction du nombre de niveaux que vous avez choisi d’afficher dans « structure et hiérarchie ».

La première colonne du tableau contient l’image indiquant s’il y a ou non un nouveau message :
Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>

La deuxième colonne contient le titre du forum, le descriptif du forum, les modérateurs du forum, et les liens vers les sous-forums (on reviendra sur le détail des variables dans la partie suivante).
Code:
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>


A l’intérieur de ce bloc, ce sont les balises "switch_moderators_links" qui vont permettre l’affichage des modérateurs du forum. Si vous ne voulez plus les afficher, c’est donc ce bloc qui est à supprimer :
Code:
<!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->



Enfin, les trois colonnes suivantes affichent respectivement le nombre de sujets postés dans le forum, le nombre de messages postés dans le forum, et le dernier message posté dans le forum :
Code:
<td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>

"catfoot": N’ayant pas trouvé précisément à quoi correspond ce bloc, j’en déduis qu’en symétrie du bloc "cathead", son utilisation se fait en mode « conserver les catégories sur l’index ». Information qui reste à vérifier.

"tablefoot": Il s’agit du pied du tableau pour chacune des catégories lorsqu’elles sont séparées. Pour personnaliser une catégorie en lui rajoutant un pied de page, c’est entre ces balises qu’il faudra placer la div.

Si vous souhaitez créer un corps de catégorie qui dispose de son propre fond, il faudra impérativement ouvrir votre div de corps dans  "tablehead" et la fermer dans "tablefoot" afin qu’elle se positionne bien derrière les forums.


Résumons-nous :

Les éléments entre crochets "< !--TEXTE -- >", qui ressemblent à des commentaires, sont structurants pour l’organisation de la page et ne doivent donc pas être enlevés !

Les éléments se positionnent comme suit sur votre page :
Premier cas : vous avez choisi un affichage en mode « conserver les catégories sur l’index » :
Spoiler:


Deuxième cas : vous avez choisi un affichage en mode « séparer les catégories sur l’index » :
Spoiler:



2. La liste des variables du template index-box

Maintenant que vous savez à peu près comment se positionnent les éléments sur la page, intéressons-nous aux variables qu’appelle le template index-box.

{LAST_VISIT_DATE}:  « Dernière visite le [date/heure]» affiché au-dessus du forum, visible seulement lorsque le membre est connecté.

{CURRENT_TIME}:« La date/heure actuelle est [date/heure]» affiché au-dessus du forum, visible seulement lorsque le membre est connecté.

{L_INDEX}: Titre du forum global (du site internet, donc).

{NAV_CAT_DESC}: La description du forum qui se situe en-dessous du titre du forum sous la bannière.

{L_SEARCH_NEW}: « Voir les nouveaux messages depuis votre dernière visite », visible seulement lorsque le membre est connecté.

{L_SEARCH_SELF}: « Voir ses messages », visible seulement lorsque le membre est connecté.

{L_SEARCH_UNANSWERED}:« Voir les messages sans réponse ».

{catrow.tablehead.L_FORUM}: Affiche le titre de la catégorie dans le bandeau "tablehead" lorsque les catégories sont séparées sur l’index (cf. première partie) ou bien affiche simplement « forum » lorsque les catégories sont conservées sur l’index.

{L_TOPICS}: Affiche le terme « sujets » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

{L_POSTS}: Affiche le terme « messages » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

{L_LASTPOST}: Affiche le terme « derniers messages » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

{catrow.cathead.CAT_TITLE}: Affiche le titre de catégorie lorsque les catégories sont conservées sur l’index, dans le bandeau "cathead" (cf. première partie).

{catrow.forumrow.FORUM_NAME}: Titre du forum au sein de la catégorie.

{catrow.forumrow.FORUM_DESC}: cette variable appelle le texte de description du forum, tel que rédigé dans la zone : « général », « catégories et forums ».

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}: Affiche les modérateurs de chaque forum, en indiquant préalablement « modérateurs: ».

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}: Affiche les liens vers les sous-forums.

{catrow.forumrow.TOPICS}: Affiche le nombre de sujets postés dans le forum donné.

{catrow.forumrow.POSTS}: Affiche le nombre de messages postés dans le forum donné.

{catrow.forumrow.LAST_POST}: Affiche le dernier message posté dans le forum donné.

Enfin, une autre variable est assez utile à connaître :
< img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" / >: Cette variable appelle l’image de « nouveau message » ou « pas de nouveau message » pour chaque forum.

Normalement, avec ces éléments, vous pourrez déjà commencer à vous orienter plus aisément dans votre template :).


Revenir en haut

La date/heure actuelle est Dim 19 Nov 2017 - 2:11