Catégories style science-fiction bleues

- La taille de la création est d'environ 900 pixels
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
- La taille de l'avatar du dernier poste_r est fixée à 63 pixels de largeur.
- Vous êtes autorisés à ne pas activer l'affichage des sous-forums.
- Des indications ont été ajoutées dans le code pour ne pas vous perdre à certains endroits.

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. Une fois cela fait, enregistrez et validez votre template.

Code:

<link href='https://fonts.googleapis.com/css?family=Montserrat|Raleway' 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 --><table class="fondcat" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
     <th colspan="4" nowrap="nowrap" class="titrecat">{catrow.tablehead.L_FORUM}<div class="barrecat"></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 colspan="4">
 <h1 class="titrecat">{catrow.cathead.CAT_TITLE}</h1>
 </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <td>
 <img class="imgcat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td>
 <h2 class="titrefrm">
 <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </h2>
 <div class="descricat">{catrow.forumrow.FORUM_DESC}</div>
 <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
 </td>
                <td>
                        <div class="derniermessage">
                          <span class="topics">{catrow.forumrow.TOPICS}</span>
                          <span class="messages">{catrow.forumrow.POSTS}</span><br />
                         {catrow.forumrow.LAST_POST}
                        </div>
                </td>
 <td>
            
               <div class="avatardernierposter">
                          <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
                   </div>
 </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 -->

Ensuite, nous allons avoir besoin d'ajouter les descriptions des forums. Pour cela, nous allons faire Généralités > Forum > Catégories et forums. Dans chaque description, il va falloir copier ce code.

Code:

<img alt="Image au dessus de la description" src="http://zupimages.net/up/16/15/ml8e.png" />
<div class="texte">
 Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.
</div>

Notre code n'est cependant pas complet et nous allons 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:

/*Début Catégories par Cheshire Cat*/
.fondcat{
  width:875px;
  margin:auto;
  margin-top:10px;
  margin-bottom:5px;
  padding-top:7px;
  padding-bottom:13px;
  background-color:#142342;
  border-left:5px solid #0393da;
  border-right:5px solid #0393da;
}
.imgcat{
  position:relative;
  top:1px;
  width:100px;
  height:100px;
  margin-left:5px;
  border:1px solid #0393da;
}
.titrecat h2{
  position:relative;
  z-index:2;
  color:#142342;
  font-size:25px;
  font-family: Impact;
  font-weight:normal;
  letter-spacing:2px;
  font-style:italic;
  text-shadow:0px 0px 5px #0393da;
  text-transform:uppercase;
  text-align:center;
}
.barrecat{
  z-index;1;
  position:relative;
  bottom:25px;
  width:850px;
  height:10px;
  margin:-15px auto -15px auto;
  background-color:#0393da;
  border-radius: 100% 100%;
  box-shadow:0px 0px 2px #0393da;
}
.titrefrm{
  position:relative;
  top:5px;
  font-size:18px;
  font-family: Impact;
  text-align:center;
  text-transform:uppercase;
  font-style:italic;
  font-weight:normal;
}
.titrefrm a{
  color:#0393da; /*Couleur du texte du forum*/
  text-decoration:none;
  letter-spacing:0px;
  -webkit-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}
.titrefrm a:hover{
  color:#FFFFFF; /*Couleur du texte du forum au survol*/
  letter-spacing:5px;
  text-decoration:none !important;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
.descricat{
  position:relative;
  bottom:5px;
  left:5px;
  width:500px;
  height:80px;
  border:1px solid #0393da;
}
.descricat img{
  width:500px;
  height:80px;
}
.descricat .texte{
  position:absolute;
  top:0px;
  width:480px;
  height:59px;
  margin:5px;
  padding:5px;
  background-color:#FFFFFF;
  border:1px solid #0393da;
  overflow:auto;
  text-align:justify;
  font-family: 'Raleway', sans-serif;
  font-size:12px;
  color:#304f8c;
  opacity:0;
  -webkit-transition:all 0.4s ease-out;
  transition:all 0.4s ease-out;
}
.descricat .texte:hover{
  opacity:1;
  -webkit-transition:all 0.4s ease-in;
  transition:all 0.4s ease-in;
}
.sousforum{
  position:relative;
  bottom:5px;
  left:5px;
  width:502px;
  min-height:18px;
  padding-top:2px;
  background-color:#0393da;
  border-bottom-left-radius:50% 75%;
  border-bottom-right-radius:50% 75%;
  text-align:center;
  font-size:0px;
}
.sousforum a{
  padding-right:10px;
  font-size:11px;
  color:#FFFFFF; /*Couleur des liens des sous-forum*/
  font-family: 'Montserrat', sans-serif;
  -webkit-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}
.sousforum a:hover{
  color:#304f8c; /*Couleur des liens du sous-forum au survol*/
  text-decoration:none !important;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
.derniermessage{
  width:140px;
  height:80px;
  margin-top:1px;
  margin-left:5px;
  padding:10px;
  background-color:#FFFFFF;
  border:1px solid #0393da;
  text-align:center;
  font-family:'Raleway', sans-serif;
  font-size:11px;
  color:#304f8c;
  line-height:20px;
}
.topics{
  padding-right:30px;
  font-size:30px;
  font-family: Impact;
  color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
  text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
}
.messages{
  padding-left:5px;
  font-size:25px;
  font-family: Impact;
  color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
  text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
}
.derniermessage a{
  text-decoration:none;
  -webkit-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}
.derniermessage a:hover{
  color:#727bc4; /*COuleur du liens du sujet au survol*/
  text-decoration:none !important;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
.avatardernierposter{
  width:63px;
  height:100px;
  margin-top:1px;
  margin-left:4px;
  margin-right:5px;
  border:1px solid #0393da;
  background-color:#FFFFFF;
  overflow:hidden;
  visibility:visible;
}
.avatardernierposter img{ /*Redimenssion de l'avatar du dernier posteur*/
  margin-top:-5px;
  width:63px;
}
/*Fin Catégories par Cheshire Cat*/

Vous n'avez pas besoin de poster à la suite de ce message pour voir les codes, mais un petit "Merci" fait toujours plaisir !

Salut!

Alors prem : C'est pour quel version de forum? Et quelle structure et hiérarchie? Je dirais phpbb2 avec hiérarchie séparée sur l'index moyen, mais je ne suis pas sûre u_u Il faut ajouter cette information à ton premier post.

Dans ton template, pourquoi ton forumrow commence avant le cathead? Il est pas supposé, il doit commencer après.

Sinon, sans nécessairement ajouter un crédit, il faudrait que tu mentionnes que les utilisateurs doivent ajouter un crédit vers NU à quelque part sur leur forum.

Sinon, la transition du titre sur firefox ne fonctionne pas parce que par défaut, la valeur de base de firefox est "normal". Donc cela passe de "normal" à "5px", soit 2 statuts différents à la place de "0px" à "5px" qui suit une échelle de valeur et sur laquelle une transition peut être utilisée. Va savoir pourquoi firefox est le seul navigateur assez stupide pour ne pas comprendre que normal veut automatiquement dire 0px... Même Internet Explorer le voit...
Bref, il faudrait que tu rajoutes un letter-spacing: 0px; au titre sans hover.

Sinon, je crois que c'est tout pour moi, ça fonctionne bien et c'est joli ^^

Coucou !
Les modifications ont été faites, mais par contre le forumrow se termine après le cathead donc j'ai laissé comme ça ^^

Salut!

Petite description :
> Catrow (Begin) : Contient 1 catégorie et se répète X fois selon le nombre de catégories sur le site.
> > Tablehead (Begin et End) : Haut du tableau (si on est en mode "collé sur l'index", c'est le titre du site et si on est en mode "séparé sur l'index",c'est le nom de la catégorie).
> > > Cathead (Begin et End) : Haut de la catégorie avec hiérarchie "collé sur l'index". Ne sert à rien en mode "séparé sur l'index".
> > > Forumrow (Begin et End) : Contient 1 forum et se répète X fois selon le nombre de forums dans 1 catégorie.
> > > Catfoot (Begin et End) : Bas de la catégorie avec hiérarchie "collé sur l'index".  Ne sert à rien en mode "séparé sur l'index".
> > Tablefoot (Begin et End) : Bas du tableau (en mode "séparé sur l'index", c'est le bas de catégorie).
> Catrow (End) : Fin.

Donc j'insiste. Le cathead se commence et se termine avant le forumrow. Cela ne cause pas trop de problèmes puisque tu utilises la hiérarchie séparée, mais c'est quand même une erreur de structure.

Bon d'accord, c'est juste que j'ai mal compris je pense x)
Bon c'est modifié du coup ^^

Salut!

Cela semble bon alors je valide! Le sujet sera bientôt déplacé dans le Libre Service

Merci !

Merci pour le partage !