Besoin d'aide pour coder mon QEEL

[alishra]

Bonjour , bonsoir , voilà je suis entrain de préparer ma Version deux pour mon forum et j'aimerais modifier mon QEEL. Mais comme mes capacités en CSS sont très limité, je fais appel à vous pour m'aider

adresse du forum http://tenebrys.jdrforum.net/
Voici le schéma de ce que je voudrais obtenir
https://i.servimg.com/u/f48/11/08/50/15/mise_e10.jpg

Voici les petites icônes pour chacun des groupes

https://i.servimg.com/u/f48/11/08/50/15/vampir10.jpg ( Ton sang est le nectar de ma vie)
https://i.servimg.com/u/f48/11/08/50/15/je_sui10.jpg ( je suis l'évolution de ce monde)
https://i.servimg.com/u/f48/11/08/50/15/hybrid10.jpg ( J'ai besoin de ta chaleur)
https://i.servimg.com/u/f48/11/08/50/15/je_ne_10.jpg ( je ne suis qu une vie éphémère)
https://i.servimg.com/u/f48/11/08/50/15/icone_10.jpg (Je me transforme à la pleine Lune)
https://i.servimg.com/u/f48/11/08/50/15/je_sui11.jpg(Je suis ton pire ennemi)
https://i.servimg.com/u/f48/11/08/50/15/je_sui12.jpg(Je suis la justice de ce monde)


Mon CSS de forum

Code:

a.mainmenu{
text-shadow: #FFFFFF 1px 1px 0px;
color: #8B0000;
cursor:crosshair;
margin:-3px;
font-size:13px;
font-family:Calibri,Arial;
text-transform:uppercase;
}



/* ********** ASCENSEUR ********** */
.ascenseur {
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
bottom: 5px; /*--- On le place à 50 px du haut de l'écran ---*/
right: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/
}

/* ********** QUOI DE SPÉCIAL? ********** */

body { cursor: crosshair }
a:hover { cursor:ne-resize; }


.titrehead {
background-color : #transparent; /* la couleur du fond */
-moz-border-radius : 9px; /* pour arrondir les bords ( Firefox ) */
font-variant  :small-caps; /* pour mettre les lettres en majuscules */
color :#914D4D; /* Couleur du texte */
}

.lienhead:hover {
background-color : #transparent ; */
text-decoration : none!important; /* enlève le soulignement des liens */
border-bottom : 1px dotted; /* bord du bas en pointillé */
letter-spacing : 3px; /* espace les lettres de 3px */
}





.forumline{
-moz-border-radius: 5px 10px 5px 10px ;
border-bottom: 6px #e3e3e3 solid;
border-top: 6px #e3e3e3 solid;
border-right: 1px #e3e3e3 solid;
border-left: 1px #e3e3e3 solid;}


a.forumlink:link, a.forumlink:visited {
margin-bottom:6px;
text-align:left;
margin-top:10px;
font-family:Arial;
font-size:11px;
text-transform:uppercase;
color:#914D4D;
text-shadow:#FFFFFF 1px 1px 0px;
word-spacing:2px;
vertical-align:top;
display:block;
background-color:#efeff5;
line-height:3px;
padding-left:10px;
}



.bloc{
padding:4px;
background-color:#efeff5;
width:228px;
height:100px;
font-family:Times New Roman;
font-size:13px;
color:#989446;}


.bloc:hover{
padding:4px;
background-color:#FFFFFF;
width:228px;
height:100px;
font-family:Times New Roman;
font-size:13px;
color:#989446;}


a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }


.quote{
font-family: Tahoma;
font-size: 12px;
color: #000000;
line-height: 125%;
background-image: url("http://s2.noelshack.com/old/up/lla-26172c8376.png");
border: #ffffff;
border-style: solid;
border: 1px #e3e3e3 solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
-moz-border-radius:6px;}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #000000;
background-image: url("http://s2.noelshack.com/old/up/lla-26172c8376.png");
border: 1 px#e3e3e3;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
-moz-border-radius:6px;}

input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}
a.mainmenu:link, a.mainmenu:visited{
font-family :Georgia;
text-align:left;}




.bodyline {-moz-border-radius:20px;}

.bodyline{border:7px solid #e3e3e3;
}

/*QUI EST EN LIGNE*/
.tableauqueel{
background-image: url("http://i20.servimg.com/u/f20/15/20/12/49/fond212.jpg");
background-repeat: no-repeat;
background-position: center;
height:400px;
width:800px;
background-color :#E7E9E6  ;
border : #E3E3E3 5px  solid  ;
-moz-border-radius : 20px 20px 20px 20px}


.partiedroite {
font-size : 12px ;
border-left : 4px dotted #A6A4A4  ;
padding-left : 10px }


.groupes{
background-color: ;
border: 4px color: #E3E3E3 ;
-moz-border-radius : 5px 2px 2px 5px;
height:40px;
padding-right:14px;
padding-left:12px;
padding-bottom:3px;
font-size:14px
;font-weight: bold;
text-align:center;
font-color : #A6A4A4  ;
text-decoration: none ;
margin : 20px ;
}

/*Colonne dernier message*/

.nombremessage{
border-bottom:2px dotted #E3E3E3;
border-right:2px solid #E3E3E3;
background-color: #CECFCE;
border-left:2px solid #E3E3E3;
border-top:2px solid #E3E3E3;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

.derniermessage{
background-color: #CECFCE;
border-right:2px solid #E3E3E3;
border-left:2px solid #E3E3E3;
border-bottom:2px solid #E3E3E3;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
/*avatar*/
.fondavatar {
background-color : #E7E9E6 ;
border : 2px solid #E3E3E3 ;
-moz-border-radius: 5px 2px 5px 2px }

/*Sous forum*/
.sousfofo {
  font-size:12px;
font-family: time new roman;
background-color: #CECFCE;
letter-spacing : 2px;
display:inline;
margin:19px;
padding-right: 5px;
padding-left: 8px;
-moz-border-radius : 20px 20px 5px 5px;
}
.sousfofo:hover {
  font-size: 12px;
letter-spacing : 2px;
font-family:time new roman;
background-color: #CECFCE;
color : #COULEUR DE LA POLICE AU PASSAGE DE LA SOURIS;
-moz-border-radius : 20px 20px 5px 5px;
}


/* info bulle */

* {
  font-family: time new roman;

}
a.info {
  position: relative;
  color: #8B0000;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
font-size: 12px;

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 60px; /* on positionne notre infobulle */
  left: 60px;

  background: #CECFCE;;

  color: #8B0000;
  padding: 3px;

  border: 3px solid #ffffff;
-moz-border-radius : 20px 20px 20px 20px
}



Mon index 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">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
  <tr>
      <td width="100%" valign="top" align="center" class="row1">
        <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label>
        <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label>
        {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

        <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>

      </td>
  </tr>
</table>
</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>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
 
<a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
        <!-- END switch_delete_cookies -->
        </span>
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>

            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>

            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
              <!-- BEGIN switch_delete_cookies -->
       
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{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">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
  <tr>
      <td width="95%" valign="top" align="center" class="row1">
        <span class="genmed">{L_USERNAME}:</span>
        <input class="post" type="text" size="10" name="username"/>
        <span class="genmed">{L_PASSWORD}:</span>
        <input class="post" type="password" size="10" name="password"/>
        {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

        <span class="gensmall">{L_AUTO_LOGIN}</span>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
      </td>
  </tr>
</table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<center>
<img src="http://img11.hostingpics.net/pics/138075arqeel.png">
<div class="tableauqueel">
<table style="width: 100%; border-collapse:collapse;">
  <br><br><tr>
      <td width="50%"><center>
<div style="padding:10px;"><center><fieldset style="border: 7px double black;-moz-border-radius:10px;height:120px;background-color: #CECFCE;"><legend><span style="color:#8B0000; font-variant:small-caps;">TENEBRYS</span></legend><div style="padding:10px;text-align:justify;line-height:1em;height:100px;overflow-y:auto"><div text-align:center; margin-bottom:10px;width:220px"><span class="groupes"> <a href="http://tenebrys.jdrforum.net/g12-je-suis-ton-pire-ennemi"><font color=#100333 size="2"><b>Je suis ton pire ennemi</b></font></a></span> <br>
<span class="groupes"> <a href="http://tenebrys.jdrforum.net/g10-j-ai-besoin-de-ta-chaleur"><font color= #855282 size="2"><b>J'ai besoin de ta chaleur</b></font></a></span> <br>
<span class="groupes"> <a href="http://tenebrys.jdrforum.net/g14-je-suis-l-evolution-de-ce-monde"><font color= #979DA8 size="2"><b>Je suis l'évolution de ce monde</b></font></a></span> <br>
<span class="groupes"> <a href="http://tenebrys.jdrforum.net/g16-je-ne-suis-qu-une-vie-ephemere"><font color= goldenrod size="2"><b>Je ne suis qu'une vie éphémère </b></font></a></span>
 <br><span class="groupes"> <a href="http://tenebrys.jdrforum.net/g13-ton-sang-est-le-nectar-de-ma-vie"><font color= #E63535 size="2"><b>Ton sang est le nectar de ma vie</b></font></a></span><br>
<span class="groupes"> <a href="http://tenebrys.jdrforum.net/g15-je-me-transforme-a-la-pleine-lune"><font color= #5E8DB5 size="2"><b>Je me transforme à la pleine Lune</b></font></a></span><br>
<span class="groupes"> <a href="http://tenebrys.jdrforum.net/g17-je-suis-la-justice-de-ce-monde"><font color= #3945CC size="2"><b>Je suis la justice de ce monde</b></font></a></span>


</center></div>
</td>
      <td width="50%"><div style="padding:10px;"><center><fieldset style="border: 7px double black;-moz-border-radius:10px;120px;background-color: #CECFCE;"><legend><span style="color:#8B0000; font-variant:small-caps;">PRÉSENT DANS LA CITÉ</span></legend><div style="padding:10px;text-align:justify;line-height:1em;height:100px;overflow-y:auto"><div text-align:center; margin-bottom:10px;width:220px"><div class="partiedroite"><br><ul><div class="gensmall">{TOTAL_POSTS}<br>{TOTAL_USERS}
{NEWEST_USER}<br><span class="gensmall"><span id="delf"><span class="gensmall"><span id="delf">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"Actuellement il y à");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"Actuellement ils y à");</script>

<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"Tenebrysien");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"Tenebrysiens");</script>

<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"Ame errante,");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"Ames errantes,");</script>

<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"Potentiel Victime");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"Potentiels victimes");</script></span></span>
</ul>
<br></div></div></td>
  </tr>
</table><br>
<span class="gensmall"><table width=50%"><div style="padding:10px;"><center><fieldset style="border: 7px double black;-moz-border-radius:10px;;height:80px;background-color: #CECFCE;"><legend><span style="color:#8B0000; font-variant:small-caps;">DANS LES RUES</span></legend><div style="padding:10px;text-align:justify;line-height:1em;height:100px;overflow-y:auto"><div text-align:center; margin-bottom:10px;width:470px">{L_CONNECTED_MEMBERS}
{LOGGED_IN_USER_LIST}</div><br></table></span></div></center>
<br>
<!-- 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>  </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}

Voilà je remercie d'avance les personnes qui m'aideront dans ce codage

[Lixyr]

Bonjour.

Le contenu de vos infobulles, vous voulez que ce soit les info bulles de vos groupes ?
Pourquoi les mettre en bas du tableau si ce sont des info bulles ? Je dois dire que j'ai du mal à saisir. Pour le reste, c'est bon.

Cordialement,
Lixyr.

[alishra]

Alors, je ne les veux pas en bas, c'était juste plus facile pour moi d'expliquer comme ça ce que je voulais dans mes infos bulles. Oui il s'agit des descriptions et du nom des groupes.

Cordialement Alishra

[Lixyr]

Merci beaucoup pour les informations.

Alors, comme c'est une demande de QEEL complet, je vais vous renvoyer sur plusieurs topiques qui expliquent très bien certaines choses. Comme ça, il y aura les explications, et vous pourrez le faire toute seule :

Modifier les phrases du QEEL 1 & 2
Les info Bulles
comment faire un tableau 1 & 2


Voilà. Ensuite, je précise pour ceux qui se le demanderaient, que le QEEL se modifie dans le template index_body (version phpbb2 au mieux), et que toute la partie correspondant au QEEL se trouve entre la balise <!-- BEGIN disable_viewonline --> et la balise <!-- END disable_viewonline -->


Alishra, je vous donne comme base, ceci :

(partie du qeel)

Code:

  <!-- BEGIN disable_viewonline -->
    <center>
    <img src="http://img11.hostingpics.net/pics/138075arqeel.png">



    <table style="width: 100%;" cellspacing="10">
  <tr>
          <td width="50%" class="cadreqeel">{TOTAL_USERS}
<br>
{TOTAL_POSTS}
<br>
{NEWEST_USER}
<br>
{TOTAL_USERS_ONLINE}
    </td>


          <td width="50%" align="center" class="cadreqeel">

<span class="infobulle"><img src="http://i48.servimg.com/u/f48/11/08/50/15/vampir10.jpg" />
  <span class="infobulle-hidden">
ton sang est le nectar de ma vie
  </span>
</span>

    

<span class="infobulle"><img src="http://i48.servimg.com/u/f48/11/08/50/15/je_sui10.jpg" />
  <span class="infobulle-hidden">
je suis l'évolution de ce monde
  </span>
</span>

    


<span class="infobulle"><img src="http://i48.servimg.com/u/f48/11/08/50/15/hybrid10.jpg" />
  <span class="infobulle-hidden">
j'ai besoin de ta chaleur
  </span>
</span>


<br>

<span class="infobulle"><img src="http://i48.servimg.com/u/f48/11/08/50/15/je_ne_10.jpg" />
  <span class="infobulle-hidden">
je ne suis qu'une vie éphémère
  </span>
</span>


    

<span class="infobulle"><img src="http://i48.servimg.com/u/f48/11/08/50/15/icone_10.jpg" />
  <span class="infobulle-hidden">
je me transforme la pleine lune.
  </span>
</span>


    

<span class="infobulle"><img src="http://www.servimg.com/u/f48/11/08/50/15/je_sui11.jpg" />
  <span class="infobulle-hidden">
je suis ton pire ennemi
  </span>
</span>

    


<span class="infobulle"><img src="http://www.servimg.com/u/f48/11/08/50/15/je_sui12.jpg" />
  <span class="infobulle-hidden">
je suis la justice de ce monde
  </span>
</span>


</td>
      </tr>
<tr>
<td colspan="2" class="cadreqeel">
{LOGGED_IN_USER_LIST}
</td>
</tr>

    </table>


    <!-- END disable_viewonline -->

et le css qui va avec :

Code:

    .infobulle{
      position: relative;}

    .infobulle .infobulle-hidden {
      display: none;  position: absolute;    visibility: visible;  z-index: 999;
    top: 2px;    left: 20px;
 }

    .infobulle:hover .infobulle-hidden {
      display: block;}



.cadreqeel {border:1px solid black;
-moz-border-radius : 8px;border-radius : 8px;-webkit-border-radius : 8px;
padding:5px; }

je n'ai rien modifié dans votre CSS, juste rajouté ces deux classes :

la première va pour les info bulles (voir le topique qui en parle)

et le deuxième, c'est le cadre entourant votre trois cellules, avec un border-radius pour les arrondis correspondant aux navigateurs Mozilla Firefox, Chrome et code de base.

[alishra]

Merci de ta réponse Lyxir , je suis entrain d'essayer de changer les phrases et là je bloque fortement, j'arrive pas à comprendre la marche à suivre . J'ai pourtant bien lu les deux liens que tu m'as dit de suivre, mais je m’emmêle les pinceaux . Tu pourrais me donner un exemple, pour ma première phrase, pour que je puisse comprendre vraiment la marche à suivre.
Excuse moi d'être un boulet

[Lixyr]

Pour la première phrase : "Depuis la grande révélation, Tenebrys compte X habitants."

Ça correspond à la variable : {TOTAL_USERS}.
Cette variable correspond à la phrase : Nous avons X membres enregistrés.

On compte deux parties dans cette phrase : celle AVANT le X et celle APRÈS le X.


Alors

1) Entourer la variable d'une ID :

<span id="post"> {TOTAL_USERS}</span>

Une id pour identifier la variable au script qui le modifiera.

Chaque variable aura sa propre id.

2 ) Introduire le code pour modifier la phrase :

<script type="text/javascript">document.getElementById('ID').innerHTML=document.getElementById ('ID').innerHTML.replace(/PREMIERE PARTIE DE LA PHRASE A MODIFIER/,"VOTRE TEXTE, ");</script>
<script type="text/javascript">document.getElementById('ID').innerHTML=document.getElementById ('ID').innerHTML.replace(/DEUXIEME PARTIE DE LA PHRASE A MODIFIER/,"VOTRE TEXTE.");
</script>

Le code se place directement après la variable. Comme ceci :

<span id="post"> {TOTAL_USERS} <script type="text/javascript">document.getElementById('ID').innerHTML=document.getElementById ('ID').innerHTML.replace(/PREMIERE PARTIE DE LA PHRASE A MODIFIER/,"VOTRE TEXTE, ");</script>
<script type="text/javascript">document.getElementById('ID').innerHTML=document.getElementById ('ID').innerHTML.replace(/DEUXIEME PARTIE DE LA PHRASE A MODIFIER/,"VOTRE TEXTE.");
</script></span>

Ensuite il suffit de remplir correctement en remplaçant les id par l'id de votre variable, que vous choisirez, et les début et fin de phrases ainsi que ce par quoi vous voulez que ce soit remplacer.


Pour la première phrase :

3) code modifié :

<span id="post"> {TOTAL_USERS} <script type="text/javascript">document.getElementById('post').innerHTML=document.getElementById ('post').innerHTML.replace(/Nous avons/,"Depuis la grande révélation, Tenebrys compte");</script>
<script type="text/javascript">document.getElementById('post').innerHTML=document.getElementById ('post').innerHTML.replace(/membres enregistrés./," habitants.");
</script></span>

Ça donne le code :

Code:

<span id="post"> {TOTAL_USERS} <script type="text/javascript">document.getElementById('post').innerHTML=document.getElementById ('post').innerHTML.replace(/Nous avons/,"Depuis la grande révélation, Tenebrys compte");</script>
<script type="text/javascript">document.getElementById('post').innerHTML=document.getElementById ('post').innerHTML.replace(/membres enregistrés./," habitants.");
</script></span>

Il suffit de faire pareil pour chaque variable.

[alishra]

Excuse moi de revenir t'embêter mais j'ai un petit souci voilà un aperçu

https://i.servimg.com/u/f48/11/08/50/15/aperau10.jpg

J'ai bien réussit à changer les phrases , mais la dernière est toutes petites par rapport aux autres, voici

mon index body

[Lixyr]

Retirez le span gensmall, et la span de fermeture qui est en trop :

<span class="gensmall">
<span id="totaluseronline">
{TOTAL_USERS_ONLINE}
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Vous trouverez actuellement dans nos rues");
</script>


<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"Tenebrysien qui traverse la ville ");
</script>


<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"Tenebrysiens qui traversent la ville");
</script>


<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"Tenebrysien(s)");
</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"Gardien(s)");
</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"Touriste(s)");
</script>
</span>
</span>

[alishra]

Merci beaucoup de votre aide , je vais terminer par faire les infobulles maintenant.

[Lixyr]

Faites attention, j'ai entré votre template index_body dans mon forum test et il me semble qu'il y a une erreur, ça s'affiche très très mal.

[alishra]

Ah bon ? comme je travaille sur un forum test pour l'instant il me semble pas y avoir d'erreur.

[Lixyr]

Vous verrez bien. Je dis peut-être une bêtise.

[alishra]

Bonsoir , alors je voulais savoir comme je pouvais changer la taille, la couleur la mise en page dans mes infobulles ?

[Lixyr]

Si vous avez pris ce code :

Code:


    .infobulle{
      position: relative;}

    .infobulle .infobulle-hidden {
      display: none;  position: absolute;    visibility: visible;  z-index: 999;
      /* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */}

    .infobulle:hover .infobulle-hidden {
      display: block;}

vous pouvez modifier l'apparence de l'info bulle dans cette partie :

.infobulle .infobulle-hidden {
display: none; position: absolute; visibility: visible; z-index: 999;
/* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */}

à la place, vous pouvez par exemple :
* mettre une bordure

Code:

border:1px solid black;

* mettre un fond de couleur

Code:

background-color:COULEUR;

* mettre une image de fond

Code:

background-image:url(URL_IMAGE):

* changer la largeur

Code:

width:TAILLEpx;

* changer la hauteur

Code:

height:HAUTEURpx;

* modifier la couleur du texte compris dedans

Code:

color:COULEUR;

Etc.
comme vous voulez.

[alishra]

Bonsoir Lixyr , excusez moi 'encore vous embêter, je suis toujours entrain d'utiliser mes infobulles et je rencontre un souci

https://i.servimg.com/u/f48/11/08/50/15/pou_li10.jpg

voici le code que je suis entrain d'utiliser


Pourquoi mes infobulles ne sont pas détachées et comment remédier à ce problème ?

amicalement Andrea

[Lixyr]

Effectivement.

Alors, vous avez oublié de fermer le premier span. ^^

Par ailleurs, il y a quelques petites erreurs dans votre code, regardez :

<span class="infobulle">
<img src="http://images2.fanpop.com/images/photos/6900000/Multiple-Photoshoot-icons-olivia-wilde-6928990-75-75.jpg" />
<span class="infobulle-hidden"><br>
<center>
<div style="color:#ffffff;font-size:18px">Andrea Ioans</div>
</center><br>
<center><img src="https://i.servimg.com/u/f40/15/20/12/49/presen11.jpg" />
</center>
<a style="font-size:12px;color:#87a6be;" href="http://tenebrys.jdrforum.net/privmsg?mode=post&u=1" >Me contacter
</a></span></span></a>

en violet, ce que j'ai rajouté, et en barré ce qu'il y a en trop. ^^

Attention à bien refermer les deux span l'un après l'autre :
<span class="infobulle"> & <span class="infobulle-hidden">


Vous avez fait ça pour toutes vos info-bulles.

Voici le template corrigé :

Code:

    <center><div style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px;color:#3a5f7c; text-transform:uppercase;">Titre du forum</div> <table cellspacing="0" cellpadding="0"> <tr><td ><div style="width:260px; height:260px;background-color:#4b7a9f;-moz-border-radius:35px 0px 0px 35px;border-left: 2px solid #99d0c7;border-top: 2px solid #99d0c7;border-bottom:2px solid #99d0c7;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;"><div style="color:#3a5f7c;text-align:center;text-transform:uppercase;">Contexte</div><blockquote style="padding:5px; border:#384d5d solid 2px;-moz-border-radius: 15px 0px 0px 15px;overflow:auto; height:190px;text-align:justify;font-size:11px;background-color:#729dbe;color:#384d5d;"><span style="font-weight:bold; font-size:12px;">CRÉER PAR CREATIC SUR <span style="color:navy; font-size:12px; font-variant:small-caps;">HTTP://CENTRALREVIEW.TK</span> NE PAS OUBLIER DE CRÉDITEZ! A NE REDISTRIBUER A PERSONNE ET A NE MODIFIER EN AUCUN CAS SAUF SOUS MON ACCORD.</span> LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, LE CONTEXTE ICI, </blockquote></div></td> <td><div style="width:320px; height:320px;background-color:#4b7a9f;-moz-border-radius:35px;border-top: 2px solid #99d0c7;border-bottom:2px solid #99d0c7;padding:5px;text-align:center;color:#87a6be;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;"><div style="color:#3a5f7c;text-align:center;text-transform:uppercase;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-weight:bold;">L'équipe</div><span class="infobulle"><img src="http://images2.fanpop.com/images/photos/6900000/Multiple-Photoshoot-icons-olivia-wilde-6928990-75-75.jpg" /><span class="infobulle-hidden"><br><center><div style="color:#ffffff;font-size:18px">Andrea Ioans</div></center><br><center><img src="http://i40.servimg.com/u/f40/15/20/12/49/presen11.jpg" />
</center><a style="font-size:12px;color:#87a6be;" href="http://tenebrys.jdrforum.net/privmsg?mode=post&u=1" >Me contacter
</a></span></span><span class="infobulle"><img src="http://images1.fanpop.com/images/image_uploads/Tom-Welling-hottest-actors-849435_75_75.jpg" /><span class="infobulle-hidden"><br><center><div style="color:#ffffff;font-size:18px">Mark Jefferson/Odin</div></center><br><center><img src="image" /></center><a style="font-size:12px;color:#87a6be;" href="http://tenebrys.jdrforum.net/privmsg?mode=post&u=5" >Me contacter</a></span></span> <span class="infobulle"><img src="http://images2.fanpop.com/image/photos/12100000/Megan-Fox-megan-fox-12117372-75-75.jpg" /><span class="infobulle-hidden"><br><center><div style="color:#ffffff;font-size:18px">Nox</div></center><br><center><img src="image" /></center><a style="font-size:12px;color:#87a6be;" href="lien" >Me contacter</a></span></span><span class="infobulle"><img src="http://images4.fanpop.com/image/photos/18100000/Sophia-sophia-bush-18108932-75-75.jpg" /><span class="infobulle-hidden"><br><center><div style="color:#ffffff;font-size:18px">Lisendria Hemingway</div></center><br><center><img src="image" /></center><a style="font-size:12px;color:#87a6be;" href="lien" >Me contacter</a></span></span>  <br/><br/>☼<a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >Contexte</a> ☼ <a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >Règlement</a> ☼ <a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >Poste vacants</a> ☼ <br/>☼ <a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >Bottin des avatars</a> ☼ <a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >Partenariat</a> ☼ <a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >Invités</a> ☼ <br/><br/><div style="color:#3a5f7c;text-align:center;text-transform:uppercase;">LES TOP PARTENAIRES</div><img style="border:none;padding:1px;" alt="top partenaire" src="http://img94.imageshack.us/img94/7184/boutonv41.jpg" /> <img style="border:none;padding:1px;" alt="top partenaire" src="http://img94.imageshack.us/img94/7184/boutonv41.jpg" /> <img style="border:none;padding:1px;" alt="top partenaire" src="http://img94.imageshack.us/img94/7184/boutonv41.jpg" /><br/><a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >More?</a> <a style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;font-size:12px;color:#87a6be;text-decoration:none !important;text-transform:lowercase;" href="lien_ici" >You?</a><br/><br/> <img style="border:none;padding:1px;" alt="top partenaire" src="http://img715.imageshack.us/img715/3685/boutonlier2.gif" /> <img style="border:none;padding:1px;" alt="top partenaire" src="http://img715.imageshack.us/img715/3685/boutonlier2.gif" /></div></td> <td><div style="width:260px; height:260px;background-color:#4b7a9f;-moz-border-radius:0px 35px 35px 0px;border-right: 2px solid #99d0c7;border-top: 2px solid #99d0c7;border-bottom:2px solid #99d0c7;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;"><div style="color:#3a5f7c;text-align:center;text-transform:uppercase;">Journal de bord</div><blockquote style="padding:5px; border:#384d5d solid 2px;-moz-border-radius: 0px 15px 15px 0px; height:190px;text-align:justify;font-size:11px;background-color:#729dbe;color:#384d5d;"><marquee direction="up" scrollamount="1">LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, LES NEWS ICI, </marquee></blockquote></div></td></tr> <tr><td colspan="3"><div style="css-et-codage:creatic;diponible-sur:centralreview.tk;text-align:center; text-transform:lowercase; font-size:8px; color:#B0B0FF;font-family:Arial, Helvetica, sans-serif;">le code page d'accueil à été créé par CREATIC, il est disponible sur http://centralreview.tk</div></td></tr> </table></center>

[alishra]

Merci beaucoup Lixyr, ça marche parfaitement maintenant

[Lixyr]

D'accord. ^^ Est-ce que le sujet est où y a-t-il encore des questions ou des problèmes liées au QEEL ?