Catégories #3

Nature du code

Catégories.
Les sous-forums apparaissent au survol.
Le cadre rouge que l'on voit sur les photos est remplacé par l'image new/no new/lock de catégorie qui apparaissent en fond (à la place de la couleur rouge) si le fond est plus grand que le cadre de taille 120 * 140.

Aperçu

Cliquez pour voir l'image en taille réelle.

Code

Panneau d'administration >> Affichage >> Templates >> Général >> index_box

HTML:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>

  <table class="forumline catego" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="5" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

   
<td class="{catrow.cathead.CLASS_CAT}" colspan="5" 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>


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

   
<td class="row1 desclinks" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
   
   <div class="ssforumdesc">
   <div class="fodesc">
   <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>
   </div>
   
   
   <div class="ssforums">
   <span class="ssfosurvol gensmall">Survolez pour voir les sous-forums <br /></span>
   <span class="gensmall ssforumlink">
   {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
   
   {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
   
   </span>
   </div>
   </div>
   
</td>
   
   
<td class="row3 sujmes" align="center" valign="middle" height="50">
   <span class="gensmall suj">{catrow.forumrow.TOPICS}</span>
   <span class="gensmall mes">{catrow.forumrow.POSTS}</span>
</td>
   
<td class="row2 lpa" align="center" valign="middle" height="50">
   <span class="lastpost-avatar">
   
   {catrow.forumrow.avatar.LAST_POST_AVATAR}
   
   </span>
</td>
   
<td class="row3 over lastpost" align="center" valign="middle" height="50">
   <div class="lastpost">
   <div class="gensmall lp">
   {catrow.forumrow.LAST_POST}
   </div>
   <div class="ssforumnol">
   <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="ssforumnol" />
   </div>
   </div>
</td>
   
</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table>
<div class="bascate">
</div>
<img src="{SPACER}" alt="" height="5" width="1" />

Panneau d'administration >> Affichage >> Images et couleurs >> Couleurs >> Feuille de style CSS

CSS:

Code:: /* LES COULEURS DU DESIGN */
/*
Couleur 1 : #ffffff
Couleur 2 : #831822
Couleur 3 : #A8A291
Couleur 4 : #bcb399
*/

/* DEBUT DES CATEGORIES PAR JOY http://dream.forumsactifs.net/ */
table.catego {
  background: none;
  border: none;

  border-collapse: collapse;

  overflow: hidden;
}

.catego .row1,.catego .row2,.catego .row3,.catego .row3Right {
  padding: 0;
}

/* NOM DE LA CATEGORIE */
.secondarytitle {
  background: none;

  padding: 5px;
}

.secondarytitle h2 {
  background: none !important;
  color: #000;
  font-family: 'Oswald', cursive;
  font-size: 3em;
}

/* DESCRIPTION DU FORUM ET LIENS VERS SOUS-FORUMS */
/* CELLULE DU NOM DU FORUM, DE SA DESCRIPTION ET DES LIENS VERS LES SOUS FORUMS */
td.desclinks {
}

/* DIV CONTENANT DESC ET LIENS SOUS-FORUMS */
div.ssforumdesc {
  overflow: hidden;

  position: relative;
}

/* DIV CONTENANT LE NOM-LIEN ET LA DESCRIPTION DU FORUM */
div.fodesc {
  overflow: auto;

  padding: 0px 5px 25px 5px;

  height: 95px;

  text-align: justify;
}

/* NOM-LIEN DU FORUM */
a.forumlink, a.forumlink:hover {
  color: #A8A291 !important; /* Couleur 3 */
  font-family: 'Oswald', cursive;
  font-size: 20px;
}

/* DIV DES LIENS VERS LES SOUS FORUMS */
div.ssforums {
  background: #831822; /* Couleur 2 */

  transition: all ease 1s;

  height: 140px;
  width: 100%;

  position: absolute;
  bottom: -120px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* AU SURVOL POUF ÇA GLISSE */
div.ssforums:hover {
  bottom: 0;
}

/* LA QUESTION "SOUS-FORUM ?" */
span.ssfosurvol {
  color: #fff !important; /* Couleur 1 */
  font-size: 14px;
  font-variant: small-caps;

  display: block;

  height: 20px;
  width: 100%;

  padding: 2px;

  position: absolute;
  top: 0px;
}

/* LIENS DES SOUS-FORUMS */
span.ssforumlink a, span.ssforumlink a:hover {
  color: #fff !important; /* Couleur 1 */
}

/* CASE SUJETS ET MESSAGES */
td.sujmes {
}

span.suj, span.mes {
  color: #fff; /* Couleur 1 */
  font-size: 30px;
  font-family: 'Oswald', cursive;

  height: 50%;
  width: 50px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

span.suj {
  background: #A8A291; /* Couleur 3 */
}

span.mes {
  background: #BCB399; /* Couleur 4 */
}

/* CASE DE L'AVATAR DU DERNIER POSTEUR */
td.lpa {
  width: 50px;
}

span.lastpost-avatar {
  padding: 0px;
  float: none;

  display: flex;
  flex-direction: row;
  justify-content: center;

  overflow: hidden;

  width: 50px;
  height: 120px;
}

span.lastpost-avatar img {
  border-radius: 0px;

  width: auto;
  height: 100%;
}

/* CADRE DU DERNIER POST ET DE L'IMAGE NEW/OLD/LOCKED */
/* CELLULE DU DERNIER POST */
td.lastpost {
  overflow: hidden;
}

/* DIV CONTENANT LE DERNIER POST + L'IMAGE NOL */
div.lastpost {
  height: 120px;
  width: 140px;
  padding: 0px;

  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  transition: all ease 1s;
}

/* DIV CONTENANT L'IMAGE NOL */
div.ssforumnol {
  background: #831822; /* Couleur 2 */

  transition: all ease 1s;

  height: 120px;
  width: 140px;

  position: absolute;
  top: 0px;
  right: 0px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* DIV CONTENANT L'IMAGE NOL QUAND ELLE BOUGE */
div.lastpost:hover div.ssforumnol {
  right: -150px;
}


/* FIN DES CATEGORIES PAR JOY */

Catégories #3 13042811165513517811129738

» Catégories #1
» Catégories #2

Catégories #3

Catégories #3

Sujets similaires

Sujets similaires