Catégorie - Keylha #1

Heyy

J'ai codé des petites catégories toutes simples j'espère qu'elles vous plairont  

Aperçu en taille réelle

J'ai pas mis de crédit ou de copyright dessus parce que je trouve que ça gâcherais le code donc merci de bien me créditer moi et Sweet Swirl c'est la moindre des choses. ^^ Si je vois mes catégories sur un forum sans crédit à mon nom je vous mange è_é (puis un joli petit mot ça m'encouragera toujours à en coder d'autres c'est vous qui voyez  )

Un petit merci pour voir le code !

Assurez vous que vous avez rendu vos sous forum visible ! Rendez vous dans le panneau d'administration, Affichage > Structure et hiérarchie cochez Moyen dans "Séparer les catégories sur l'index"

Toujours sur la même page pour "Lien vers les niveaux supérieur" cochez "oui".
Normalement vous avez quelques chose comme ça :


Mon forum est en 900px; si le votre est plus petit ou plus grand il faudra donc adapter la taille des catégories en fonction.

Template & CSS

Toujours dans Affichage, allez dans les templates > Général modifier ensuite la template "index_box"
Effacez votre code et remplacez le par celui-là :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->

 <!-- END switch_user_logged_in -->
 <a class="gensmall ft10" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall ft10" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
                  <a class="gensmall ft10" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <!-- END switch_user_logged_in -->
 
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cattitle">{catrow.tablehead.L_FORUM}</div><div class="cat">
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <!-- BEGIN inc -->
 <div class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></div>
 <!-- END inc -->
 <div 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}>
 </div>
 <div class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</div>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
<center>  
    <br /> <br />  <a class="forumlien" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  <div class="forum"><table><tr>

 <td>
   <div class="imgdescrih">{catrow.forumrow.TOPICS} sujets
     <br />{catrow.forumrow.POSTS} posts</div>
   <div class="alignf">
     <div class="descri">{catrow.forumrow.FORUM_DESC}</div>
     <div class="sousf">Sous Forum
       <br /><div class="sousff">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div> </div>

  </td>
    <td>
    <br /><div class="lastp">
    <div class="imgnew"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    
    <div class="lastmess">{catrow.forumrow.LAST_POST}</div>
    <div class="barrelp"></div></div></td>

    </tr></table></div><br />
</center>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

N'oubliez pas de valider la template après l'avoir modifié.

Passons ensuite au css o/
Toujours dans Affichage, Image & couleurs > Couleurs > Feuille de style CSS
Ajoutez ce code :

Code:

/************************************************************************************ CATEGORIE PAR KEYLHA DE SWEET SWIRL ****************************************************************************/

/*********** Petites info si vous voulez modifier/comprendre le code

Pour les changements de couleurs;
Si vous voulez changer le bleu et le remplacer par une couleur, dans "rechercher dans le CSS" rentrez ceci : 01a2a6 et remplacez tous les 01a2a6 par votre code couleur*
Si vous voulez changer le gris et le remplacer par une couleur, dans "rechercher dans le CSS" rentrez ceci : 939191 et remplacez tous les 939191 par votre code couleur

Ensuite; les trucs qui se retrouvent assez souvent dans le code;
text-transform: uppercase; > met le titre en majuscule
width: largeur/height: hauteur
hover > c'est ce qui modifie l'apparence d'un élément lorsque la souris est dessus
tout ce qui est suivi de a concerne les liens
**********/


/**** Apparence du titre de catégorie ***/
.cattitle h2{
  color: #01a2a6;
  /**** Met le titre en majuscule ***/
  text-transform: uppercase;
  font-family: Calibri;
  font-weight: 200;
  height: 10px;
  text-align: center;
  font-size: 60px;}

 .cat{
  padding: 0px 0px 40px 0px;
  /* Changez ce champ si vous voulez modifier l'image de fond de catégorie; si vous voulez mettre une couleur remplacer par background: #votre couleur */
  background: url(http://image.noelshack.com/fichiers/2016/28/1468711751-keylhacategorie.png);}

/** largeur d'un forum (là les catégories sont adaptées pour un forum qui fait 900px de largeur donc si votre forum est plus petit/plus grand vous allez certainement devoir modifier tous les width en
conséquence**/
.forum{
  width: 840px;}

/** Ici on ordonne que tous les liens des forums ne soient pas surlignés **/
.cat a{
  text-decoration: none;}

.cat a:hover{
  text-decoration: none!important;}

/* Titre du forum */
.forumlien{
  font-size: 25px;
  font-weight: lighter;
  font-family: Calibri;
  line-height: 0px;
  margin-top: 10px;
  display: inline-block;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-duration:500ms;
/* Couleur du titre */
  color: #999999 !important;
  text-transform: uppercase;}

.forumlien:hover{
/* Couleur du titre lorsque la souris est dessus */
  color: #01a2a6!important;}

.imgdescri{
/* Cadre autour de l'image de droite */
  border: 1px solid #01a2a6;
  padding: 10px;
  width: 122px;
  margin-top: -128px;
  margin-left: -170px;
  height: 118px;
  position: absolute;}

/* au cas ou l'image est trop grande; code sert à la couper*/
.timg{
  width: 122px;
  height: 118px;
  overflow: hidden;}

/* bloc qui affiche le nombre de sujets & posts*/
.imgdescrih{
  width: 122px;
  position: absolute;
  z-index: 2;
  margin-top: 11px;
  text-align: center;
  opacity: 0;
  margin-left: 5px;
  height: 83px;
  padding-top: 35px;
  font-family: Calibri;
  font-weight: lighter;
  letter-spacing: -1px;
  font-size: 21px;
  /*Couleur du texte "XX topics/ XX posts" */
  color: #2a2a2a;
  text-transform: uppercase;
  background-color: rgba(238, 239, 240, 0.6);
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-duration:500ms;}

.imgdescrih:hover{
  opacity: 1;}

.alignf{
  /* Couleur du fond de description */
  background: #eeeff0;
  padding: 10px 0px 10px 0px;
  width: 480px;
  margin-left: 150px;
  height: 120px;}

.descri{
  font-size: 12px;
  font-family: Calibri;
  padding: 5px;
  margin: auto;
  /* Couleur du texte dans la description */
  color: #939191;
  width: 452px;
  /* Cadre autour de la description */
  border: 1px solid #939191;
  overflow: auto;
  height: 90px;}

/* Sous forum */
.sousf{
  height: 18px;
  text-align: center;
  overflow: hidden;
  position: relative;
  /* couleur du texte "sous forum" */
  color: #eeeff0;
  line-height: 18px;
  text-transform: lowercase;
  width: 463px;
  font-size: 12px;
  letter-spacing: 14px;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-duration:500ms;
  margin: 10px 0px 0px 9px;
  /* fond sous forum*/
  background: #01a2a6;}

.sousf:hover{
height: 70px;}

/* Sous forum : contenu du hover*/
.sousff{
  width: 448px;
  text-align: justify;
  margin: auto;
  height: 40px;
  overflow: auto;
  padding: 5px;
  background: #eeeff0;}

/* Agit sur liens du sous forum uniquement */
.sousff a{
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-duration:500ms;
  color: #939191!important;
  letter-spacing: 2px;}

.sousff a:hover{
  color: #2a2a2a!important;}

/* Bloc de droite */
.lastp{
  margin: -18px 0px 0px 15px;
  width: 170px;
  float: right;
  height: 141px;
  /* Fond du dernier message */
  background: #eeeff0;}

/* Image news/no news/lock; changez height si vous voulez que votre image soit plus grande*/
.imgnew{
  height: 45px;
  overflow: hidden;
  margin: 12px 0px 0px 10px;
  width: 150px;}

/* Stylise le texte du dernier message (topic, date, auteur)*/
.lastmess{
  font-family: Calibri;
  padding-top: 8px;
  line-height: 16px;
  width: 170px;
  font-size: 12px;
  color: #939191;
  text-align: center;
  height: 56px;}

.lastmess a{
  letter-spacing: -1px;
  color: #01a2a6;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-duration:500ms;
  font-size: 13px;
  text-transform: uppercase;}

.lastmess a:hover{
  color: #939191;}

/* Ordonne au pseudo d'avoir un écart d'1px entre chaque lettres */
.lastmess a strong{
  letter-spacing: 1px;}

/* Barre du bloc de droite */
.barrelp{
  width: 170px;
  height: 18px;
  background: #939191;}


/************************************************************************************************** FIN DES CATEGORIES **************************************************************************************/

Remplir le code

Petite explication rapide   L'image de gauche, c'est l'image de description, vous allez donc devoir modifier les descriptions de vos forums et rentrez un code spécial pour que l'image puisse bien s'afficher.

Allez donc dans Général > Catégories & Forums
Puis modifier vos forums 1 par 1 (oui c'est long 8D)

Et rentrez ce code

Code:

Votre description ici
<div class="imgdescri">
  
 <div class="timg">
  <img src="http://image.noelshack.com/fichiers/2016/28/1468714010-catkeylha1.png" />
 </div>
</div>

Vous pouvez modifier vos images séparément comme présenter sur le schéma. Mettez bien la description avant le code de l'image

Aide à la personnalisation & mot de fin

J'ai à peu près tout expliquer dans le CSS en commentaire; néanmoins retenez que l'image de description (celle de gauche donc) fait 122x118. Vous pouvez mettre plus c'est pas dérangeant mais si vous voulez régler vos images aux poils, bah voilà.  

De même pour les images news, no news, lock c'est du 150x45.
Voilàà ! Normalement tout est bon si vous avez des questions n'hésitez pas à les poster en commentaire ou à me mp si je ne réponds pas; j'essayerais de vous aider du mieux possible. :3

J'insiste vraiment pour les crédits ;__; C'est long à coder, et je met ce LS dans le but d'aider les forums qui débutent parce que souvent on sait pas toujours très bien coder donc c'est toujours mieux d'avoir un petit code pour faire joli. :3
Si je vois que ce LS a été volé; ou non crédité je le retirerais surement parce que n'allez pas croire que ça passerait tout seul, je vois souvent des forums se faire copier des bouts de codes, et j'ai pas envie que ça arrive avec mon code. -puis ça fait toujours plaisir un petit crédit  -

Voilà voilà ! Si vous avez aimez ce LS et que vous en voulez d'autres dites moi !