Infobulle pour les groupes

[La ptite Voix]

Bonjour,

Tout d'abords, je remercie toutes les personnes qui m'on aidé à de nombreuses reprises pour des codes.
Alors voila, comme le dit le titre, je souhaiterais savoir comment on procède pour créer des infobulles pour les groupes, indiquant par exemple un descriptif court du groupe, ainsi qu'une image centré assez longue.

Comment faire?

Merci d'avance : D

[SoraNoHime]

Bonjour


avez-vous déjà modifié votre index_body ?

Cordialement.

[La ptite Voix]

Bonjour,

Oui il a été modifié à plusieurs reprises, le voici donc au cas ou:

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'" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.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>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
        <br /><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><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">{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'" v="2" perms="{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 border="0" width="100%" class="qeel_start" cellpadding="2">
 
  <tr>
      <td width="100%" colspan="2" align="center"><img src="https://lh5.googleusercontent.com/-YoqyyIkLpOo/ToHLD8Bs_NI/AAAAAAAAAOU/HUE4-R6C624/quiestla3.png"><br>
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g1-administrateurs"><font color=#DBDBDB>ADMINISTRATEURS</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g2-moderateurs "><font color=#525050>MODOW'S</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g3-caste-de-l-aube  "><font color=#e6cc4a> CASTE DE L'AUBE</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g4-caste-de-la-source "><font color=#2080b3>CASTE DE LA SOURCE</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g5-chat-des-villes "><font color=#ba5959>CHATS DES VILLES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g6-solitaires "><font color=#8F6551>SOLITAIRES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g7-traitre  "><font color=#f2578d>TRAITRES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
                  <br><br>
            <div style="margin-left: 0%; margin-right: 0%;"></div>
      </td>
  </tr>
 
  <tr>
      <td width="50%">
        <div class="qeel_align"><span class="gensmall"><span id="messages">{TOTAL_POSTS}</span>
            <script type="text/javascript">
              document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Les  membres de Transcend ont posté un total de");
            </script>.
            <br>
                          <span id="users">{TOTAL_USERS}</span>.
 
                          <span id="newuser">{NEWEST_USER}</span>
            . Nous lui souhaitons bienvenue sur Transcend.
<br><br>
 
                          <span id="totaluser">{TOTAL_USERS_ONLINE}</span>
          <br>
                          <span id="connecteduser">{LOGGED_IN_USER_LIST}</span>
            <br><br>
                          <span id="record">{RECORD_USERS}</span>
        </span></div>
 
 
      </td>
     
      <td style="padding: 10px; vertical-align: top; background-color:#faf2e1; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin-top: 1px; margin-bottom: 1px; margin-right: 1px;" width="50%">
        <table><div style="background;>{L_CONNECTED_MEMBERS}</div><br>
            <div class="qeel_birth"><div style="background;>{L_WHOSBIRTHDAY_TODAY}
            {L_WHOSBIRTHDAY_WEEK}</div>
 
 
<div class="qeel_texte"><div class="texte_qui"><br><a href="http://www.alderia.biz" target="_blank"><img src="http://alderia.power-heberg.be/V8/Sous%20index/Mise/Mention.png"></a></div></div></div></table>
      </td>
  </tr>
 
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td align="center" width="100%" colspan="2" style="padding-top: 20px;">
        <span class="gensmall">Utilisateurs connectés sur la Chatbox: {CHATTERS_LIST}
 
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
 
            <!-- END switch_chatbox_popup -->
        </span>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</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>  </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 type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login --

Cordialement.

[SoraNoHime]

Voici un exemple sur un de vos groupes ^^

Il suffirait de remplacer :

Code:

 <span class="groupes"><a href="http://new-hope.forumgratuit.be/g1-administrateurs"><font color=#DBDBDB>ADMINISTRATEURS</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">

par :
<div class="bullegroup"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>

comme pour une infobulle normale. et d'en faire une pour chaque groupe...

A vous d'y insérer les informations.

puis dans la css ajoutez :

Code:

    .bullegroup{
    position: relative;
    z-index: 0;}

    .bullegroup:hover{
    background-color: transparent;
    z-index: 50;}

    .bullegroup span{
    position: absolute;
    background-color: #000000;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: #FFFFFF;}

    .bullegroup span img{
    border: 2px;
    padding: 5px;}

    .bullegroup:hover span{
    visibility: visible;
    top: 70px;
    left: 35px;
    width: 200px ;
    color:#FF0000;
    border: 2px solid #0000FF;}

à personnaliser.

Cordialement.

[La ptite Voix]

Bonjour,

Qu'entendez vous par remplacer? Dois-je les remplacer partiellement ou ajouter juste ajouter à la fin le code que vous me donnez?

merci d'avance

[SoraNoHime]

Les remplacer ^^ exemple pour un groupe selon les indication que vous avez données.

Code:

<div class="bullegroup">[color=red]NOM du GROUPE ou IMAGE UTILISEE POUR LE GROUPE QUI APPARAIT SUR LE QEEL[/color]
<span>[color=red]Descriptif du groupe avec VOTRE GRANDE IMAGE[/color]</span></div>

Et le faire pour chaque groupe. Par contre si vous désirez que les infobulles soient alignées, pensez à les mettre dans un tableau. Si vous n'y arrivez pas, créé déjà vos bulles, puis je vous expliquerai.

[La ptite Voix]

Bonjour,

Si je remplace ce que vous me dite, les couleurs et les effets que j'ai installé ne seront plus d'actualité non?
Regarder mon QEEL via le lien de mon forum pour mieux comprendre:

http://new-hope.forumgratuit.be/

Cordialement

[SoraNoHime]

Vous pouvez les refaire via la css des infobulles ^^

Quelle est la css qui correspond actuellement à votre effet pour les groupes ?

[La ptite Voix]

Le voici donc : )

Code:

a.forumlink{
        background-color: #6B6A6A;
        border-bottom: 5px double #262526;
        color:8ab8d9;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 1px;
        display:block;
        text-align: center;
        }
       
        .quote
        {
        background-color: #151415;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
        .spoiler
        {
        background-color: #393839;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
        .code
        {
        background-color: #393839;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
 
        a.forumlink:hover{
        font-family: georgia;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 1px;
        text-align: center;}
       
        body
        {
        background-color: #6B6A6A;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
        .bodylinewidth
        {
        width: 900px;
        }
       
 
 
 
 
 
 
       
        #i_logo
        {
        margin-top: -18px;
        margin-bottom: -115px;
        }
       
        .mainmenu
        {
        margin-right: -5px;
        }
       
        a.mainmenu
        {
        color: #bcbcbc;
        }
       
        a.mainmenu:hover
        {
        text-decoration: none !important;
        color: #e9f4e8;
        }
       
        #page-body
        {
        width: 893px;
        background-image: url(http://host.image.files.free.fr/host/4c4c6ff952740skin_04.png);
        background-repeat: repeat-y;
        margin-top: 80px;
        padding-bottom: 30px;
        }
       
        .forumline
        {
        max-width: 850px;
        margin: auto;
        background-color: #9e9e9e;
        border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #545454;
        padding: 4px;
        }
       
        table
        {
        max-width: 850px;
        margin: auto;
        }
       
        .cattitle
        {
        display: block;
        font-variant: small-caps;
        text-align: center;
        }
       
        th
        {
        text-align: left;
        font-variant: small-caps;
        }
       
        #page-footer
        {
        background-image: url(https://lh5.googleusercontent.com/-ot9Q4YFtedo/Tlec7KNx_rI/AAAAAAAAAA4/yCkf4ITWhNk/mercivisite.png);
        background-repeat: no-repeat;
        width: 978px;
        height: 200px;
        margin-bottom: -18px;
        background-position: top center;
        margin: auto;}
       
        #page-footer a
        {
        font-size: 10px;
        }
       
       
 
       
 
       
        .catcadre {
                    background-color : #757777;
                    -moz-border-radius: 20px ;
                    -webkit-border-radius:20px;
                    -border-radius:20px;
                    -khtml-border-radius:20px;
                    padding : 5px;
                }
       
        .dersuj {
            border : 5px solid #4c4c4c;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
            margin-right : 20px;
      }
        .newlock {
              background-color : 5px solid #4c4c4c;
              -moz-border-radius: 20px ;
              -webkit-border-radius:20px;
              -border-radius:20px;
              -khtml-border-radius:20px;
              padding : 5px;
              position  : relative;
                left : 10px;
          }
       
       
       
        .forumline {
            background: none repeat scroll 0 0 #5f5e60;
            border: 2px solid #484848;
            border-radius: 20px;
            padding: 5px;
        }
       
        a.forumlink {
        background-color:#68005;
        margin:15px;
        padding:10px;
        font-size:20px;
        letter-spacing:-1px;
        font-family:georgia;
        text-align:center;
        font-style:italic;
        text-shadow: 1px 1px 3px #344d54;
        color:#898989; }
       
 
       
 
        /*Puces invisibles*/
        ul, li{
        list-style: none;}
       
        /*qeel*/
        .qeel {
        border : 5px solid #262626;
        background-color : #5b5c5e;
        padding : 10px;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        }
       
        /*onglets*/
        .onglets {
        width:150px;
        padding : 5px;
        margin : 10px;
        border : 5px solid #262626;
        background-color : #888989;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        }
       
        /*partie ou apparaisent les stats*/
        .stats{
        padding : 5px;
        border : 5px solid #262626;
        background-color : #888989;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        }
       
        /*ne pas effacer*/
        .trans .row1 {
        background-color : transparent;
        }
        /*ne pas effacer*/
        #kaboum .row1 {
        background-color : transparent;
        }
       
        .stats{
        padding : 5px;
        border : 5px solid #262626;
        background-color : #888989;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        text-align : center;
        }
       
 
       
 
      /* PA */
       
        #accueil {
          width:90%;
          margin:auto;
          font-family:Narkisim;
          padding:20px 10px 10px 10px;
        }
       
        #accueil a {
          color:#c6c6c7;
        }
       
        .navigation, .bienvenue, .membresactifs {
          width:40%;
          margin:auto;
          margin-bottom:15px;
        }
       
        .navigationh2 {
          color:#a8a8a9;
          width:100%;
          margin:auto;
          text-align:center;
          font-style:italic;
          text-shadow:1px 1px 1px #000000;
          font-family:"Times New Roman", Times, serif;
          font-size:30px;
        }
       
        .navigationdesc {
          color:#808080;
          width:100%;
          margin:auto;
          text-align:center;
          margin:7px 0px 15px 0px;
          font-size:13px;
          text-transform:uppercase;
          text-shadow:1px 1px 1px #888888;
          letter-spacing:0.4em;
        }
       
        .navigationtexte {
          font-family:Georgia, "Times New Roman", Times, serif;
          text-transform:uppercase;
        }
       
        .navigationlien {
          width:100%;
          background-color:#808080;
          text-align:center;
          border-right:4px solid #c3c3c3;
          border-bottom:1px solid #c8c8c8;
          border-left:4px solid #b4b4b4
          -moz-border-radius:5px;
          display:block;
          margin-top:1px;
        }
       
        .navigationlien:hover {
          width:100%;
          background-color:#8c8d8d;
          text-align:center;
          border-right:4px solid #6b6d6e;
          border-bottom:1px solid #767676;
          border-left:4px solid #6e6f6f;
          -moz-border-radius:5px;
          display:block;
        }
       
        .commentaire {
          font-size:10px;
          font-style:italic;
          text-transform:none;
        }
       
        .bienvenueh2 {
          color:#d7d7d7;
          width:100%;
          margin:auto;
          text-align:center;
          font-style:italic;
          text-shadow:1px 1px 1px #000000;
          font-family:"Times New Roman", Times, serif;
          font-size:30px;
        }
       
        .bienvenuedesc {
          color:#a9a9a9;
          width:100%;
          margin:auto;
          text-align:center;
          margin:0px 0px 15px 30px;
          font-size:14px;
          text-transform:uppercase;
          text-shadow:1px 1px 1px #888888;
          letter-spacing:0.4em;
        }
       
        .partenaires, .membresactifs, .description, .notrelogo {
          width:45%;
          margin:auto;
          float:left;
          margin-top:35px;
        }
       
        .notrelogo {
          clear:both;
        }
       
        .partenairesh2, .avisiterh2, .membresactifsh2, .staffh2, .descriptionh2, .nouvellesh2, .notrelogoh2 {
          color:#c3c3c5;
          width:100%;
          margin:auto;
          margin-left:15px;
          font-size:18px;
          text-shadow:0px 0px 4px #888888;
          letter-spacing:2px;
          font-style:italic;
          font-family:"Times New Roman", Times, serif;
          text-transform:uppercase;
          text-align:left;
        }
       
        .partenairesh2:before, .avisiterh2:before, .membresactifsh2:before, .staffh2:before, .descriptionh2:before, .nouvellesh2:before, .notrelogoh2:before {
          content:"» ";
        }
       
        .partenairesh2:after, .avisiterh2:after, .membresactifsh2:after, .staffh2:after, .descriptionh2:after, .nouvellesh2:after, .notrelogoh2:after {
          content:" «";
        }
       
        .partenairesdesc, .avisiterdesc, .membresactifsdesc, .staffdesc, .descriptiondesc, .nouvellesdesc, .notrelogodesc {
          color:#c3c3c5;
          width:100%;
          margin:auto;
          margin:0px 0px 5px 40px;
          font-size:14px;
          text-shadow:1px 1px 1px #888888;
          letter-spacing:1px;
          font-style:italic;
          font-family:"Times New Roman", Times, serif;
          text-transform:lowercase;
          text-align:left;
        }
       
        .partenairestexte, .avisitertexte, .membresactifstexte, .stafftexte, .descriptiontexte, .nouvellestexte, .notrelogotexte {
          border:1px solid #7b7b7b;
          background-color:#5f5e5e;
          padding:2px;
          box-shadow:2px 2px 2px #000000;
          -moz-box-shadow:2px 2px 2px #000000;
          -webkit-box-shadow:2px 2px 2px #000000;
          text-align:left;
        }
       
        .avisiter, .staff, .nouvelles, .nepascopier {
          width:45%;
          margin:auto;
          float:right;
          margin-top:35px;
        }
       
        .membresactifs {
          clear:both;
        }
       
        .descriptionh3 {
          font-weight:bold;
          font-family:"Times New Roman", Times, serif;
          font-style:italic;
          letter-spacing:1px;
          color:#b2b2b2;
          font-size:12px;
          margin:0px 0px 0px 15px;
        }
       
        .infobulle {
            position:relative;
            display:inline;
            margin-right:5px;
        }
       
        .infobulle span {
          display:none;
        }
       
        .infobulle:hover {
          background:none;
          z-index: 999;
        }
       
        .infobulle:hover span {
          display:inline;
          position:absolute;
          white-space:nowrap;
          top:5px;
          left:15px;
          border:1px solid #acacad;
          background-color:#878787;
          padding:2px;
          box-shadow:2px 2px 2px #000000;
          -moz-box-shadow:2px 2px 2px #000000;
          -webkit-box-shadow:2px 2px 2px #000000;
        }
       
        .nepascopier {
          text-align:right;
          font-weight:bold;
          font-family:"Times New Roman", Times, serif;
          text-shadow:0px 0px 4px #888888;
          color:#b4b4b4;
          float:right;
          margin-top:85px;
        }
       
 
        /* ------------------------------------ {QUI EST EN LIGNE} --------------------------------------------------------------------------------------------------------- */
        .qeel_start
        {
        padding: 8px;
        background-color: #696868;
        border: 2px solid #1f1f1e;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        }
       
        .groupes
        {
        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 1px !important;
        text-shadow: #040404 1px 1px 1px;
        background-color: #aaaaaa;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 6px;
        padding-right: 6px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        }
       
        .qeel_align
        {
        background-color:#787877;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        padding: 10px;
        margin-right: 5px;
        vertical-align: top;
        }
       
        .qeel_birth
        {
        padding: 0px;
        background-color:#787877;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        }
       
        .qeel_texte
        {
        text-align: justify;
        width: 330px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
       
        .texte_qui
        {
        padding-left: 0px;
        padding-right: 0px;
        }
       
 
a { text-decoration:none; }
a:hover { text-decoration: none!important; }

Cordialement.

[SoraNoHime]

Code:

                .groupes
                {
                text-transform: uppercase;
                font-size: 10px;
                font-weight: bold;
                letter-spacing: 1px !important;
                text-shadow: #040404 1px 1px 1px;
                background-color: #aaaaaa;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-left: 6px;
                padding-right: 6px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                }

tout ce qui se trouve ici entre { et } mettez le dans .bullegroup, ainsi vous garderez l'effet sur vos textes.

Cordialement.

[La ptite Voix]

Bonsoir,

Je vais parraitre un peu bête de vous poser une question aussi bête mais je ne je comprend pas vraiment les mesures à prendre :S
Dois-je donc faire tout cela dans le CSS ou bien dans l'index_Body?


Cordialement

[SoraNoHime]

Donc on reprend du début. ^^

Dans votre css mettez :

.bullegroup{
position: relative;
z-index: 0;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px !important;
text-shadow: #040404 1px 1px 1px;
background-color: #aaaaaa;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;}

.bullegroup:hover{
background-color: transparent;
z-index: 50;}

.bullegroup span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.bullegroup span img{
border: 2px;
padding: 5px;}

.bullegroup:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

où vous pourrez par contre personnaliser ce qui est en rouge.

enfin dans l'index_body à la place de

Code:

<span class="groupes"><a href="http://new-hope.forumgratuit.be/g1-administrateurs"><font color=#DBDBDB>ADMINISTRATEURS</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">

pour le groupe administrateur

mettez :

<div class="bullegroup">NOM du GROUPE ou IMAGE UTILISEE POUR LE GROUPE QUI APPARAIT SUR LE QEEL
<span>Descriptif du groupe avec VOTRE GRANDE IMAGE</span></div>

et il faudra le faire pour chacun de vos groupes. Une fois cela fait, donnez moi votre nouvelle index_body s'il reste des problèmes.

Cordialement.

[La ptite Voix]

Bonjour,

J'ai fais un test avec le premier groupe, mais cela donne un résultat assez étrange, voici une capture de mon écran:

https://i.servimg.com/u/f44/11/34/24/67/captur10.png

Dois-je mettre l'image du groupe avant en mettant les balises de code [/img] ?

merci d'avance

[SoraNoHime]

Si vous désirez mettre une image ce n'est pas du bbcode qu'il faudra mettre mais du html soit

Code:

<img src="adresse de l'image" />

faites vos infobulles complètes et renvoyez moi le code et de l'index_body et de la css. Je verrai ensuite ce qui ne va pas.

[Automne]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[La ptite Voix]

Bonjour,

J'ai tout enlevé car ça bloquait complètement le forum, et le QEEL qui allait avec. Peut-on procéder en recommençant à Zéro? Je vous envois mon CSS de base et mon template 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">
  <!-- 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'" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.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>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
        <br /><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><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">{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'" v="2" perms="{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 border="0" width="100%" class="qeel_start" cellpadding="2">
 
  <tr>
      <td width="100%" colspan="2" align="center"><img src="https://lh5.googleusercontent.com/-YoqyyIkLpOo/ToHLD8Bs_NI/AAAAAAAAAOU/HUE4-R6C624/quiestla3.png"><br>
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g1-administrateurs"><font color=#DBDBDB>ADMINISTRATEURS</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g2-moderateurs "><font color=#525050>MODOW'S</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g3-caste-de-l-aube  "><font color=#e6cc4a> CASTE DE L'AUBE</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g4-caste-de-la-source "><font color=#2080b3>CASTE DE LA SOURCE</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g5-chat-des-villes "><font color=#ba5959>CHATS DES VILLES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g6-solitaires "><font color=#8F6551>SOLITAIRES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g7-traitre  "><font color=#f2578d>TRAITRES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
                  <br><br>
            <div style="margin-left: 0%; margin-right: 0%;"></div>
      </td>
  </tr>
 
  <tr>
      <td width="50%">
        <div class="qeel_align"><span class="gensmall"><span id="messages">{TOTAL_POSTS}</span>
            <script type="text/javascript">
              document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Les  membres de Transcend ont posté un total de");
            </script>.
            <br>
                          <span id="users">{TOTAL_USERS}</span>.
 
                          <span id="newuser">{NEWEST_USER}</span>
            . Nous lui souhaitons bienvenue sur Transcend.
<br><br>
 
                          <span id="totaluser">{TOTAL_USERS_ONLINE}</span>
          <br>
                          <span id="connecteduser">{LOGGED_IN_USER_LIST}</span>
            <br><br>
                          <span id="record">{RECORD_USERS}</span>
        </span></div>
 
 
      </td>
     
      <td style="padding: 10px; vertical-align: top; background-color:#faf2e1; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin-top: 1px; margin-bottom: 1px; margin-right: 1px;" width="50%">
        <table><div style="background;>{L_CONNECTED_MEMBERS}</div><br>
            <div class="qeel_birth"><div style="background;>{L_WHOSBIRTHDAY_TODAY}
            {L_WHOSBIRTHDAY_WEEK}</div>
 
 
<div class="qeel_texte"><div class="texte_qui"><br><a href="http://www.alderia.biz" target="_blank"><img src="http://alderia.power-heberg.be/V8/Sous%20index/Mise/Mention.png"></a></div></div></div></table>
      </td>
  </tr>
 
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td align="center" width="100%" colspan="2" style="padding-top: 20px;">
        <span class="gensmall">Utilisateurs connectés sur la Chatbox: {CHATTERS_LIST}
 
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
 
            <!-- END switch_chatbox_popup -->
        </span>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</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>  </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 type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Et mon CSS:

Code:

a.forumlink{
        background-color: #6B6A6A;
        border-bottom: 5px double #262526;
        color:8ab8d9;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 1px;
        display:block;
        text-align: center;
        }
       
        .quote
        {
        background-color: #151415;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
        .spoiler
        {
        background-color: #393839;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
        .code
        {
        background-color: #393839;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
 
        a.forumlink:hover{
        font-family: georgia;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 1px;
        text-align: center;}
       
        body
        {
        background-color: #6B6A6A;
        background-repeat: repeat-y;
        background-position: top center;
        }
       
        .bodylinewidth
        {
        width: 900px;
        }
       
 
 
 
 
 
 
       
        #i_logo
        {
        margin-top: -18px;
        margin-bottom: -115px;
        }
       
        .mainmenu
        {
        margin-right: -5px;
        }
       
        a.mainmenu
        {
        color: #bcbcbc;
        }
       
        a.mainmenu:hover
        {
        text-decoration: none !important;
        color: #e9f4e8;
        }
       
        #page-body
        {
        width: 893px;
        background-image: url(http://host.image.files.free.fr/host/4c4c6ff952740skin_04.png);
        background-repeat: repeat-y;
        margin-top: 80px;
        padding-bottom: 30px;
        }
       
        .forumline
        {
        max-width: 850px;
        margin: auto;
        background-color: #9e9e9e;
        border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #545454;
        padding: 4px;
        }
       
        table
        {
        max-width: 850px;
        margin: auto;
        }
       
        .cattitle
        {
        display: block;
        font-variant: small-caps;
        text-align: center;
        }
       
        th
        {
        text-align: left;
        font-variant: small-caps;
        }
       
        #page-footer
        {
        background-image: url(https://lh5.googleusercontent.com/-ot9Q4YFtedo/Tlec7KNx_rI/AAAAAAAAAA4/yCkf4ITWhNk/mercivisite.png);
        background-repeat: no-repeat;
        width: 978px;
        height: 200px;
        margin-bottom: -18px;
        background-position: top center;
        margin: auto;}
       
        #page-footer a
        {
        font-size: 10px;
        }
       
       
 
       
 
       
        .catcadre {
                    background-color : #757777;
                    -moz-border-radius: 20px ;
                    -webkit-border-radius:20px;
                    -border-radius:20px;
                    -khtml-border-radius:20px;
                    padding : 5px;
                }
       
        .dersuj {
            border : 5px solid #4c4c4c;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
            margin-right : 20px;
      }
        .newlock {
              background-color : 5px solid #4c4c4c;
              -moz-border-radius: 20px ;
              -webkit-border-radius:20px;
              -border-radius:20px;
              -khtml-border-radius:20px;
              padding : 5px;
              position  : relative;
                left : 10px;
          }
       
       
       
        .forumline {
            background: none repeat scroll 0 0 #5f5e60;
            border: 2px solid #484848;
            border-radius: 20px;
            padding: 5px;
        }
       
        a.forumlink {
        background-color:#68005;
        margin:15px;
        padding:10px;
        font-size:20px;
        letter-spacing:-1px;
        font-family:georgia;
        text-align:center;
        font-style:italic;
        text-shadow: 1px 1px 3px #344d54;
        color:#898989; }
       
 
       
 
        /*Puces invisibles*/
        ul, li{
        list-style: none;}
       
        /*qeel*/
        .qeel {
        border : 5px solid #262626;
        background-color : #5b5c5e;
        padding : 10px;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        }
       
        /*onglets*/
        .onglets {
        width:150px;
        padding : 5px;
        margin : 10px;
        border : 5px solid #262626;
        background-color : #888989;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        }
       
        /*partie ou apparaisent les stats*/
        .stats{
        padding : 5px;
        border : 5px solid #262626;
        background-color : #888989;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        }
       
        /*ne pas effacer*/
        .trans .row1 {
        background-color : transparent;
        }
        /*ne pas effacer*/
        #kaboum .row1 {
        background-color : transparent;
        }
       
        .stats{
        padding : 5px;
        border : 5px solid #262626;
        background-color : #888989;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        text-align : center;
        }
       
 
       
 
      /* PA */
       
        #accueil {
          width:90%;
          margin:auto;
          font-family:Narkisim;
          padding:20px 10px 10px 10px;
        }
       
        #accueil a {
          color:#c6c6c7;
        }
       
        .navigation, .bienvenue, .membresactifs {
          width:40%;
          margin:auto;
          margin-bottom:15px;
        }
       
        .navigationh2 {
          color:#a8a8a9;
          width:100%;
          margin:auto;
          text-align:center;
          font-style:italic;
          text-shadow:1px 1px 1px #000000;
          font-family:"Times New Roman", Times, serif;
          font-size:30px;
        }
       
        .navigationdesc {
          color:#808080;
          width:100%;
          margin:auto;
          text-align:center;
          margin:7px 0px 15px 0px;
          font-size:13px;
          text-transform:uppercase;
          text-shadow:1px 1px 1px #888888;
          letter-spacing:0.4em;
        }
       
        .navigationtexte {
          font-family:Georgia, "Times New Roman", Times, serif;
          text-transform:uppercase;
        }
       
        .navigationlien {
          width:100%;
          background-color:#808080;
          text-align:center;
          border-right:4px solid #c3c3c3;
          border-bottom:1px solid #c8c8c8;
          border-left:4px solid #b4b4b4
          -moz-border-radius:5px;
          display:block;
          margin-top:1px;
        }
       
        .navigationlien:hover {
          width:100%;
          background-color:#8c8d8d;
          text-align:center;
          border-right:4px solid #6b6d6e;
          border-bottom:1px solid #767676;
          border-left:4px solid #6e6f6f;
          -moz-border-radius:5px;
          display:block;
        }
       
        .commentaire {
          font-size:10px;
          font-style:italic;
          text-transform:none;
        }
       
        .bienvenueh2 {
          color:#d7d7d7;
          width:100%;
          margin:auto;
          text-align:center;
          font-style:italic;
          text-shadow:1px 1px 1px #000000;
          font-family:"Times New Roman", Times, serif;
          font-size:30px;
        }
       
        .bienvenuedesc {
          color:#a9a9a9;
          width:100%;
          margin:auto;
          text-align:center;
          margin:0px 0px 15px 30px;
          font-size:14px;
          text-transform:uppercase;
          text-shadow:1px 1px 1px #888888;
          letter-spacing:0.4em;
        }
       
        .partenaires, .membresactifs, .description, .notrelogo {
          width:45%;
          margin:auto;
          float:left;
          margin-top:35px;
        }
       
        .notrelogo {
          clear:both;
        }
       
        .partenairesh2, .avisiterh2, .membresactifsh2, .staffh2, .descriptionh2, .nouvellesh2, .notrelogoh2 {
          color:#c3c3c5;
          width:100%;
          margin:auto;
          margin-left:15px;
          font-size:18px;
          text-shadow:0px 0px 4px #888888;
          letter-spacing:2px;
          font-style:italic;
          font-family:"Times New Roman", Times, serif;
          text-transform:uppercase;
          text-align:left;
        }
       
        .partenairesh2:before, .avisiterh2:before, .membresactifsh2:before, .staffh2:before, .descriptionh2:before, .nouvellesh2:before, .notrelogoh2:before {
          content:"» ";
        }
       
        .partenairesh2:after, .avisiterh2:after, .membresactifsh2:after, .staffh2:after, .descriptionh2:after, .nouvellesh2:after, .notrelogoh2:after {
          content:" «";
        }
       
        .partenairesdesc, .avisiterdesc, .membresactifsdesc, .staffdesc, .descriptiondesc, .nouvellesdesc, .notrelogodesc {
          color:#c3c3c5;
          width:100%;
          margin:auto;
          margin:0px 0px 5px 40px;
          font-size:14px;
          text-shadow:1px 1px 1px #888888;
          letter-spacing:1px;
          font-style:italic;
          font-family:"Times New Roman", Times, serif;
          text-transform:lowercase;
          text-align:left;
        }
       
        .partenairestexte, .avisitertexte, .membresactifstexte, .stafftexte, .descriptiontexte, .nouvellestexte, .notrelogotexte {
          border:1px solid #7b7b7b;
          background-color:#5f5e5e;
          padding:2px;
          box-shadow:2px 2px 2px #000000;
          -moz-box-shadow:2px 2px 2px #000000;
          -webkit-box-shadow:2px 2px 2px #000000;
          text-align:left;
        }
       
        .avisiter, .staff, .nouvelles, .nepascopier {
          width:45%;
          margin:auto;
          float:right;
          margin-top:35px;
        }
       
        .membresactifs {
          clear:both;
        }
       
        .descriptionh3 {
          font-weight:bold;
          font-family:"Times New Roman", Times, serif;
          font-style:italic;
          letter-spacing:1px;
          color:#b2b2b2;
          font-size:12px;
          margin:0px 0px 0px 15px;
        }
       
        .infobulle {
            position:relative;
            display:inline;
            margin-right:5px;
        }
       
        .infobulle span {
          display:none;
        }
       
        .infobulle:hover {
          background:none;
          z-index: 999;
        }
       
        .infobulle:hover span {
          display:inline;
          position:absolute;
          white-space:nowrap;
          top:5px;
          left:15px;
          border:1px solid #acacad;
          background-color:#878787;
          padding:2px;
          box-shadow:2px 2px 2px #000000;
          -moz-box-shadow:2px 2px 2px #000000;
          -webkit-box-shadow:2px 2px 2px #000000;
        }
       
        .nepascopier {
          text-align:right;
          font-weight:bold;
          font-family:"Times New Roman", Times, serif;
          text-shadow:0px 0px 4px #888888;
          color:#b4b4b4;
          float:right;
          margin-top:85px;
        }
       
 
        /* ------------------------------------ {QUI EST EN LIGNE} --------------------------------------------------------------------------------------------------------- */
        .qeel_start
        {
        padding: 8px;
        background-color: #696868;
        border: 2px solid #1f1f1e;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        }
       
        .groupes
        {
        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 1px !important;
        text-shadow: #040404 1px 1px 1px;
        background-color: #aaaaaa;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 6px;
        padding-right: 6px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        }
       
        .qeel_align
        {
        background-color:#787877;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        padding: 10px;
        margin-right: 5px;
        vertical-align: top;
        }
       
        .qeel_birth
        {
        padding: 0px;
        background-color:#787877;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        }
       
        .qeel_texte
        {
        text-align: justify;
        width: 330px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
       
        .texte_qui
        {
        padding-left: 0px;
        padding-right: 0px;
        }
       
 
a { text-decoration:none; }
a:hover { text-decoration: none!important; }

----------------------------------groupes-------------------------------

.bullegroup{
position: relative;
z-index: 0;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px !important;
text-shadow: #040404 1px 1px 1px;
background-color: #aaaaaa;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;}

.bullegroup:hover{
background-color: transparent;
z-index: 50;}

.bullegroup span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.bullegroup span img{
border: 2px;
padding: 5px;}

.bullegroup:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

[Roxy.]

Bonjour,
Avez-vous essayez de mettre les codes donner par Macema dans votre groupcp_info_body qui se trouve dans les templates groupes ?

Cordialement.

[La ptite Voix]

Bonjour,

je ne comprend pas ce que vous voulez dire par groupe info body...

[Roxy.]

groupcp_info_body est un template qui sert à modifier la description des groupes. Essayez donc de mettre le code que Macema vous as donnez pour l'infobulle.

[La ptite Voix]

Ou dois-je le mettre exactement?
Je ne trouve pas ce template x)

[Roxy.]

Allez dans
Pa > Affichage > Groupes (bas de page) > groupcp_info_body.
Puis s'il vous plaît, montrez moi le code.
Cordialement.

[La ptite Voix]

Le voici mais il est par défaut étant donné que je ne savais même pas son existence xD:

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="4">
   <form action="{S_GROUPCP_ACTION}" method="post">
      <tr>
         <th class="thHead" colspan="7" height="25"><h1 class="pagetitle">{L_GROUP_INFORMATION}<h1></th>
      </tr>
      <tr>
         <td class="row1" width="20%"><span class="gen">{L_GROUP_NAME}:</span></td>
         <td class="row2"><span class="gen"><strong>{GROUP_NAME}</strong></span></td>
      </tr>
      <tr>
         <td class="row1" width="20%"><span class="gen">{L_GROUP_DESC}:</span></td>
         <td class="row2"><span class="gen">{GROUP_DESC}</span></td>
      </tr>
      <tr>
         <td class="row1" width="20%"><span class="gen">{L_GROUP_MEMBERSHIP}:</span></td>
         <td class="row2">
            <span class="gen">{GROUP_DETAILS} 
            <!-- BEGIN switch_subscribe_group_input -->
               <input class="mainoption" type="submit" name="joingroup" value="{L_JOIN_GROUP}" />
            <!-- END switch_subscribe_group_input -->
            <!-- BEGIN switch_unsubscribe_group_input -->
               <input class="mainoption" type="submit" name="unsub" value="{L_UNSUBSCRIBE_GROUP}" />
            <!-- END switch_unsubscribe_group_input -->
            </span>
         </td>
      </tr>
      <!-- BEGIN switch_mod_option -->
      <tr>
         <td class="row1" width="20%"><span class="gen">{L_GROUP_TYPE}:</span></td>
         <td class="row2">
            <span class="gen"><input type="radio" name="group_type" value="{S_GROUP_OPEN_TYPE}" {S_GROUP_OPEN_CHECKED}{S_GROUP_OPEN_DISABLED} />{L_GROUP_OPEN} <input type="radio" name="group_type" value="{S_GROUP_CLOSED_TYPE}" {S_GROUP_CLOSED_CHECKED} /> {L_GROUP_CLOSED} <input type="radio" name="group_type" value="{S_GROUP_HIDDEN_TYPE}" {S_GROUP_HIDDEN_CHECKED} />{L_GROUP_HIDDEN} <input class="mainoption" type="submit" name="groupstatus" value="{L_UPDATE}" /></span>
         </td>
      </tr>
      <!-- END switch_mod_option -->
      {S_HIDDEN_FIELDS}
   </form>
</table>
<form action="{S_GROUPCP_ACTION}" method="post" name="post">
   <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="4">
      <tr>
         <th class="thCornerL" height="25" nowrap="nowrap">{L_PM}</th>
         <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
         <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
         <th class="thTop" nowrap="nowrap">{L_FROM}</th>
         <th class="thTop" nowrap="nowrap">{L_EMAIL}</th>
         <th class="thTop" nowrap="nowrap">{L_WEBSITE}</th>
         <th class="thCornerR" nowrap="nowrap">{L_SELECT}</th>
      </tr>
      <tr>
         <td class="catSides" colspan="8" height="28"><span class="cattitle">{L_GROUP_MODERATOR}</span></td>
      </tr>
      <tr>
         <td class="row1" align="center">{MOD_PM_IMG}</td>
         <td class="row1" align="center"><span class="gen"><a class="gen" href="{U_MOD_VIEWPROFILE}">{MOD_USERNAME}</a></span></td>
         <td class="row1" align="center" valign="middle"><span class="gen">{MOD_POSTS}</span></td>
         <td class="row1" align="center" valign="middle"><span class="gen">{MOD_FROM}</span></td>
         <td class="row1" align="center" valign="middle"><span class="gen">{MOD_EMAIL_IMG}</span></td>
         <td class="row1" align="center">{MOD_WWW_IMG}</td>
         <td class="row1" align="center">&nbsp</td>
      </tr>
      <tr>
         <td class="catSides" colspan="8" height="28"><span class="cattitle">{L_GROUP_MEMBERS}</span></td>
      </tr>
      <!-- BEGIN member_row -->
         <tr>
            <td class="{member_row.ROW_CLASS}" align="center">{member_row.PM_IMG}</td>
            <td class="{member_row.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{member_row.U_VIEWPROFILE}">{member_row.USERNAME}</a></span></td>
            <td class="{member_row.ROW_CLASS}" align="center"><span class="gen">{member_row.POSTS}</span></td>
            <td class="{member_row.ROW_CLASS}" align="center"><span class="gen">{member_row.FROM} </span></td>
            <td class="{member_row.ROW_CLASS}" align="center" valign="middle"><span class="gen">{member_row.EMAIL_IMG}</span></td>
            <td class="{member_row.ROW_CLASS}" align="center">{member_row.WWW_IMG}</td>
            <td class="{member_row.ROW_CLASS}" align="center"><!-- BEGIN switch_mod_option --><input type="checkbox" name="members[]" value="{member_row.USER_ID}"><!-- END switch_mod_option --></td>
         </tr>
      <!-- END member_row -->
      <!-- BEGIN switch_no_members -->
         <tr>
            <td class="row1" colspan="7" align="center"><span class="gen">{L_NO_MEMBERS}</span></td>
         </tr>
      <!-- END switch_no_members -->
      <!-- BEGIN switch_hidden_group -->
         <tr>
            <td class="row1" colspan="7" align="center"><span class="gen">{L_HIDDEN_MEMBERS}</span></td>
         </tr>
      <!-- END switch_hidden_group -->
      <!-- BEGIN switch_mod_option -->
         <!-- BEGIN switch_grp_admin -->
            <tr>
               <td class="row2" colspan="8" align="left">
                  <strong><span class="gen">{L_ADMIN_GRP_EXPLAIN}</span></strong>
               </td>
            </tr>
         <!-- END switch_grp_admin -->
         <tr>
            <td class="catBottom" colspan="8" align="right">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                     <td align="left" valign="top">
                        <span class="genmed"><input class="post" type="text" id="username" name="username" size="20" maxlength="25" /> <input class="mainoption" type="submit" name="add" value="{L_ADD_MEMBER}" /> <input type="button" class="liteoption" id="find_user" value="{L_FIND_USERNAME}" /></span>
                     </td>
                     <td><span class="cattitle"><input class="mainoption" type="submit" name="remove" value="{L_REMOVE_SELECTED}" /></span></td>
                  </tr>
               </table>
            </td>
         </tr>
      <!-- END switch_mod_option -->
   </table>
   <table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
      <tr>
         <td align="left" valign="top"><span class="nav">{PAGE_NUMBER}</span></td>
         <td align="right" valign="top"><span class="nav">{PAGINATION}</span></td>
      </tr>
      <tr>
         <td>
            {PENDING_USER_BOX}{S_HIDDEN_FIELDS}
         </td>
      </tr>
   </table>
</form>
<table width="100%" border="0" cellspacing="2" align="center">
   <tr>
      <td align="right" valign="top">{JUMPBOX}</td>
   </tr>
</table>

<!-- BEGIN switch_mod_option -->
<div id="find_username" class="jqmWindow"></div>

<script src="{JS_DIR}jquery/jqmodal/jqmodal.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      function find_username(fieldname) {
         $.get('{U_SEARCH_USER}&fieldname=' + fieldname + '&time=' + timestamp(), '',
            function(data){
               $('#find_username').html(data).jqmShow();
               $('.jqmOverlay').bgiframe();
               $('#find_username').bgiframe();
            });
         return false;
      }
      $('#find_user').click(function(){
         return find_username('username');
      });
      $('#find_username').jqm({toTop: true});
   });
//]]>
</script>
<!-- END switch_mod_option -->

cordialement

[Roxy.]

Alors,
Que désirez vous mettre en infobulle ?
Un texte et une image ?
Donnez moi le texte et l'image et on fera pas à pas

[SoraNoHime]

Roxy c'est pour des infobulles dans le qeel, pas pour quand on entre dans les groupes.... Merci à l'avenir de lire complétement le sujet pour savoir ce dont on parle.

Petite Voix, remplacez dans votre INDEX_BODY :

Code:

<span class="groupes"><a href="http://new-hope.forumgratuit.be/g1-administrateurs"><font color=#DBDBDB>ADMINISTRATEURS</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g2-moderateurs "><font color=#525050>MODOW'S</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g3-caste-de-l-aube  "><font color=#e6cc4a> CASTE DE L'AUBE</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g4-caste-de-la-source "><font color=#2080b3>CASTE DE LA SOURCE</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g5-chat-des-villes "><font color=#ba5959>CHATS DES VILLES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g6-solitaires "><font color=#8F6551>SOLITAIRES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">
        <span class="groupes"><a href="http://new-hope.forumgratuit.be/g7-traitre  "><font color=#f2578d>TRAITRES</font></a></span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">

par

Code:

<table width="100%"><tr><td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g1-administrateurs"><font color=#DBDBDB>ADMINISTRATEURS</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td>
        <td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g2-moderateurs "><font color=#525050>MODOW'S</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td>
        <td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g3-caste-de-l-aube  "><font color=#e6cc4a> CASTE DE L'AUBE</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td>
        <td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g4-caste-de-la-source "><font color=#2080b3>CASTE DE LA SOURCE</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td>
        <td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g5-chat-des-villes "><font color=#ba5959>CHATS DES VILLES</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td>
        <td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g6-solitaires "><font color=#8F6551>SOLITAIRES</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td>
        <td><div class="bullegroup"><a href="http://new-hope.forumgratuit.be/g7-traitre  "><font color=#f2578d>TRAITRES</font></a><span><img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif"></span></div></td></tr></table>

et dans la css mettez :

.bullegroup{
position: relative;
z-index: 0;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px !important;
text-shadow: #040404 1px 1px 1px;
background-color: #aaaaaa;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;}

.bullegroup:hover{
background-color: transparent;
z-index: 50;}

.bullegroup span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.bullegroup span img{
border: 2px;
padding: 5px;}

.bullegroup:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

où vous pourrez par contre personnaliser ce qui est en rouge.

[La ptite Voix]

Voila le résultat que vous pourrez voir sur le forum:

[url]://new-hope.forumgratuit.be/[/url]

je ne vois pas ou mettre les textes et les images par contre : S

[SoraNoHime]

J'ai édité mon message, j'avais un problème de balises bbcode, d'où le [/code] qui apparait dans votre qeel. Dans tout cela, remplacez les

Code:

<img src="http://img8.imageshack.us/img8/4075/r8ig6djpg.gif">

par vos textes et images de chaques groupes.

Ne les ayant pas, je ne pouvais vous les intégré.

COrdialement.

[Automne]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif