Bonjour à tous,

Nouveau QEL et besoin d'aide.

Tout d'abord voici le QEL qu'on souhaiterait modifier



Ensuite voici le CSS

Code:

/*--------------------------------- PA ---------------------------------*/

/* Fond */
.fondsgénéraux {
  background-color: #;
  width: 1100px;
  padding: 15px;
  color: #767676;
}

.blocpa {
  width: 220px;
  padding: 15px;
  background-color: #141517;
}

.blocpa:hover {
  width: 220px;
  background-color: #141517;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
}

/* Titres */
.titrePA1 {
  font-family: Lucida Calligraphy;
  font-size: 35px;
  color: #FE6D6D;
  z-index: 1px;
  position: relative;
}

.titrePA2 {
  font-family: Lucida Calligraphy;
  font-size: 25px;
  color: #F0F0F0;
  position: relative;
}

.titrePA2:hover {
  font-family: Lucida Calligraphy;
  font-size: 25px;
  color: #FE6D6D;
  position: relative;
}

.titrePA3 {
  font-family: Lucida Calligraphy;
  font-size: 25px;
  color: #FE6D6D;
  position: relative;
}

.titrePA3:hover {
  font-family: Lucida Calligraphy;
  font-size: 25px;
  color: #F0F0F0;
  position: relative;
}

/* Système onglets */
.paonglet {
  display: inline-block;
  cursor: pointer;
}

.contenu_paonglet {
  display: none;
  width: 350px;
  height: 360px;
  background-color: #141517;
}

.contenu_paonglet:hover {
  display: none;
  width: 250px;
  background-color: #141517;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
}

/* Info-bulles staff */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
 left: -2em;
  width: 120px;
  height: 50px;
  background-color: #000000;
  color: #000000
  text-align: center;
  font-weight: none;
}

/* Info-bulles prédef */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -7.3em;
 left: -0.2em;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Images Prédef */
.imgPA {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

/* Images Staff */
.imgwidget {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Top Sites */
.tops {
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  width: 40px;
}

.tops:hover {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 40px;
}

/*--------------------------------- FIN PA ---------------------------------*/


.ChatboxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 10%; /* à 10% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et collé au bord gauche */
  width : 100px; /* dimension 100px */
}
.ChatboxLaterale iframe {
  width: 800px; /* largeur */
  height: 300px; /* hauteur */
  display: none; /* caché par défaut */
}
.boutonChatbox {
vertical-align: bottom; /* on aligne le bouton en bas, le long de la chatbox */
}
.boutonChatbox img {
  cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}

a:hover{
    letter-spacing: 2px;
}

---------------------

#chatbox_header .catBottom .cattitle {
color:white;
}
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Chaudron baveur"; }
#chatbox_header .cattitle { background-image:url(); }
#chatbox_header .cattitle strong { visibility: hidden; }

/* QEEL */
.QEEL {
margin:auto; width:800px; height:340px; padding-top:20px; text-align:center;
background:black; box-shadow:0 0 3px rgba(0,0,0,0.1); /* MODIFIABLE */
}
/* BLOC MEMBRES EN LIGNE / 24H */
#ondayQEEL {
display:inline-block; vertical-align:top;
width:300px;
}
/* MEMBRES CONNECTES */
.onlineQEEL {
display:inline-block; margin-bottom:10px; margin-right:5px;
width:270px; height:100px; padding:10px; overflow:hidden;
background:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:10px; text-align:justify;
opacity:0.5; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.onlineQEEL:hover {
overflow:auto; opacity:1;
}
/* 24H QEEL */
.dayQEEL {
display:inline-block; margin-right:5px;
width:280px; height:110px; padding:5px; overflow:hidden;
background:rgba(250,250,250,0.8); color:black !important; /* MODIFIABLE */
font-size:10px; text-align:justify;
opacity:0.5; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.dayQEEL:hover {
overflow:auto; opacity:1;
}
.dayQEEL .row1 {
padding:0; background:none;
}
/* BLOC ANNIVERSAIRES / STATISTIQUES QEEL */
#stsQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
margin-bottom:10px;
width:225px; height:100px; padding:10px; overflow:hidden;
background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
font-size:10px; text-align:justify !important;
opacity:0.5; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover {
overflow:auto; opacity:1;
}
.anvQEEL .row1 {
padding:0; background:none;
}
/* STATISTIQUES QEEL */
.stsQEEL {
margin:auto;
width:245px; height:120px;
font-family:Verdana; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* TITRES STATISTIQUES QEEL */
.stsQEEL div {
margin:5px auto;
width:245px; height:24px; padding:12px 0 0;
text-transform:uppercase; text-align:center; font-weight:bold;
background:rgba(250,250,250,0.4); color:black; /* MODIFIABLE */
transition:all .45s ease; -webkit-transition:all .45s ease;
}
.stsQEEL:hover div {
color:rgba(0,0,0,0);
}
/* CONTENU STATISTIQUES */
.statsHOV {
position:absolute; z-index:5; margin-left:-122px; margin-top:-41px;
width:245px; height:24px; padding:12px 0 0;
background:rgba(250,250,250,0.3); color:black !important;  /* MODIFIABLE */
opacity:0; transition:all .45s ease; -webkit-transition:all .45s ease;
}
.stsQEEL:hover .statsHOV {
opacity:1;
}
/* BLOC GROUPES QEEL */
.GQEEL {
display:inline-block; vertical-align:top; margin-left:5px;
width:200px; height:230px; padding:10px 0; overflow:hidden;
text-align:center; color:rgba(0,0,0,0); line-height:14px;
background:rgba(250,250,250,0.5); /* MODIFIABLE */
opacity:0.5; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.GQEEL:hover {
opacity:1; overflow:auto;
}
/* GROUPE QEEL */
.GQEEL a{
display:block;
text-transform:uppercase; font-family:Birch Std; font-size:10px;
text-shadow:1px 1px 0px rgba(0,0,0,0.3); letter-spacing:3px; /* MODIFIABLE */
transition:all .45s ease; -webkit-transition:all .45s ease;
}
/* SURVOL GROUPE QEEL */
.GQEEL a:hover {
letter-spacing:1px; /* MODIFIABLE */
}
/* BLOC NOMBRE UTILISATEURS EN LIGNE & TITRE QEEL */
.tleQEEL {
width:770px; height:50px; padding:15px;
text-transform:uppercase; text-align:center;
}
/* TITRE QEEL */
.tleQEEL a{
font-size:24px; font-family:Birch Std;
color:white; text-shadow:1px 1px 0px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* NOMBRE UTILISATEURS EN LIGNE */
#TLUS {
display:block; margin-top:-10px;
letter-spacing:0; font-size:8px;
color:black; /* MODIFIABLE */
}


Et voici le code Template Body

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr><td><div class="QEEL">
  <!-- MEMBRES CONNECTES & 24H --><div id="ondayQEEL">
  <!-- MEMBRES CONNECTES --><div class="onlineQEEL"><table>{LOGGED_IN_USER_LIST}</table></div>
  <!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div>
  <!-- ANNIVERSAIRES & STATISTIQUES --><div id="stsQEEL">
  <!-- ANNIVERSAIRES --><div class="anvQEEL"><table>{L_WHOSBIRTHDAY_TODAY} {L_WHOSBIRTHDAY_WEEK}
  </table></div>
  <!-- STATISTIQUES --><div class="stsQEEL">
  <!-- DERNIER INSCRIT --><div>Dernier sorcier rencensé</div><span class="statsHOV" id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
  <!-- TOTAL MEMBRES --><div>Sorciers</div><span class="statsHOV" id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script>
  <!-- TOTAL MESSAGES --><div>Parchemins</div><span class="statsHOV" id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script></div></div>
  <!-- GROUPES --><div class="GQEEL">{GROUP_LEGEND}</div>
  <!-- TITRE --><div class="tleQEEL"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a><span id="TLUS">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script></div></div></td></tr></table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td> &nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (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/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->


Voici ce que nous souhaiterions comme modification
- Que qui est en ligne devienne "Miroir de Rised"
- Que les cases en première apparence soit comme celle de aucun mambre ne fête .....puis en seconde apparence comme la case utilisateurs enregistrés actuel
- Remplacer le terme nos membres ont poste un total de xx message par nos sorciers ont posté un total de XX parchemins
- Utilisateurs enregistrés par Sorciers de notre communauté magique
- L'utilisateur enregistré le plus récent par Le dernier sorcier à nous avoir rejoints
- utilisteur en ligne par menbre(s) de notre communauté magique
- Enregistré par sorcier
- invisible par sous cape d'invisibilité
- Invité par Moldu
- utilisateurs en ligne par sorciers présents
- utilisateurs enregistrés par sorciers présents
- membres connectés par sorciers de passage
- Pour les anniversaire idem, membres par sorcier

Voilà, je sais que c'est beaucoup demandé.
Merci d'avance
Amicalement
Sylvius