1 résultat trouvé pour ffffff

Codage complet pour 2054

Hello !

Tout a été vu en privé sur Discord ;) Voilà donc les codes.
D'abord la CSS qui est commenté très très brièvement.
A placer dans Affichage > Couleurs > Feuilles de Style CSS (j'ai reprit ta CSS de base donc si tu ne l'as pas modifié tu peux la remplacer, sinon fais bien attention à ce qu'il n'y ait pas de doublon..) :

Code:

/**** Taille globale du texte sur tout le forum****/
body,
body *{
 font-size:12px;
}

*{
 box-sizing: border-box;
 scrollbar-color: #4D4D4D; /*Scrollbarre pour firefox*/
 scrollbar-width: thin;/*Scrollbarre pour firefox*/
}
/*Scrollbarre pour Chromes et autres navigateurs */
*::-webkit-scrollbar {
 width: 3px;
 background-color: #dbc9a8;
}
*::-webkit-scrollbar-thumb {
 background: #dbc9a8;
}

/*Placement de la bannière*/
.headerbar {
 background: none;
 height: 580px;
 position: center;
 padding: 0;
}
.headerbar .wrap {
 padding: 0;
}

#logo {
 float:none;
}

/* BALISES DU FOW*/
/*Tips

color: #88C0C1;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;

*/

n {
 color: #88C0C1;
 font-size: 12px;
 text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
}

o {
 color: #C1A17A;
 font-size: 12px;
 text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
}

a {
 color: #4D4D4D;
 font-size: 12px;
 text-transform: uppercase;
 font-family:'Oswald', sans-serif;
}
/***************** CSS en commun entre les catégories, le QEEL et la barre du haut /*****************/
.d-flex{
 display:flex;
}

/***************** BARRE DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage de la barre de navigation  ---------
------------------------------------------------------- */
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 font-family: 'Bebas Neue', cursive;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;

}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
 font-family: 'Bebas Neue', cursive;
}
#menuTitre:hover a{
 font-size:25px !important;
 font-family: 'Bebas Neue', cursive;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
 font-family: 'Bebas Neue', cursive;
}

/***************** FIN DE LA BARRE DE NAVIGATION TOP ********************/

/***************** CATEGORIES ********************/

/*** On met en colonne ***/
.forum .d-flex{
 justify-content: space-around;
}
.forum .d-flex div{
 flex: 1 1 auto;
}

/**** paramétrage des avatars du dernier posteur ****/
.avatarLastPost,
.avatarLastPost img{
 width:80px;
 height:100px;
 border-radius:0px;
}

/**** paramétrage des images "new", "no news", "lock" ****/
.etatSection,
.etatSection img{
 width:20px;
 height:100px;
}

/**** paramétrage des titres de catégories ****/
.TitreCategorie h2{
 width: 100%;
 background-color:#EAD5B8;
 font-family: 'Bebas Neue', cursive;
 line-height: 25px;
 font-size: 25px;
 text-align: right;
 color:#4D4D4D;
 padding:5px;
 border:#A68D6A 1px solid;
 width: 100%;
 margin:35px auto 5px;
}
.TitreCategorie span{
 color:#88C0C1;
 font-size: 22px;
 display:block;
}
/**** paramétrage des fonds titres de catégories
Partie à changer selon la catégorie : "cate-0", "cate-1";
le 0 correspond à la première, le 1 correspond à le deuxième, et ainsi de suite.
 ****/
.TitreCategorie[data-id-cate="cate-0"] h2 {
 background:url('https://i.servimg.com/u/f86/19/47/12/29/avatar15.png');
 background-size:cover;
}
.TitreCategorie[data-id-cate="cate-1"] h2{
 background:url('https://2img.net/s/t/20/71/54/i_folder_big.png');
 background-size:cover;
}

/**** paramétrage de la liste des forums et des forums ****/
.listeForums{
 width: 100%;

}
.forum{
 background: #FAFAFA;
 margin:10px 0;
 border: #A68D6A 1px solid;
}
.titreForum,
.lastMessage{
 background: #4D4D4D;
 color:#EAD5B8;
 height: 30px;
 line-height: 30px;
}
.titreForum{
 font-family: 'Bebas Neue', cursive;
 font-size: 25px;
 padding:0 5px;
}
.titreForum a{
 font-family: 'Bebas Neue', cursive;
 color:#EAD5B8 !important;
}
.lastMessage{
 text-align: center;
 font-size:14px;
}
.lastMessage .gensmall strong {
 font-size: 14px;
 font-weight:normal;
 font-family: 'Bebas Neue', cursive;
}
.lastMessage a,
.lastMessage a:link
{
 font-size:14px;
 color:#EAD5B8;
 font-family: 'Bebas Neue', cursive;
}
.infosMess{
 width:80px;
 font-size:12px;
 text-align: center;
 font-style: italic;
 align-self: center;
}
.description{
 width:430px;
 text-align: justify;
 height:100px;
 overflow: auto;
 padding:5px;
}
.sousFroums{
 width: 140px;
 height: 100px;
 overflow: auto;
 font-size:0;
}
.sousFroums a{
 display: block;
 text-align: center;
 font-size:14px;
 font-family: 'Bebas Neue', cursive;
}
a.forumtitle{
 display:inline;
}

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


/********************** QEEL **************************/
#QEEL > div{
 flex:1 1 auto;

}
#QEEL > div div{
 border: #A68D6A 1px solid;
 margin:1%;
 overflow:auto;
}
#QEEL{
 justify-content: space-between;
 align-items: center;
 text-align: center;
 background: #FAFAFA;
 margin:0 0 30px;
 border: #A68D6A 1px solid;
}

.TitreQEEL{
 width: 100%;
 background: #4D4D4D;
 font-family: 'Bebas Neue', cursive;
 line-height: 25px;
 font-size: 25px;
 text-align: right;
 color:#EAD5B8;
 padding:5px;
 border:#A68D6A 1px solid;
 margin:30px auto 0;
}
.colonne1{
 width:200px;
}
.colonne2{
 width:400px;
}
.colonne1 div{
 height:110px;
}
.colonne2 img{
 height: 80px;
 width:100%
}
#stats,
#credits{
 height:65px;
}
#groupes span{
 font-family: 'Bebas Neue', cursive;
 font-size:14px;
 cursor:pointer;
}
#groupes{
 flex-wrap:wrap;
 flex-direction:column;
}

C'est ici que tu vas gérer les fonds de tes titres de catégories, je te l'ai mis en commentaire mais voilà un zoom :

Code:

/**** paramétrage des fonds titres de catégories
Partie à changer selon la catégorie : "cate-0", "cate-1";
le 0 correspond à la première, le 1 correspond à le deuxième, et ainsi de suite.
 ****/
.TitreCategorie[data-id-cate="cate-0"] h2 {
 background:url('https://i.servimg.com/u/f86/19/47/12/29/avatar15.png');
 background-size:cover;
}
.TitreCategorie[data-id-cate="cate-1"] h2{
 background:url('https://2img.net/s/t/20/71/54/i_folder_big.png');
 background-size:cover;
}

Si tu as une question n'hésite pas je suis là pour ça. Il faut ajouter à chaque fois un bloc par catégorie :)

Ensuite on va s'occuper des templates, je te les mets dans l'ordre où ils apparaissent.
Index_body : ici on va gérer le fond du panneau d'accueil mais aussi et surtout le QEEL. Je te mets le code et je t'explique ce que tu as à modifier ensuite ;)

Code:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
         <div class="social_btn">
            <!-- BEGIN fb_connect -->
            <div class="fb-login-button"></div>
            <!-- END fb_connect -->
            <!-- BEGIN topicit_connect -->
            <div class="ti-connect"></div>
            <!-- END topicit_connect -->
         </div>
         <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->

<!-- BEGIN message_admin_titre -->

<!-- END message_admin_titre -->

<!-- BEGIN message_admin_txt -->
{message_admin_index.message_admin_txt.MES_TXT}
<!-- END message_admin_txt -->

<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div class="TitreQEEL">
   Qui parcourt ce monde ?
</div>
<div class="d-flex" id="QEEL">
   <div class="colonne1">
      <div id="Online">
         {TOTAL_USERS_ONLINE}<br />
         {LOGGED_IN_USER_LIST}
      </div>
      <div id="lastDay">
         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}
      </div>
   </div>
   <div class="colonne2">
      <div id="stats">
         {TOTAL_POSTS} <br />
         {TOTAL_USERS}<br />
         {NEWEST_USER}
      </div>
      <div>
         <img src="https://www.zupimages.net/up/20/04/zgvm.jpg" alt="QEEL" />
      </div>
      <div id="credits">
         Crédits du forum
      </div>
   </div>
   <div class="colonne1">
      <div id="groupes" class="d-flex">
         <span onclick="javascript:change_onglet('1');">groupe 1</span>
         <span onclick="javascript:change_onglet('2');">groupe 2</span>
         <span onclick="javascript:change_onglet('3');">groupe 3</span>
         <span onclick="javascript:change_onglet('4');">groupe 4</span>
         <span  onclick="javascript:change_onglet('5');">groupe 5</span>
         <span  onclick="javascript:change_onglet('6');">groupe 6</span>
         <span  onclick="javascript:change_onglet('7');">groupe 7</span>
         <span  onclick="javascript:change_onglet('8');">groupe 8</span>
      </div>
      <div>
         <p id="1"> 1
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="2"> 2
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="3"> 3
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="4"> 4
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="5"> 5
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="6"> 6
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="7"> 7
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="8"> 8
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
      </div>
   </div>
</div>
<script type="text/javascript">
   var anc_onglet=1;
   document.getElementById(2).style.display = 'none';
   document.getElementById(3).style.display = 'none';
   document.getElementById(4).style.display = 'none';
   document.getElementById(5).style.display = 'none';
   document.getElementById(6).style.display = 'none';
   document.getElementById(7).style.display = 'none';
   document.getElementById(8).style.display = 'none';
   function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
         <div class="social_btn">
            <!-- BEGIN fb_connect -->
            <div class="fb-login-button"></div>
            <!-- END fb_connect -->
            <!-- BEGIN topicit_connect -->
            <div class="ti-connect"></div>
            <!-- END topicit_connect -->
         </div>
         <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
   <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
   <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

Ici, il faut changer l'URL de l'image en mettant la tienne :

Code:

<div>
         <img src="https://www.zupimages.net/up/20/04/zgvm.jpg" alt="QEEL" />
      </div>

Ici, il faudra ajouter tes crédits :

Code:

<div id="credits">
         Crédits du forum
      </div>

Et ici se sont tes groupes :

Code:

<span onclick="javascript:change_onglet('1');">groupe 1</span>
         <span onclick="javascript:change_onglet('2');">groupe 2</span>
         <span onclick="javascript:change_onglet('3');">groupe 3</span>
         <span onclick="javascript:change_onglet('4');">groupe 4</span>
         <span  onclick="javascript:change_onglet('5');">groupe 5</span>
         <span  onclick="javascript:change_onglet('6');">groupe 6</span>
         <span  onclick="javascript:change_onglet('7');">groupe 7</span>
         <span  onclick="javascript:change_onglet('8');">groupe 8</span>

1 span = 1 groupe. Tu peux en retirer sans souci, pour en ajouter pense bien à mettre le chiffre à jour dans le change_onglet('X');
Tu peux leur ajouter une couleur en ajoutant dans le span : style="color:#ffffff;", comme ceci :

Code:

<span onclick="javascript:change_onglet('1');" style="color:#ffffff;">groupe 1</span>

Et ici se seont les descriptions des groupes :

Code:

<div>
         <p id="1"> 1
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="2"> 2
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="3"> 3
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="4"> 4
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="5"> 5
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="6"> 6
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="7"> 7
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
         <p id="8"> 8
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </p>
      </div>

1 p = 1 description. l'ID est l'id du groupe qui correspond à ce qu'il y a dans le change_onglet('X');

Et enfin ici on initialise ce qu'on voit ou non comme description de groupe :

Code:

<script type="text/javascript">
   var anc_onglet=1;
   document.getElementById(2).style.display = 'none';
   document.getElementById(3).style.display = 'none';
   document.getElementById(4).style.display = 'none';
   document.getElementById(5).style.display = 'none';
   document.getElementById(6).style.display = 'none';
   document.getElementById(7).style.display = 'none';
   document.getElementById(8).style.display = 'none';
   function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>

Si tu retire un groupe, tu peux retirer une ligne "document.getElementById(7).style.display = 'none';", si tu ajoutes tes groupes il ne faut pas oublier d'ajouter cette même ligne.

Je passe aux autres templates dans un second message ;)