Forum d'entraide de graphisme & de codage
 
AccueilAccueil  CalendrierCalendrier  Guide du Swirlien  FAQFAQ  RechercherRechercher  MembresMembres  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Catégorie - Keylha #1

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Keylha
Equipe Bleue
avatar

Image par défaut
Rang Messages : 2394
Date d'inscription : 12/04/2014
Age : 17
Localisation : Montagnes

MessageSujet: Catégorie - Keylha #1   Dim 17 Juil - 16:37

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 !

• • • • • • • • • •


Merci Yuu  
Revenir en haut Aller en bas
Carméliane
Equipe Orange
avatar

Image par défaut
Rang Messages : 2917
Date d'inscription : 20/04/2014
Age : 18
Localisation : Sur le trône de l'olympe.

MessageSujet: Re: Catégorie - Keylha #1   Dim 17 Juil - 22:02

Blop ! 50 points pour toi jeune truite 8D

• • • • • • • • • •

Revenir en haut Aller en bas
http://www.sweet-swirl.org
Shakumiro
Membre
avatar

Image par défaut
Rang Messages : 305
Date d'inscription : 25/02/2015
Age : 20
Localisation : Dans mon monde

MessageSujet: Re: Catégorie - Keylha #1   Dim 17 Juil - 23:19

Merci pour cette catégorie très bien présenté et très bien codé. C'est ce genre de travail qu'il faudrait remercier plus souvent.

• • • • • • • • • •



Merci à toi Lucy pour le kit <3
Revenir en haut Aller en bas
Orphère
Animateur
avatar

Image par défaut
Rang Messages : 2092
Date d'inscription : 26/07/2014
Age : 21
Localisation : Sur Chimera.*^*

MessageSujet: Re: Catégorie - Keylha #1   Dim 17 Juil - 23:21

C'est joliiiiiiiiii ♥

• • • • • • • • • •


Merci ma Abso chérie ♥
Si t'es un petit peu curieux c::
 

EX administratrice, n'hésitez pas à poser vos questions  

Absente jusqu'à la fin du mois
Revenir en haut Aller en bas
Blaze Feltson

avatar

Image par défaut
Rang Messages : 2
Date d'inscription : 23/01/2017

MessageSujet: Re: Catégorie - Keylha #1   Lun 23 Jan - 22:47

Magnifique code !
Etant novice en codage, je m'épate moi-même de comprendre chaque étape !
Chapeau ! Mais je rencontre un petit problème, lors de la dernière étape (pour mettre l'image de gauche, dans les forums.) l'image de se retrouve bien plus haute que le bloque transparent qui indique le nombre de post à l'intérieur du forum.

Auriez-vous un petit truc à me donner pour régler de problème ?
Et encore merci !
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Catégorie - Keylha #1   

Revenir en haut Aller en bas
 
Catégorie - Keylha #1
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Top 3 level design - catégorie plateforme
» Longueur du nom de catégorie
» Catégorie par onglet
» Couleur derrière les catégorie (phpbb2)
» probléme haut de catégorie

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sweet Swirl :: Archives :: BIG ARCHIVES :: Eléments de forums-
Sauter vers: