[CSS et Template] Simples catégories

Rappel du premier message :



Bouh!

J'avais fait un code de catégorie pour une commande, mais comme la personne n'a jamais répondu et que je n'aime pas travailler pour rien, je suis la suggestion de Neva et vient vous le proposer ici ~
Ce n'est pas très compliqué ou quoi que ce soit de spécial, mais c'est assez innofensif, je le jure ^^

Aperçu

Avant tout, il faut s'assurer d'avoir la bonne configuration dans:
Panneau d'Admin>Affichage>Structure et Hiérarchie :
• Séparer les catégories sur l'index (Deuxième ligne) : Moyen
• Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
• Lien vers les niveaux inférieurs : Oui
Pour les images, il vous faudrait un bouton no new/new/lock de dimensions 50x40 pour que cela soit parfait.
Cela donne le même résultat avec tous les navigateurs (sauf IE pour quelques détails, mais je le boude de toute façon è_é)

Je vais commencer par vous filer les codes, puis je vous donnerai quelques explications:

CSS :

Code:

   /*DÉBUT DES CATÉGORIES*/
/*Corps de Catégorie*/
.global_cate {
  background-color: #6993BE;
  border: solid 1px #1B2836;
  border-bottom: double 8px #1B2836;
  border-top: none;
}

/*Titre de la Catégorie*/
.title_cate span {
  display: block;
  margin-top: -10px;
  padding-left: 40px;
  background-color: #1B2836;
  font-size: 40px;
  font-family: monotype corsiva;
  color: #C2D7ED;
  border-bottom: double 8px #C2D7ED;
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.title_cate span:hover {
  padding-left: 120px;
  transition: 1s;
  -webkit-transition: 1s;
}

/*Corps de Forum*/
.global_forum {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-right: 20px;
  padding-left: 20px;
  font-family: Times New Roman;
  color: #1B2836;
}

/*Sous-forums*/
.gensous_forums {
  position: relative;
  left: 17px;
  top: -32px;
  overflow: auto;
  z-index: 1;
  padding: 5px;
  background-color: #9BB9D9;
  width: 95px;
  height: 110px;
  border: solid 1px #1B2836;
  border-bottom: solid 5px #1B2836;
  border-top: solid 5px #1B2836;
  box-shadow: 0px 0px 15px 3px #1B2836;
  text-align: center;
}

/*Bloc de la description du forum*/
.gendesc_forum {
  background-color: #9BB9D9;
  padding-right: 40px;
  height: 105px;
  border: solid 1px #1B2836;
  border-left: solid 5px #1B2836;
  border-right: solid 5px #1B2836;
}
/*Description du forum*/
.desc_forum {
  position: relative;
  top: 15px;
  right: -30px;
  height: 85px;
  overflow: auto;
  padding-left: 110px;
  padding-right: 10px;
  text-align: justify;
  font-family: Times New Roman;
  font-size: 13px;
}

/*Titre de forum*/
.forumlink {
  display: block;
  margin-top: -212px;
  margin-bottom: -17px;
  padding-left: 50px;
  text-align: center;
  font-family: Monotype Corsiva;
  font-size: 32px;
  color: #1B2836!important;
  letter-spacing: 2px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.forumlink:hover {
  letter-spacing: 10px;
  text-decoration: none!important;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

/*Image New-Old_Lock*/
.genicone_forum {
  position: relative;
  width: 50px;
  height: 40px;
  top: -178px;
  right: -13px;
  z-index: 1;
}

/*Bloc du Dernier Message*/
.stats_forum {
  padding: 5px;
  padding-top: 10px;
  border: solid 1px #1B2836;
  border-bottom: solid 5px #1B2836;
  border-top: solid 5px #1B2836;
  background-color: #9BB9D9;
  width: 126px;
  height: 80px;
  font-family: Times New Roman;
  font-size: 13px;
}
/*Nb de Topics et Messages*/
.stat_forum {
  font-family: Times New Roman;
  font-size: 11px;
}
   /*FIN DES CATÉGORIES*/

Ensuite, il faut remplacer tout ce qu'il y a dans le template Index_box entre "BEGIN catrow" jusqu'à "END catrow" par ceci :

Code:

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
   <table class="global_cate" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr><td class="title_cate">
        {catrow.tablehead.L_FORUM}
        </td></tr>
   <!-- END tablehead -->
   <!-- BEGIN forumrow -->
   <tr>
        <td>
        <table align="center" class="global_forum" cellspacing="15" width="100%">
   <tr>
   <td align="left" valign="middle" style="padding-top: 24px;" width="95%">
     <div class="gensous_forums" align="center">
          <span class="sub_forums">
     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
            <script type="text/javascript">jQuery('.sub_forums').html(jQuery('.sub_forums').html().replace(/, /g,'<br />')).removeAttr('class');</script>
          </div>
          <div align="right"><div class="genicone_forum" align="center">
            <img class="icone_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div></div>
          <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
          <div class="gendesc_forum">
       <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div>
          </div>
   </td>
   <td align="center" valign="middle" width="5%">
     <div class="stats_forum">
            <span class="stat_forum">Topics: {catrow.forumrow.TOPICS} | Messages: {catrow.forumrow.POSTS}</span><br /><br />
     {catrow.forumrow.LAST_POST}
     </div>
   </td>
   </tr>
   </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 -->

Enfin, (dans PA>Général>Forum>Catégories et Forums) il faut encadrer le titre de vos catégories, forums, sous-forums, etc d'un span comme ceci:

Code:

<span>Titre de ma catégorie</span>

Comme mentionné plus tôt, il serait idéal que vos images New/Old/Lock soient de 50x40.
Et voilà, si tout est fait, tout devrait être installé ^^


Maintenant, allons voir quelques particuliarités:
Vous trouverez dans le template Index_box le script suivant:

Code:

<script type="text/javascript">jQuery('.sub_forums').html(jQuery('.sub_forums').html().replace(/, /g,'<br />')).removeAttr('class');</script>

C'est ce qui permet de faire des sauts de ligne à la place des virgules pour les liens des sous-forums. Si jamais vous voulez changer cela, c'est la partie "replace(/, /g,'
')" qu'il faudra modifier. Ce qui est entre ' ' est ce par quoi vous remplacez la virgule.

Ensuite, l'image New/Old/Lock. Dans le CSS, elle correspond à la class ".genicone_forum" et est bien identifiée. Si jamais vous changez les dimensions de l'image (50x60 par exemple), il est important que vous vous rendiez dans le CSS pour changer également la taille de l'image. Si jamais l'image est décalée parce que vous avez changé sa taille, vous pouvez la replacez comme vous le souhaitez en modifiant le "top" (plus le chiffre est négatif, plus l'image monte) et le "right" (plus le chiffre est négatif, plus l'image se déplace vers la droite).

Pour finir, si jamais vous changez la police ou la taille du titre du forum (la class forumlink), il va probablement se décaler. Ce n'est pas un problème, vous pouvez ajuster la hauteur au-dessus du lien et en dessous du lien avec "margin-top" (plus le chiffre est négatif, plus l'espace en haut se réduit) et "margin-bottom" (plus le chiffre est négatif, plus l'espace en bas se réduit).

Pour le reste, toutes les parties sont identifiées dans le CSS alors vous devriez pouvoir vous y retrouver ^^

Voilà, j'espère que vous aimerez ~

Merci beaucoup !

Simple mais très joli et très clair ! merci ^^

Merci beaucoup

Merci ! :3

Merci beaucoup pour ce partage ! ♥

Merci !

Merci du partage :)

merci

merci :)

Merci ♥

merci ! simple et classe !

Merci du partage *_*

Merci pour ce tuto. Je recherche à séparer mes catégories sur mon fofo (par un espace vide), je suis sous Xooit et je ne sais pas vraiment comment m'y prendre. As-tu une astuce ?

merci <3

merci beaucoup

Merci Beaucoup !

Allan Oresh:
Je ne suis pas familière avex Xoït, mais cela ne devrait pas être trop compliqué. Tu as essayé de mettre un margin en bas de tes blocs de catégories? Par exemple, dans mon tuto, le bloc des catégories est:

Code:

/*Corps de Catégorie*/
.global_cate {
  background-color: #6993BE;
  border: solid 1px #1B2836;
  border-bottom: double 8px #1B2836;
  border-top: none;
}

Tu y rajoutes un "margin-bottom: 10px" et cela devrait faire un espace de 10px après chaque catégorie. Et si tu demandes juste comme ça sans utiliser mon tuto, c'est la même chose. À toi de trouver le bloc de tes catégories et d'ajouter un margin-bottom dedans ^^
(je mets 10px, mais c'est à toi de choisir combien tu veux).

Merci Onyx pour ta réponse. En fait j'ai trouvé ceci : ►LIEN Alors je le passe pour ceux qui ont aussi cette demande avec un forum sous Xooit.
La présentation de tes catégories est magnifique, utiliser ton tuto était bien l'intention avec un thème plus métallique sur mon petit fofo de débutant ><

merci :)

merci <3

Merci beaucoup! =D

thanks

Merci beaucoup !

Merci