Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titrecategorie"> {catrow.tablehead.L_FORUM} </div>
<table class="forumline fondcategorie" width="100%" border="0" cellspacing="1" cellpadding="0">   
  <!-- 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 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}>
    </td>
    <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
 
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
          <td class="over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
            <h{catrow.forumrow.LEVEL} class="hierarchy">
                <div class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </div>
              </h{catrow.forumrow.LEVEL}>
          <div class="boxforum">
            <div class="decoforum"></div>
            <div class="description">
              <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                <span class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
              </span>
            </div>
            <div class="forumdroite">
            <div class="boutonforum">
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
              <span class="gensmall">Sujets: {catrow.forumrow.TOPICS} • </span><span class="gensmall">Messages: {catrow.forumrow.POSTS}</span><br />
            <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </div>
          </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 -->

Code:

/*CATEGORIES gris et rose par Alu' pour Never-Utopia*************************************************************************/

.titrecategorie h2, .titrerose, .forumlink, .forumdroite .gensmall a
{color:#eba9aa !important;} /*tous les titres en rose*/

.titrecategorie h2, .titrerose, .forumlink
{font-family:'Voltaire', Georgia;} /*police des titres*/

.fondcategorie{background-color:#a0a9b4;/*couleur de fond*/border-radius:15px;padding:25px 25px 0 25px;}/*fond des catégories*/

.boxforum{
  background:#dce2e5; /*couleur de fond d'une ligne de forum*/
  border-radius:15px;
  height:90px;
  padding:15px;
  margin-bottom:25px;
  position:relative;
}

.titrecategorie h2{
  text-align:center;
  font:90px;
  font-variant:small-caps;
  text-shadow: 6px 0px 0 #7a8088;/*couleur de l'ombre du texte*/
  margin:0;
}
.titrerose{
  font:20px;
  text-decoration:underline;
  font-variant:small-caps;
}

.description{
  padding:3px 10px 10px;
  width:300px;
  height:70px;
  border-radius: 15px;
  border: 1px dotted #7a8088;/*couleur de la bordure en pointilles*/
  float:left;
  position:relative;
  overflow:auto;
}
.sousforum{
  position:absolute;left:0; top:63px;
  display:block;
  height:1em;
  width:100%;
  text-align:center;
  font:Georgia;
  font-variant:small-caps;
}
.description span{color:#7a8088;font-size:12px;} /*texte de la description d un forum*/

.forumlink{
  font:65px;
  font-variant:small-caps;
  margin:0 auto;
  text-align:center;
  text-shadow: 5px 0px 0 #7a8088;/*couleur de l'ombre du texte*/
  position:relative;
  z-index:1;
}
.forumdroite{
  position:relative;
  overflow:hidden;
  width:170px;
  height:60px;
  padding:10px;
  margin: auto 0 auto auto;
}
.forumdroite .gensmall{color:#949494; font-size: 11px;}/*texte sous l'image no news*/
.forumdroite .gensmall a{font-variant:small-caps;font-size:12px; text-shadow: 1px 0px 0 #7a8088;/*couleur de l'ombre du texte*/}

.boutonforum{
  position:absolute;top:0;left:0;
  -webkit-transition:all 0.4s;
  -moz-transition:all 0.4s;
  -o-transition:all 0.4s;
  -ms-transition:all 0.4s;
  transition:all 0.4s;
}

.forumdroite:hover > .boutonforum{top:-100%;}



.fondcategorie tr:nth-of-type(2) .boxforum .decoforum,
.fondcategorie tr:nth-of-type(4) .boxforum .decoforum,
.fondcategorie tr:nth-of-type(6) .boxforum .decoforum,
.fondcategorie tr:nth-of-type(8) .boxforum .decoforum,
.fondcategorie tr:nth-of-type(10) .boxforum .decoforum,
.fondcategorie tr:nth-of-type(12) .boxforum .decoforum {
  background-image:url(http://image.noelshack.com/fichiers/2014/48/1416839340-1416062066-ville1-copie.png)!important;
  background-position:bottom right;
}
.decoforum{
  position:absolute;
  top:-39px;
  left:0;
  height:40px;
  width:100%;
  background-image:url(http://image.noelshack.com/fichiers/2014/46/1416062066-ville2.png);
  background-repeat:no-repeat;
  background-position:bottom left;
  z-index:0;
}

.lastpost-avatar img {
  height:42px;
  width:auto;
  border:3px solid #a0a9b4;/*couleur de la bordure autour du mini avatar*/
  margin-right:4px;
}
/*fin des categories *********************************************************************************/


Catégories Simplettes

Qeel à onglets fantasy

Code:

<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="categorie" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
          <td width="100%" class="titre_categorie">{catrow.tablehead.L_FORUM}</td>
      </tr>   
<!-- END tablehead -->

   <!-- BEGIN forumrow -->
   <tr class="section">
      <!-- BEGIN inc -->
      <!-- END inc -->
   <td class="centre_infos" align="center" valign="middle" height="50">
          <div class="statistiques_section">{catrow.forumrow.TOPICS} topics, {catrow.forumrow.POSTS} messages</div>
     <div class="dernier_message">{catrow.forumrow.LAST_POST}</div>
        </td>   
                    <td class="icones_message" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="description_section" align="center" valign="middle" width="100%" height="50">
         <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}>
                  <div class="description">{catrow.forumrow.FORUM_DESC}
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
                  <div class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                  <div class="ouverture">Voir les sous-forums</div></div></td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
      <!-- BEGIN inc -->
      <!-- END inc -->
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
<tr><td align="center"><span style="font-size: 10px;">Sauney (<a href="http://www.never-utopia.com/">Never Utopia</a>)</span></td></tr></table><!-- END tablefoot --><!-- END catrow -->

Code:

/* CATEGORIES*/
.categorie{
border-top: 10px solid #fff;
width: 910px;
margin: 20px auto;
background-color: transparent;
}
.titre_categorie, .titre_categorie h2{
margin-top: -40px;
margin-bottom: -30px;
font-family: 'Georgia';
font-size: 25px;
text-align: center;
color: #398235;
}
.section{
margin: 0px auto;
width: 910px;
height: 130px;
}
.centre_infos{
position: relative;
float: left;
width: 150px;
margin: 25px auto auto 10px;
text-align: center;
color: #fff;
}
.statistiques_section{
background: linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-radius: 10px 0px 10px 0px;
padding: 5px;
color: #fff;
font-size: 9px;
}
.dernier_message{
margin-top: 5px;
background: linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-radius: 0px 10px 0px 10px;
font-size: 11px;
color: #fff;
padding: 10px 5px 10px 5px;
}
.icones_message{
position: relative;
float: left;
margin: 20px 10px auto 10px;
width: 100px;
height: 100px;
}
.description_section{
position: relative;
float: left;
margin-top: 0px;
width: 580px;
height: 130px;
}
.forumlink, a.forumlink, a.forumlink:link, a.forumlink:visited, a.forumlink:active {
font-family: 'Georgia';
font-size: 28px;
text-decoration: none;
color : #fff;
text-shadow: 0px 0px 2px #121212;
}
a.forumlink:hover{
text-decoration: none !important;
color : #398235;
text-shadow: 1px 1px 1px #000;
transition: 350ms color linear, 350ms text-shadow linear;
}
.description{
z-index: 9;
position: relative;
margin-top: -2px;
width: 600px;
height: 80px;
border-width: 2px 4px 2px 4px;
border-color: #fff;
border-style: solid;
border-radius: 0px 10px 0px 10px;
background: linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
font-size: 11px;
color: #fff;
text-align: justify;
padding: 5px;
}
/* Code la div des sous-forums */
.sous_forums{
z-index: 11;
position: absolute;
top: 65px;
left: 0px;
right: 0px;
height: 15px;
padding: 5px;
background-color: rgba(33,76,31, 0.8);
opacity: 0;
filter: alpha(opacity=0);
border-radius: 0px 0px 0px 10px;
text-align: justify;
color: #fff;
font-size: 11.5px;
overflow-y: auto;
}
.sous_forums:hover{
transition: 250ms opacity linear;
opacity: 1;
filter: alpha(opacity=100);
}
.ouverture{
z-index: 10;
position: absolute;
top: 68px;
left: 220px;
width: 150px;
background-color: #fff;
padding: 5px;
border-radius: 10px 10px 0px 0px;
color: #121212;
font-size: 11px;
text-align: center;
}
/* FIN CATEGORIES */

Widgets FA dans un volet coulissant

Présentation

Afficher les Widgets

Vous pouvez modifier certains widgets indépendamment en cliquant sur , ce n'est pas possible pour tous cependant. Vous pouvez par contre modifier les permissions, c'est à dire le statut permettant de voir le widget (invité, membre, modérateur, etc...).
Vous avez également la possibilité de créer vos widgets personnalisés !

Modification du template

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
 
  <div id="open">

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                                                                          <div class="button_widgets">
                                                                            <a href="#open" class="open"></a>
                                                                            <a href="#close" class="close"></a>
                                                                            </div>
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>
</body>
</html>
<!-- END html_validation -->

Code:

<a name="top"></a>
   {JAVASCRIPT}

Code:

<div id="open">

Code:

</body>
</html>
<!-- END html_validation -->

Code:

</div>

Code:

<div id="{ID_LEFT}">
         <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
               <!-- BEGIN saut -->
               <div style="height:{SPACE_ROW}px"></div>
               <!-- END saut -->
         <!-- END giefmod_index1 -->
</div>

Code:

<div class="button_widgets">
 <a href="#open" class="open"></a>
 <a href="#close" class="close"></a>
 </div>

Le CSS

Code:

/* WIDGETS */

#left /* changer par right pour le widget de droite */
{
  position: fixed;
  top: 0;
  left: 0; /* changer par right pour le widget de droite */
  width: 235px !important;
  height: 100%;
  overflow: auto;
  border-right: 20px solid #ae3e2c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
  margin-left: -235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets
{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 0; /* changer par right pour le widget de droite */
  margin-top: -30px;
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  width: 60px;
  height: 150px;
  background: white; /* mettre ici image du bouton - taille ci-dessus 60par150 */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets a
{
  display: block;
  width: 100%;
  height: 100%;
}
.button_widgets .close
{
  display: none;
/* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
}
#open:target #left /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .close
{
  display: block;
}
#open:target .open
{
  display: none;
}

Modifications

Si vous utilisez ce LS, modifié ou non, merci de mettre un Crédit à Never-Utopia en guise de remerciement

1. Il suffit d'aller dans votre espace d'administration, Modules → HTML & Javascript → Gestion des codes Javascript.
   
2. Assurez-vous que "Activer la gestion des codes Javascript" est bien actif, puis cliquez sur "Créer un nouveau javascript".
   
3. Dans la nouvelle fenêtre, copiez-collez simplement ce code, tel quel :
   
   

   Code:

   var emailrestrict=function(e,t){"use strict";var n=function(e,t){var n=e.split("@");for(var r in t){if(n[1]===t[r]){alert('Les adresses de type "'+t[r]+'" ne sont pas autorisées.');return true}}return false};var r=function(t){var r=e("#form_register"),i=r.find("#email");r.on("submit",function(e){if(n(i.val(),t)){e.preventDefault()}})};return{init:r}}(jQuery);

$(document).ready(function() {
    emailrestrict.init([
        // La liste
        'gmail.com',
        'mail.com',
        'voila.fr',
        'yahoo.com'
    ]);
});

   
   

Spoiler:

Spoiler:

Spoiler:

Catégories beiges et vertes

Catégories sombres

Catégories Pink & Gray

Code:

<link href='http://fonts.googleapis.com/css?family=Playball' 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="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>   
<th nowrap="nowrap" width="150"><div style="width:150px;"> </div></th><!-- 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 class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center"><br/>
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-top:7px;" />
                  <div class="cat_gauche"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span><br/>
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </div></td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                  <span class="nom_cat">
               <a class="nom_cat" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
                  <span class="cat_desc">{catrow.forumrow.FORUM_DESC}</span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
                  <span class="cat_droite_conteneur"><div class="cat_droite_contenu" id="sousForums"><span class="gensmall2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div></span>
                    <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
  </script>
      </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 -->

Code:

.secondarytitle {
  text-align:left !important;
  font-family: 'Playball', cursive;
}
.cat_gauche {
font-size:12px;
background-color:WhiteSmoke;
padding:5px;
margin-top:9px;
width:140px;
}

.nom_cat {
font-size:20px;
font-weight:bold;
font-family: 'Playball', cursive;
transition:1s;
transition-delay: -0.1s;
}

.nom_cat:hover {
font-size:20px;
font-weight:bold;
font-family: 'Playball', cursive;
letter-spacing:5px;
transition:1s;
}

.cat_desc {
height:105px;
overflow:auto;
display:block;
text-align:justify;
font-size:12px;
background-color:WhiteSmoke;
padding:10px;
}

.cat_droite_conteneur {
margin-top:25px;
height:105px;
overflow:auto;
display:block;
text-align:justify;
background-color:WhiteSmoke;
padding:10px;
}

.cat_droite_contenu {
background-color:pink;
padding:3px;
width:124px;
margin:auto; 
font-family: 'Playball', cursive;
font-size:18px;
}

.gensmall2 a {
  font-size:18px !important;
}

La suite de l'ensemble se trouve ici :

Catégories basiques bleues

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <br/>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
</table>     
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> 
<div class="couleur_fond"><div class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}">

            <span class="forumlink_1">
              <a class="forumlink_1" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
       
  </div></div>
  <!-- END cathead -->
    <!-- BEGIN forumrow -->
    <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink_2">
              <a class="forumlink_2" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>
        </h{catrow.forumrow.LEVEL}>
        <div class="cat1"><span class="cat_des1">{catrow.forumrow.FORUM_DESC}</span></div>
        <span class="gensmall">
          {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </span>
      </td>
        <td style="min-width: 150px;" class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 
      </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 -->

Code:

.cat_des1 {
  padding-right:5px;
  padding-left:5px;
  padding-bottom:5px;
  padding-top:15px;
  text-align:justify;
  display:block;
  font-size:12px;
  color:gray; 
}
.couleur_fond {
  background-color:lightblue; /*Ici tu mets la couleur du fond de ton forum*/
}
.cat1 {
height:70px;
overflow:auto;
background:white;
border-right:1px solid black;
border-bottom:1px solid black;
box-shadow: 1px 1px 1px gray;
margin:10px;
}
a.forumlink_1, a.forumlink_1:link, a.forumlink_1:visited {
    display:block;
  border-right: 5px solid #B3CDF5;
    border-left: 5px solid #B3CDF5;
    -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-family: 'Reenie Beanie', cursive;
  background-color:white;
    color: #B3CDF5;
  font-size: 30px;
  letter-spacing: -1px;
  transition:1s;
  -moz-transition:1s;
  -webkit-transition:1s;
  -ms-transition:1s;
  -o-transition:1s;
  padding-right:5px;
  padding-bottom:5px;
  padding-top:5px;
  padding-left:25px;
  text-align:left;
}
a.forumlink_1:hover, a.forumlink_1:link:hover, a.forumlink_1:visited:hover {
  letter-spacing:10px;
  transition:1s;
  -moz-transition:1s;
  -webkit-transition:1s;
  -ms-transition:1s;
  -o-transition:1s;
  padding:5px;
}
a.forumlink_2, a.forumlink_2:link, a.forumlink_2:visited {
  color:dimgray;
  font-size:20px;
  margin-left:20px;
  margin-bottom:-20px;
  display:block;
}

Spoiler:

Code:

<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 --><div class="cadre_categorie">
<div class="categorie_titre_bloc"><span class="categorie_titre">{catrow.tablehead.L_FORUM}</span></div>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
<div class="forum"><div class="titre_forum" colspan="{catrow.forumrow.INC_SPAN}">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
                          <span id="stats_forum" class="gensmall">{catrow.forumrow.TOPICS} S | {catrow.forumrow.POSTS} M</span>
         </h{catrow.forumrow.LEVEL}>
          </div>
<div class="description_forum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         </span>
      </div>
  <div class="icones_messages">
   <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
  <div class="dernier_message"><br /><br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </div>
<div class="sous_forums">
  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
  </div></div>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
<center><a class="credits" href="http://www.never-utopia.com/">Sauney de Never Utopia</a></center></div><!-- END tablefoot --><!-- END catrow -->

Code:

/* DEBUT DES CATEGORIES */
.cadre_categorie{
margin: 10px auto 10px auto;
width: 90%;
border-radius: 20px;
border: 1px solid #000;
box-shadow: 0px 0px 2px grey;
}
.categorie_titre_bloc{
width: 100%;
height: 40px;
border-bottom: 5px dotted #000; 
}
.categorie_titre, .categorie_titre h2{
text-align: center;
font-family: 'Georgia';
font-size: 40px;
color: #000;
}
.forum{
width: 100%;
margin: auto;
}
.titre_forum{
background-color: #000;
width: 99%;
height: 30px;
padding: 5px;
}
.forumlink, a.forumlink, a.forumlink:visited, a.forumlink:active{
display: inline-block;
text-align: left;
font-weight: bold;
font-size: 25px;
font-family: 'Georgia';
color : #05a191;
text-shadow: 1px 1px 1px #047064;
}
a.forumlink:hover{
text-decoration: none;
text-transform: uppercase;
color : #07d3bd;
margin-left: 300px;
transition: 500ms linear 1ms;
}
#stats_forum{
float: right;
display: inline-block;
padding-top: 10px;
text-align: right;
font-size: 10px;
font-family: 'Georgia';
color : #05a191;
}
.description_forum{
position: relative;
float: left;
margin: 5px 10px 5px 10px;
width: 65%;
height: 80px;
border: 1px solid #000;
padding: 10px;
}
.icones_messages{
position: relative;
float: left;
display: inline-block;
margin: 5px 10px -110px 0px;
width: 10%;
height: 100px;
}
.dernier_message{
position: relative;
float: right;
display: inline-block;
margin: 5px 10px 5px 0px;
width: 17%;
height: 100px;
border: 1px solid #000;
text-align: center;
font-size: 12px;
}
.dernier_message span{
font-size: 12px;
}
.sous_forums{
background-color: #000;
width: 99%;
height: 20px;
overflow-y: auto; 
padding: 5px;
margin-bottom: 10px;
}
.credits, a.credits, a.credits:visited, a.credits:active{
display: inline-block;
margin: auto;
text-align: center;
font-size: 8px;
font-family: 'Georgia';
color : #05a191;
text-shadow: 1px 1px 1px #047064;
}
a.credits:hover{
text-decoration: none;
text-transform: uppercase;
color : #07d3bd;
}
/* PARTIE QUI VA DANS LA DESCRIPTION D'UN FORUM */
.texte_description{
position: relative;
float: left;
width: 440px;
height: 80px;
overflow-y: auto;
-webkit-hyphens: auto;
o-hyphens: auto;
hyphens: auto;
color: #05a191;
}
.img_description{
position: relative;
float: right;
width: 70px;
height: 80px;
}

Code:

<span class="texte_description">Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset. </span> <img class="img_description" src="http://img11.hostingpics.net/pics/64174470x80.png" />

Catégories

Les effets et images

Le code

Code:

<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>
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="contour_cate">
  <tr>
    <td>
      <div class="secondarytitle">
        {catrow.tablehead.L_FORUM}
      </div>
    </td>
  </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 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}>
    </td>
    <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
    <td>
      <div class="nom_forum">
        <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}>
      </div>
      <div class="contour_forum">
        <div class="position_image">
          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </div>
        <div class="position_description">
          <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
          <div class="liste_ss_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        </div>
        <div class="position_dernier_mess">
          <span class="nb_sujet_message">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span><br/>
          <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </div>
      </div>
    </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Code:

<img src="http://i39.servimg.com/u/f39/09/03/38/36/cats10.png" />
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac mollis metus. Praesent non diam lacus. Aliquam erat volutpat. Praesent accumsan lorem sit amet aliquam consequat. Ut consequat, magna sit amet feugiat placerat, augue neque commodo diam, id mollis eros mauris pharetra leo. Duis consectetur mauris sapien, vitae luctus dui blandit nec. Duis vulputate accumsan semper. Fusce pulvinar elementum faucibus. Vestibulum sit amet accumsan ligula. Donec sit amet blandit erat, at tincidunt leo. Cras bibendum placerat commodo. Aenean sit amet risus vulputate nulla posuere euismod. Morbi et erat dictum, sollicitudin elit eget, consequat nisl. <br /><br />Quisque non lorem vel odio accumsan tempus ut vitae felis. Nulla ut tellus nec erat lacinia tincidunt vel a dui. Duis cursus aliquam nisi. In leo orci, faucibus vitae sapien non, faucibus varius dui. Sed cursus mauris et augue hendrerit molestie. Vivamus ut accumsan tellus. Nullam nec nisi eget diam congue tempus sit amet malesuada risus. Donec sodales, ipsum non porttitor consequat, massa tortor pellentesque metus, nec lobortis sem nulla vitae tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus tempor sem leo. Donec adipiscing leo vitae lorem pulvinar iaculis. Integer facilisis est in erat suscipit, eget ullamcorper sem molestie. Nullam neque tortor, semper ac diam quis, elementum hendrerit dui. Sed porta sapien ac ipsum egestas auctor.
</p>

Code:

/********** DÉBUT CATÉGORIES **********/
/* Entoure chaque catégorie */
.contour_cate {
  /* Sa largeur */
  width: 800px;
  margin: auto;
  /* Couleur de fond */
  background-color: #CFBCD0;
  /* Espace entre chaque catégorie */
  margin-bottom: 10px;
}

/* Mise en place du titre de catégorie */
.secondarytitle {
  width: 100%;
  text-align: center;
  /* Création du trait sous le titre */
  border-bottom: 3px solid #F0ECE0;
  box-shadow: 1px 0 #CFBCD0, -1px 0 #CFBCD0, 0 1px 2px grey;
}

/* Mise en forme du titre de catégorie */
.secondarytitle h2 {
  /* Couleur */
  color: #F0ECE0;
  text-shadow: 1px 1px 2px grey;
  /* Police et taille */
  font-family: 'Nothing You Could Do';
  font-size: 50pt;
}

/* Div invisible qui entour chque forum */
.contour_forum {
  width: auto;
  /* Sa hauteur */
  height: 90px;
  padding: 5px;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}

/* Mise en place du titre de forum */
.nom_forum {
  width: 70%;
  margin: auto;
  margin-top: 10px;
}

/* Mise en forme de titre de forum */
a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
  /* Retire le gras et le emt en italique */
  font-weight: normal;
  font-style: italic;
  /* Couleur et taille */
  color: #EDECE8;
  font-size: 15pt;
  /* Préparation pour l'effet au hover */
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Titre de forum au passage de la souris */
a.forumlink:hover {
  /* Couleur */
  color: #8A807F;
  /* On fait qu'il ne se sousligne pas */
  text-decoration: none !important;
  /* Effet */
  letter-spacing: 3px;
  transition: all ease 1s;
}
 
/* Positionnement de l'image nouveau/pas de nouveau message/verrouillé */
.position_image {
  display: inline-block;
  vertical-align: top;
}

/* Positionnement de la description & liens vers les sous-forums */
.position_description {
  /* Obligatoire pour mettre l'image en dehors du cadre */
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* Taille du bloc */
  width: 350px;
  height: 85px;
  padding-top: 5px;
  /* La marge correspond à 20px + la largeur de l'image de description */
  margin-left: 155px;
  /* Couleur du texte puis  */
  color: #8A807F;
  background-color: #DAD6CA;
}

/* Positionnement de l'image de description par rapport à cette dernière */
.position_description img {
  position: absolute;
  /* La valeur du top est à modifier selon la hauteur de l'image. Si la hauteur de l'image = la hauteur de la description, mettre top: 0px; Le left correspond à la taille de l'image + 10px de marge */
  top: 10px;
  left: -140px;
  /* Effet de transparence sur l'image. Ici elle st à 70% */
  opacity: 0.7;
  transition: all ease 1s;
}

/* Image de description au hover */
.position_description img:hover {
  /* Effet: l'image passe à une opacité de 1 */
  opacity: 1;
  transition: all ease 1s;
}

/* Mise en forme du texte de description */
.position_description p {
  /* Taille */
  width: 320px;
  height: 45px;
  padding: 5px;
  margin: auto;
  /* Couleur et alignement du texte */
  color: #8a807f;
  text-align: justify;
  overflow: auto;
}

/* Mise en forme de la liste des sousforums */
.liste_ss_forum {
  /* Taille */
  width: 330px;
  height: 20px;
  margin: auto;
  margin-top: -10px;
  overflow: auto;
  text-align: justify;
}

/* Mise en forme des liens de la liste */
.liste_ss_forum a {
  /* On retire le souslignement */
  text-decoration: none !important;
  /* Police taille puis couleur */
  font-family: 'Nothing You Could Do';
  font-size: 11pt;
  color: #BAA1C1;
  /* Préparation de l'effet */
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Liens de la liste au passage de la souris */
.liste_ss_forum a:hover {
  /* Pas de souslignement */
  text-decoration: none !important;
  /* Couleur */
  color: #8A807F;
  /* Effet */
  letter-spacing: 1px;
  transition: all ease 1s;
}

/* Positionnement et mise en forme du dernier message */
.position_dernier_mess {
  display: inline-block;
  vertical-align: top;
  /* Taille */
  width: 140px;
  height: 80px;
  padding: 5px;
  margin-left: 15px;
  /* Couleur du texte */
  color: #8A807F;
  text-align: center;
  /* Couleur de fond */
  background-color: #DAD6CA;
}

/* Mise en forme de X sujets - X messages */
.nb_sujet_message {
  display: inline-block;
  /* Police et taille */
  font-family: 'Nothing You Could Do';
  font-size: 10pt;
  margin-bottom: 10px;
}

/* Mise en forme du lien vers le dernier sujet */
.position_dernier_mess .gensmall a,.position_dernier_mess .gensmall a:link, .position_dernier_mess .gensmall a:active, .position_dernier_mess .gensmall a:visited {
  /* Retirer le souslignement, couleur puis préparation de l'effet */
  text-decoration: none !important;
  color: #BAA1C1;
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Mise en forme du lien vers le dernier sujet au passage de la souris */
.position_dernier_mess .gensmall a:hover {
  /* Retirer le souslignement, couleur puis effet */
  text-decoration: none !important;
  color: #8A807F;
  letter-spacing: 1px;
  transition: all ease 1s;
}
/********** FIN CATÉGORIES **********/

Pour mettre l'image de description à 90px et bien la placer

Code:


/* Positionnement de l'image de description par rapport à cette dernière */
.position_description img {
  position: absolute;
  /* La valeur du top est à modifier selon la hauteur de l'image. Si la hauteur de l'image = la hauteur de la description, mettre top: 0px; Le left correspond à la taille de l'image + 10px de marge */
  top: 10px;
  left: -140px;
  /* Effet de transparence sur l'image. Ici elle st à 70% */
  opacity: 0.7;
  transition: all ease 1s;
}

Code:


/* Positionnement de l'image de description par rapport à cette dernière */
.position_description img {
  position: absolute;
  top: 0px;
  left: -140px;
  /* Effet de transparence sur l'image. Ici elle st à 70% */
  opacity: 0.7;
  transition: all ease 1s;
}

Catégories

Dimension des images

Le Code

Code:

<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>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<div id="conteneur_onglets_cate">
  <div class="onglet_cate">Nom onglet 1</div>
  <div class="onglet_cate">Nom onglet 2</div>
  <div class="onglet_cate">Nom onglet 3</div>
  <div class="onglet_cate">Nom onglet 4</div>
  <div class="onglet_cate">Nom onglet 5</div>
</div>
<div id="conteneur_cate"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
          <td>
      <div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
          </td>
   </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 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}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
          <td>
      <!-- BEGIN inc -->
      <!-- END inc -->
            <div class="titre_forum">
              <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}>
            </div>
            <div class="conteneur_forum">
              <div class="description_forum">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              </div>
              <div class="conteneur_stats">
                <img class="folder_img" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                <div class="stats">
                  {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                </div>
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </div>
              <div class="conteneur_liens_ss_forums">
                <marquee onmouseover="this.stop();" onmouseout="this.start();">
         <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                </marquee>
              </div>
            </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 -->
  </div><!-- END catrow --></div>


Code:

<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<div id="conteneur_onglets_cate">
  <div class="onglet_cate">Nom onglet 1</div>
  <div class="onglet_cate">Nom onglet 2</div>
  <div class="onglet_cate">Nom onglet 3</div>
  <div class="onglet_cate">Nom onglet 4</div>
  <div class="onglet_cate">Nom onglet 5</div>
</div>

Code:

<img src="http://i39.servimg.com/u/f39/09/03/38/36/untitl10.png" />
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis turpis augue, vel eleifend massa rutrum eget. Nam interdum convallis lacus, a convallis est egestas in. Aenean accumsan vel neque id auctor. Morbi lobortis arcu ante, eu rhoncus orci ullamcorper at. Duis mollis felis magna, at condimentum urna posuere id. Aliquam lacus neque, ornare eu aliquet in, ultricies non felis. Quisque ultricies lacus a lacus ornare hendrerit. Vestibulum laoreet sollicitudin odio vitae lobortis. Maecenas nisl justo, dignissim non rutrum non, commodo non nunc. Sed volutpat ac massa nec volutpat. Vestibulum porta elementum sapien non ultrices. Duis elementum nisi vel velit pharetra luctus. Sed vel neque tristique, congue diam quis, pretium nisl. Vivamus convallis sed nunc at tincidunt. Donec sed quam at nisi sodales faucibus sed sed metus. Suspendisse id mauris nunc. Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.
</p>

Code:

/********* DÉBUT CATÉGORIES ***********/
/* Mise en place du conteneur d'onglets */
#conteneur_onglets_cate {
  /* Taille (largeur et hauteur) */
  width: 90%;
  height: 25px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  overflow: visible;
  /* Couleur de fond */
  background-color: rgba(178, 178, 178, 0.8);
  display: none;
  text-align: center;
}

/* Mise en forme des noms d'onglets */
#conteneur_onglets_cate div {
  display: inline-block;
  verctical-align: bottom;
  position: relative;
  bottom: 25px;
  margin: 10px;
  /* Couleur */
  color: #3C4A55;
  font-size: 16pt;
  /* Police d'écriture */
  font-family: 'Dancing Script';
  transition: all ease 1s;
}

/* Effet au passage de la souris sur les noms d'onglets */
#conteneur_onglets_cate div:hover {
  color: #43586B;
  transition: all ease 1s;
}
 
/* CSS pour les onglets */
.onglet_cate {
  cursor: pointer;
}

/* CSS pour retirer le contour de catégories */
.categorie .forumline {
  border: 0px solid;
}

/* Mise en pace du titre de catégorie */
.secondarytitle {
  width: 100%;
  text-align: center;
}

/* Mise en forme du titre de catégorie */
.secondarytitle h2 {
  color: #3C4A55;
  font-size: 20pt;
  font-family: 'Dancing Script';
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Effet au passage de la souris sur le titre de catégorie */
.secondarytitle h2:hover {
  letter-spacing: 3px;
  transition: all ease 1s;
}

/* Mise en forme du titre de sous-forum 8position) */
.titre_forum {
  width: 90%;
  margin: auto;
  margin-bottom: -10px;
  text-align: left;
}

/* Mise ne forme du lien de sous-forum */
a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
  /* Couleur, taille et police */
  color: #141A28;
  font-size: 16pt;
  font-family: 'Dancing Script';
  /* Mise ne place de l'effet */
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Effet au passage de la souris sur les liens de sous-forum */
a.forumlink:hover {
  color: #45576B;
  text-decoration: none !important;
  letter-spacing: 2px;
  transition: all ease 1s;
}

/* Contour des sous-forums */
.conteneur_forum {
  width: 730px;
  margin: auto;
  padding: 10px;
  border-radius: 20px;
  /* Couleur de fond */
  background-color: rgba(178, 178, 178, 0.8);
}

/* Countour de la description de sous-froums */
.description_forum {
  display: inline-block;
  vertical-align: top;
  /* Taille */
  width: 440px;
  height: 80px;
  padding: 10px;
  margin: 5px;
  margin-left: 60px;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
  overflow: hidden;
}

/* Position de l'image dans la description */
.description_forum img {
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}

/* Mise en forme du texte dans la description */
.description_forum p {
  width: 320px;
  height: 70px;
  margin: 0px;
  overflow: auto;
  /* Couleur du texte */
  color: #43586B;
  text-align: justify;
}

/* Conteneur des statistiques et dernier message */
.conteneur_stats {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  /* Taille */
  width: 140px;
  height: 90px;
  padding-bottom: 10px;
  margin: 5px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}

/* Arrondi sur l'image de nouveau/pas de nouveaux/verrouillé */
.conteneur_stats .folder_img {
  border-radius: 10px;
}

/* Mise en forme de X messages dans X sujets */
.conteneur_stats .stats {
  text-align: center;
  /* Couleur */
  color: #43586B;
  font-size: 8pt;
  font-family: 'Dancing Script';
}

/* Mise en forme du lien du dernier sujet */
.conteneur_stats .gensmall a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Effet au hover */
.conteneur_stats .gensmall a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Conteneur des liens déflants du sous-forum */
.conteneur_liens_ss_forums {
  /* Taille */
  width: 610px;
  height: 15px;
  padding-top: 5px;
  margin: auto;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}

/* Mise en forme des liens vers les sous-forums */
.conteneur_liens_ss_forums a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Effet au Hover */
.conteneur_liens_ss_forums a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}
/********* FIN CATÉGORIES ***********/

Code:

$('document').ready(function()
      {
      if($('.categorie').size() > 1)
        {
          $('#conteneur_onglets_cate').css( 'display' , 'block' );
          $('#conteneur_onglets_cate .onglet_cate').click(function()
          {
            change_categorie( $('.onglet_cate', '#conteneur_onglets_cate').index( this ) )
          });
        
         $('.onglet_cate:eq(0)').click();
    }
      });

      function change_categorie( index )
      {
          if( $('.categorie:eq(' + index + ')').size() != 0 )
          {
            $('#conteneur_cate').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

          
           $('.categorie').css( 'display' , 'none' );
            $('.categorie:eq(' + index + ')').fadeIn( 500 );
          
           $('.onglet_cate.actif').removeClass('actif');
            $('.onglet_cate:eq('+ index +')').addClass('actif');
          }
          else alert('Vous ne pouvez pas accéder à cette catégorie');
      }

Sous-Forums

Le code

Code:

<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="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
          <td>
            <div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <div class="catte_titre">
          <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}>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
       <div class="sous_forum_contour">
        <div class="title_forum">
          <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>
          </h{catrow.forumrow.LEVEL}>
        </div>
 <div class="contour_description">
          <img class="img_cate" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          <div class="decription">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
          </div>
        </div>
        <div class="forum_liens">
          <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        </div>
        <div class="position_last_mess">
          {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
          <div class="dernier_mess">
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </div>
        </div>
       </div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
                      </td>
          </tr>
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Code:

   <img src="URL_IMAGE_DE_DROITE_ICI" />
    <h3>
       Titre Quelconque -
    </h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet erat ac arcu hendrerit posuere. Donec eu justo vulputate, ultrices quam non, cursus dolor. Nam vitae ornare nulla. Vestibulum sit amet diam mi. Cras quis erat et purus lobortis consectetur. Morbi dui tortor, consectetur scelerisque diam non, sagittis commodo est. Suspendisse ultrices nibh id lobortis aliquet. Phasellus faucibus quam vitae bibendum blandit. Sed tristique nec lacus id tempus. Donec ornare, orci sed sagittis laoreet, tellus quam ornare nisl, in pretium nibh odio vitae neque. Praesent sit amet lectus vehicula, ornare justo in, pulvinar nisl. Nunc ligula lectus, sagittis at vehicula eget, laoreet id odio. Quisque a cursus neque. Nullam non semper lectus. Suspendisse ut neque purus. Etiam in iaculis ligula.
    </p>

Code:

   /*********** DÉBUT CATÉS ***********/
    /* Couleur de fond d'intérieur du forum À retirer si vous avez prévu autre chose. */
    .bodyline {
      background-color: #DCE4E1;
    }

    /* Entoure les sousforums: va permettre de positionner les choses de façon absolue plus tard. */
    .sous_forum_contour {
      position: relative;
      height: 230px;
      width: auto;
      padding: 30px;
    }

    /* Permet de retirer les bords et la couleur de fond de base. */
    .forumline {
        background: none;
        border: none;
    }

    /* Mise en forme du titre de catégorie */
    .secondarytitle h2 {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 18pt;
      color: black;
      font-weight: bold;
    }

    /* Mise en forme du titre de forum */
    .title_forum {
      width: 490px;
      text-align: right;
      margin-bottom: 10px;
    }

    /* Permet d'avoir la bonne couleur de lien */
    .title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited {
      color: black;
      font-size: 14pt;
      font-weight: bold;
      letter-spacing: 1px;
      transition: all ease 1s;
    }

    /* Titre du forum au passage de la souris */
    .title_forum .forumlink a:hover {
      color: #51A8AC;
      letter-spacing: 3px;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Crée la petite barre bleue qui suit le titre du forum */
    .title_forum:after {
      content:"";
      display: inline-block;
      height: 1px;
      width: 100px;
      margin: 5px;
      /* Couleur de la barre */
      background-color: #51A8AC;
      /* Permet de lui donner une ombre */
      box-shadow: 2px 2px 1px black;
    }

    /* Permet d'avoirle carré blanc qui entoure la description */
    .contour_description {
      overflow: visible;
      width: 455px;
      height: 140px;
      padding: 20px;
      /* Couleur puis bordure de l'élément */
      background-color: #FFFFFF;
      border: 1px solid #51A8AC;
    }

    /* Permet de placer la description correctement. */
    .decription {
      width: 340px;
      height: 100px;
      display: inline-block;
      vertical-align: top;
    }

    /* Mise en forme de la description */
    .decription p {
      width: 340px;
      height: 50px;
      padding: 5px;
      overflow: auto;
      /* Couleur du texte */
      color: grey;
      margin: 0px;
      /* Police du texte puis sa taille */
      font-family: 'Times New Roman';
      font-size: 10pt;
      text-align: justify;
      /* Permet de donner une ombre au texte */
      text-shadow: 1px 1px 1px grey;
    }

    /* Mise en forme du titre dans la description */
    .decription h3 {
      font-weight:normal;
      margin: 0px;
      margin-left: 20px;
      text-shadow: 1px 1px 1px grey;
    }

    /* Permet de placer l'image de catégorie à droite. */
    .decription img {
      position: absolute;
      right: 60px;
      bottom: 47px;
    }

    /* Place les liens de sous-forums */
    .forum_liens {
      position: absolute;
      bottom: 90px;
      left: 160px;
      width: 376px;
      height: 16px;
      padding: 2px;
      /* Couleur de fond des liens */
      background-color: #51A8AC;
      overflow: auto;
    }

    /* Permet de donner leur couleur aux liens de sous-forums */
    .forum_liens a, .forum_liens a:link, .forum_liens a:visited, .forum_liens a:hover {
      color: white;
      text-decoration: none !important;
    }

    /* Positionnement du dernier message & du nombre de sujets et messages */
    .position_last_mess {
      position: absolute;
      bottom: 20px;
      left: 300px;
      text-align: center;
      /* Détermine la taille du nombre de sujets et messages */
      font-size: 9pt;
    }

    /* Mise en forme du dernier message */
    .dernier_mess {
      width: 175px;
      height: 40px;
      padding: 5px;
      /* Couleur de fond */
      background-color: #C6C8DC;
      /* Alignement du texte */
      text-align: right;
      /* Permet de donner au texte une ombre. */
      text-shadow: 1px 1px 1px grey;
    }
    
    /*********** FIN CATÉS ***********/

Modifications supplémentaires

• Modifier les titres de catégories: placement et mise en forme (CSS à modifier:  .secondarytitle et .secondarytitle h2)
  
• Mettre des coins arrondis:  (CSS à modifier: .contour_description, .forum_liens et  .dernier_mess)
  
• Mettre des effets sur les divers titres et liens (Titre de sous.forum, lien vers les sous-forums et titre de la description):  (CSS à modifier: .title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited et .title_forum .forumlink a:hover, .forum_liens a, .forum_liens a:link, .forum_liens a:visited et séparer .forum_liens a:hover et  .decription h3 et .decription h3:hover (ou .decription:hover h3))
  
• Modifier ce qui suit le titre de catégorie (retirer la barre): (CSS à modifier: .title_forum:after)

Sous-Forums

Le code

Code:

   <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
         <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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 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}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
       <div class="contour_gris_cat">
          <h{catrow.forumrow.LEVEL} class="hierarchy">
                <div class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </div>
            </h{catrow.forumrow.LEVEL}>
              <div class="cate_bas">
          <div class="descript_caté_entoure"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
            <div class="liens_ss_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
                <div class="position_messages_cat">
              <div class="last_mess_nyo"><span class="gensmall">{catrow.forumrow.LAST_POST}<br/>{catrow.forumrow.TOPICS} sujets<br/>{catrow.forumrow.POSTS} messages</span></div>
              <div class="new_images">
          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
       </div>
                </div>
              </div>
            <script type="text/javascript">
            jQuery(function(){
             var separator = "<br />";
               jQuery('span#subforums').each(function(){
                var links = jQuery(this).find("a");
                if(links.length > 1){
                   var html = "";
                   links.each(function(i){
                         html += "<a href='"+jQuery(this).attr('href')+"'  title=\""+jQuery(this).attr('title')+"\" class='gensmall'>"+jQuery(this).text()+"</a>";
                     if(i+1 != links.length){
                        html += separator;
                     }
                   });
                   jQuery(this).html(html);
                }
                jQuery(this).removeAttr('id');
               });
            });
          </script>
       </div>
    </td>
      </tr>
      <!-- END forumrow -->

Code:

   /***** DÉBUT CATÉ *******/
    /* Permet de retirer le fond du titre de catégorie */
    .secondarytitle {
      background: none;
    }

    /* Permet de mettre de l'espace entre les sous-forums et retirer le fond de table */
    .cat-table .forumline .row1, .cat-table .forumline .row2, .cat-table .forumline .row3, .cat-table .forumline .row3Right {
      background: none;
      padding-bottom: 50px;
    }

    /* Retire les fond de tables derrières les sous-forums */
    .cat-table td.row1, .cat-table td.row3.over:hover {
        background: none;
    }

    /* Retire les fond de tables derrières les sous-forums */
    .cat-table td.row1.over:hover, .cat-table td.row2 {
        background: none;
    }

    /* Contour des sous-forums */
    .contour_gris_cat {
      width: 730px;
      height: 260px;
      margin: auto;
      overflow: hidden;
      border-radius: 20px;
      /* Couleur de fond des sous-forums */
      background-color: #999999;
    }

     /* Placement des liens et titres du sous-forum */
    .forumlink {
      margin-left: 30px;
      margin-top: 10px;
      width: 425px;
      height: 25px;
      padding-top: 5px;
      padding-bottom: 5px;
      border-radius: 50px;
      background-color: #CCCCCC;
      text-align: center;
    }

    /* Effet sur les liens de sous-forums */
    a.forumlink {
      margin: 0;
      font-size: 18px;
      transition: all ease 1s;
    }

    /* Au passage de la souris */
    a.forumlink:hover,a.forumlink:link, a.forumlink:focus {
      text-decoration:none !important;
      font-size: 18px;
      transition: all ease 1s;
    }

    /* Mise en place des trois parties */
    .cate_bas {
      width: 100%;
      padding-top: 15px;
      padding-left: 10px;
    }

    /* Bloc de description des catégories */
    .descript_caté_entoure {
      width: 350px;
      height: 190px;
      float: left;
      overflow: hidden;
      border-radius: 10px;
      margin-right: 10px;
      /* Couleur de fond */
      background-color: #666666;
    }

    /* Lien vers les sous-forums */
    .liens_ss_forum {
      width: 120px;
      height: 170px;
      float: left;
      /* Alignement */
      text-align: center;
      border-radius: 10px;
      padding: 10px;
      margin-left: 10px;
      margin-right: 15px;
      /* Couleur de fond */
      background-color: #666666;
    }

    /* Effet sur les liens vers les sous-forums */
    .liens_ss_forum a {
      letter-spacing: 1px;
      transition: all ease 1s;
    }

    /* Effet au passage de la souris */
    .liens_ss_forum a:hover {
      letter-spacing: 3px;
      text-decoration:none !important;
      transition: all ease 1s;
    }

    /* Positionnement du dernier message  */
    .position_messages_cat {
      float: left;
      width: 150px;
      height: 170px;
      position: relative;
      margin-left: 10px;
    }
    
   /* Positionnement de l'image des derniers messages */
    .new_images {
      position: absolute;
      top: -30px;
      left: 7px;
    }

    /* Transformer l'image en rond */
    .new_images img {
      border-radius: 50%;
    }

    /* Mise en forme du dernier message */
    .last_mess_nyo {
      position: absolute;
      top: 60px;
      left: 0;
      padding-top: 45px;
      width: 150px;
      height: 85px;
      border-radius: 10px;
      /* Couleur de fond */
      background-color: #666666;
      text-align: center;
    }
    /***** FIN CATÉ *******/

Qui est en ligne

Le code

Code:

   <!-- BEGIN disable_viewonline -->
    <div id="qeel">
      <div id="groupes_qeel">
        <span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span>
      </div>
      <div id="infos_qeel">
        <span class="gensmall">
          <span id="post_nyo">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/Nos membres ont posté un total de/,"Nos archives comptent");</script><script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/messages/,"missives ");</script></span>.
          <span id="users_nyo">{TOTAL_USERS}</span>
          <script type="text/javascript">document.getElementById('users_nyo').innerHTML=document.getElementById('users_nyo').innerHTML.replace(/membres enregistrés/,"citoyens, ");</script>.
          <span id="new_user_nyo">{NEWEST_USER}</span>
          <script type="text/javascript">document.getElementById('new_user_nyo').innerHTML=document.getElementById('new_user_nyo').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"dont la nouvelle recrue");</script>
        </span>
        <br/><br/>
        <span class="gensmall">
          <span id="online_users_nyo">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/il y a en tout/,"Il y a en tout, se promenant dans le royaume");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateur en ligne/,"personne");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateurs en ligne/,"personnes");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/::/,"soit");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistré/,"citoyen");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistrés/,"citoyens");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisible/,"esprit");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisibles/,"esprits");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invité/,"recrue potentielle .");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invités/,"recrues potentielles .");</script>
        </span>
        <br /><br/>
        <span class="gensmall">
          <span id="step">{LOGGED_IN_USER_LIST}</span>
          <script type="text/javascript">document.getElementById('step').innerHTML=document.getElementById('step').innerHTML.replace(/Utilisateurs enregistrés/,"En train de parcourir les lieux ");</script>
          <table id="connected">
            {L_CONNECTED_MEMBERS}
            <script type="text/javascript">jQuery('#connected span.gensmall').html(jQuery('#connected span.gensmall').html().replace(/Membres connectés/,"Ils fûrent parmis nous"));</script>
            {L_WHOSBIRTHDAY_TODAY}
            {L_WHOSBIRTHDAY_WEEK}
          </table>
        </span>
      </div>
      <div id="position_partenaires_qeel">
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
      </div>
    </div>
    <!-- END disable_viewonline -->

Code:

   /***** DÉBUT QEEL *******/
    /* Permet de mettre l'image de fond du QEEL, sa grandeur et la couleur d'écriture. */
    #qeel {
      width: 800px;
      height: 682px;
      margin: auto;
      position: relative;
      color: #AAAAAA;
      background-image: url('URL_IMAGE_ICI');
    }

    /* Donne sa couleur au texte */
    #qeel .gensmall {
      color: #AAAAAA;
    }

    /* Permet de mettre en place les groupes & donner une largeur max + les caler vers la droite */
    #groupes_qeel {
      position: absolute;
      top: 95px;
      left: 300px;
      width: 450px;
      font-weight: bold;
      text-align: right;
    }

    /* Permet de positionner toutes les infos du QEEL & donner une largeur max */
    #infos_qeel {
      position: absolute;
      top: 180px;
      left: 375px;
      width: 350px;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected .row1 {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de positionner les partenaires */
    #position_partenaires_qeel {
      position: absolute;
      top: 506px;
      left: 138px;
      width: 522px;
      height: 118px;
    }

    /* Permet de mettre en place les images de partenaire et faire l'effet. */
    #position_partenaires_qeel img {
      display: inline-block;
      margin: 2px;
      opacity: 0.8;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: all ease 1s;
    }

    /*Permet de faire l'effet sur les partenaires*/
    #position_partenaires_qeel img:hover {
      opacity: 1;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: all ease 1s;
    }
    /***** FIN QEEL *******/

Spoiler:

• Tableau 1 (en rouge) : constitué d'une seule ligne, il est divisé en trois colonnes, comprenant les boutons « nouveau » et « répondre », le lien conduisant à ce sujet, et les boutons de partage.
  
• Tableau 2 (en orange) : grand cadre qui comprend l'intitulé du sujet, le profil et l'ensemble des messages postés sur une page. Il s’agit du bloc fondamental, où pourra se faire la mise en forme des messages et du profil.
  
• Tableau 3 (en violet) : le rappel du titre du sujet et la navigation vers le haut de page ou les autres sujets, sujet précédent et sujet suivant. On le trouve en bas de page.
  
• Tableau 4 (en bleu clair) : la pagination, l’accès aux autres pages le cas échéant et le bouton « surveiller les réponses de ce sujet ».
  
• Tableau 5 (en bleu foncé) : Il s’agit de la version avec menu fermé du tableau 6.
  
• Tableau 6 (en bleu foncé) : encart d’affichage des sujets similaires. Celui-ci peut simplement être masqué depuis le panneau d’administration de votre forum : Général --> Promotion du forum --> Echange de trafic --> Options --> Activer l’échange de trafic. Dans le tableau 6, les liens vers les sujets similaires sont affichés. Les deux tableaux se superposent.
  
• Tableau 7 : pas d’explication pour le moment
  
• Tableau 8 (en vert) : il comprend le bloc de réponse rapide, ainsi que le descriptif des permissions du forum, et le rappel du chemin d’accès à la page.
  
• Tableau 9 (en gris) : il s’agit de la ligne comprenant le rappel des boutons « nouveau » et « répondre » en bas de page, ainsi que l’accès rapide à d’autres forums (« sauter vers »).
  
• Tableau 10 (en rose) : les outils de modération (visible pour les administrateurs et modérateurs).
  

Code:

<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap">
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>
<td class="nav" valign="middle" width="100%">
 <span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span>
</td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
 <!-- BEGIN switch_twitter_btn -->
 <span id="twitter_btn" style="margin-left: 6px; ">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </span>
 <!-- END switch_twitter_btn -->
 
<!-- BEGIN switch_fb_likebtn -->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
 <!-- END switch_fb_likebtn -->
 
<span class="gensmall bold">
 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  | 
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </span>
 </td>
 </tr>
</table>

Code:

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>

Spoiler:

Code:

<tr align="right">
 <td class="catHead" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title">
 <h1 class="cattitle"> {TOPIC_TITLE}</h1>
 </td>
 <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
 </tr>
 </table>
 </td>
 </tr>

La première ligne du tableau correspond à la partie encadrée en rouge dans l'exemple ci-dessous :

Code:

<!-- BEGIN topicpagination -->
 <tr>
 <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}

Code:

<tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>

Code:

<!-- BEGIN hidden -->
 <tr>
 <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
 </tr>
 <!-- END hidden -->

Code:

<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options">
 {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>
 <td colspan="2" class="hr">
 <hr />
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->

 <div class="postbody">

 <div>{postrow.displayed.MESSAGE}</div>

 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd>
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

 <!-- BEGIN switch_dl_att -->
 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
 <!-- END switch_no_dl_att -->
 </dt>

 <!-- BEGIN switch_no_comment -->
 <dd>
 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
 </dd>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <dd>
 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
 </dd>
 <!-- END switch_no_dl_att -->

 <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->

 <div class="clear"></div>
 <!-- BEGIN switch_signature -->
 <div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature -->

 </div>
 <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
 </td>
 </tr>
 </table>
 </td>
 </tr>

Code:

<div>{postrow.displayed.MESSAGE}</div>

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center">
 <td class="row1" colspan="3" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 <tr align="right">
 <td class="catBottom" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
 <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>

Code:

table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
 <tr>
 <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
 <!-- BEGIN topicpagination -->
 <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
 <!-- END topicpagination -->
 </tr>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <tr>
 <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
 </tr>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
</table>

Code:

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
</table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row2 postbody" valign="top">
 <!-- BEGIN link -->
 » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->

Code:

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <h1 class="cattitle"> {L_FORUM_RULES}</h1>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->

Aperçu:

Code:

Par HeleneM sur Never Utopia.

Code:

<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 --><center><div class="forumline categorie1">
 <div class="secondarytitle titre_cat"> {catrow.tablehead.L_FORUM} </div>
 <!-- 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"> </div>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <!-- BEGIN inc -->
 <div class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></div>
 <!-- END inc -->
<div class="forum1">
<div class="forum_cadre1">              
                 <span class="genmed descr_forum">{catrow.forumrow.FORUM_DESC}</span>
 </div>

 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <div class="forumlink forum_cadre2">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                                 <img class="img_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </div>
 </h{catrow.forumrow.LEVEL}>
 
<div class="forum_cadre3">
          <span class="gensmall der_mess">{catrow.forumrow.LAST_POST}</span><br/>
           <span class="gensmall ss_forums">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </div>
</div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <!-- BEGIN inc -->
 <div class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></div>
 <!-- END inc -->
 <div class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></div>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<br clear="both"/>
</div></center>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Code:

/*polices*/
@font-face{
 font-family: Fountain Pen Frenzy;
 src: url('http://www.mediafont.com/storage/contents/5801/font.eot');/* IE */ /*ne fonctionne pas sous IE*/
  src: local('Fountain Pen Frenzy'), url('http://www.mediafont.com/storage/contents/5801/FountainPen.ttf'); /* non-IE */
}

@font-face{
 font-family: Charlemagne Bold;
 src: url('http://www.mediafont.com/storage/contents/12039/font.eot'); /* IE */
 src: local('Charlemagne Bold'), url('http://www.mediafont.com/storage/contents/12039/CHARLB.TTF'); /* non-IE */
}

/*DEBUT - TEMPLATE INDEX_BOX*/

/*affichage des catégories*/
.forumline .categorie1{
  width: 800px !important; /*largeur*/
}

/*titre catégories*/
.secondarytitle h2{
  font-family: Fountain Pen Frenzy, Times New Roman !important; /*type de police*/
  font-size: 40px !important; /*taille de police*/
}

/*affichage des forums*/
.forum1{
  width:800px; /*largeur*/
  clear:both;
}

/*cadre de gauche la desciption*/
.forum_cadre1{
  float:left; /*positionnement*/
  width: 300px; /*largeur*/
  height: 155px; /*hauteur*/
  background: url('http://img4.hostingpics.net/pics/367099Sanstitre3.png'); /*fond*/
  margin-top:30px; /*marge supérieure extérieure*/
}

/*description du forum*/
.descr_forum{
  width: 280px; /*largeur*/
  height: 125px; /*hauteur*/
  display:inline-block;
  margin:15px 10px; /*marges extérieures*/
  overflow:auto; /*barre de défilement si besoin*/
  color: white !important; /*couleur du texte*/
  text-align:left; /*position du texte*/
  font-family: Charlemagne Bold, georgia !important; /*police du texte*/
}
/*cadre du milieu avec l'image de nouveau message et le titre de forum*/
.forum_cadre2{
  float:left; /*positionnement*/
  margin:5px; /*marges extérieurs*/
  width:190px; /*largeur*/
  margin-top:10px !important; /*marge supérieure extérieure*/
}

/*titre de forum*/
.forumlink{
  font-family:Fountain Pen Frenzy, Times New Roman; /*type de police*/
  font-size:30px !important; /*taille de police*/
  color: black !important; /*couleur du texte*/
}
/*image new, no new, lock*/
.img_forum{
  width: 140px; /*largeur*/
  height: 144px; /*hauteur*/
}

/*cadre de droite*/
.forum_cadre3{
  float:left; /*positionnement*/
  width: 300px; /*largeur*/
  height: 155px; /*hauteur*/
  background: url('http://img4.hostingpics.net/pics/367099Sanstitre3.png'); /*fond*/
  overflow:hidden;
  margin-top:30px; /*marge supérieure extérieure*/
}
.forum_cadre3 .gensmall{
  color: white !important; /*couleur du texte*/
  font-family: Charlemagne Bold, georgia !important; /*police du texte*/
}
/*afficha du dernier message*/
.der_mess{
  display:inline-block;
  height:50px; /*hauteur*/
  margin-top:10px; /*marge supérieure extérieure*/
}
/*affichage des sous forums*/
.ss_forums{
  display:inline-block;
  margin:10px 10px 5px 10px; /*marges extérieures*/
  height: 80px; /*hauteur*/
  overflow: auto; /*défilement au besion*/
}
/*FIN - TEMPLATE INDEX_BOX*/

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>

Code:

{GENERATED_NAV_BAR}

Code:

<div id="navigation">
    <div id="navig">{GENERATED_NAV_BAR}</div>
  </div>

Code:

#navig a
{
  display: block;
}

Code:

/* NAVIGATION */

#navigation /* configure le bloc qui contient tout les liens */
{
  position: absolute; /* permet de mettre la navigation par dessus le reste sans decalage */
  top: 0; /* colle le bloc en haut de la page */
  left: 0; /* colle le bloc a gauche de la page */
  margin-top: 100px; /* marge haute */
  border: 3px solid #44a5ff; /* bordure */
}
#navig a /* personnalise les liens */
{
  display: block; /* met les liens en colonne */
  margin-bottom: -20px; /* enleve l'espacement par defaut des liens entre eux */
  background: #ffffff; /* couleur de fond des liens */
  border-bottom: 1px solid #e6e6e6; /* bordure basse des liens */
  padding: 3px 10px; /* marge interieure des liens */
  text-align: center; /* alignement du texte */
  text-transform: uppercase; /* met le texte en majuscule */
  transition: 1s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig a:hover /* personnalise les liens au survol */
{
  background: #212121; /* couleur de fond du lien */
  color: #ffffff; /* couleur du texte lien */
  transition: 1s; /* permet la transition lente */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig img
{
  display: none; /* permet d enlever l espace vide de l image contenue par defaut dans le lien */
}