Rappel du premier message :

Qeel Pink & Gray

Suite à une demande de Javarakita voici un Qeel Pink & Gray.

Je précise que l'arrière plan beige correspond à mon forum.



Et le code :
Il faut remplacer cette partie du template index-body :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
  </tr>
  <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
  </tr>
  <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
  </tr>
  {L_CONNECTED_MEMBERS}
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}
  <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
  </tr>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
        </span>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Par celle-ci :

Code:

<!-- BEGIN disable_viewonline -->
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'><div id="qeel_fond"><div id="qeel_img"></div><div class="titre_qeel">Que se passe-t-il à Canberra ?</div>
<table id="qeel_position">
  <tr>
    <td class="qeel_colonne1"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/messages/,"aventures se sont passées à Canberra.");
document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/," ");</script></span><br />
      <span id="nb_membres">{TOTAL_USERS}<script type="text/javascript">document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/Nous avons/,"Il y a eu");
document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membres enregistrés/,"déménagements depuis le début.");
document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membre enregistré/,"déménagement depuis le début.");</script></span><br />
      <span id="new_user">{NEWEST_USER}<script type="text/javascript">document.getElementById('new_user').innerHTML=document.getElementById('new_user').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le petit dernier à avoir emménager est");</script></span><br /><br/>
    <span id="tot_user">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Il y a en tout/,"Il y a");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/utilisateurs en ligne/,"personnes près de Canberra en ce moment même");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/utilisateur en ligne/,"personne près de Canberra en ce moment même");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Enregistrés/,"habitants");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Enregistré/,"habitant");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invisibles/,"inconnus au bataillon");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invisible/,"inconnu au bataillon");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invités/,"touristes qui hésitent à s'installer")
 document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invité/,"touriste qui hésite à s'installer");</script></span><br />
      {RECORD_USERS}<br />
      <br />
      <span id="logged">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('logged').innerHTML=document.getElementById('logged').innerHTML.replace(/Utilisateurs enregistrés :/,"Les actifs présents sont");</script></span><br />
</td>
<td width="20px;"></td>
<td class="qeel_colonne2">
<script type="text/javascript">
        //<!--
                function change_onglet(bouya)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
                        anc_onglet = bouya;
                }
        //-->
</script><span class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Kapou</span><span class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Bibiche</span><span class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Yankee</span>
<div class="contenu_onglet" id="contenu_onglet_un">
    Contenu du 1er onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_deux">
    Contenu du 2ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_trois">
    Contenu du 3ième onglet
</div><script type="text/javascript">
        //<!--
                var anc_onglet = 'un';
                change_onglet(anc_onglet);
        //-->
  </script>
</td>
<td width="20px;"></td>
    <td class="qeel_colonne1"><table class="transparent">{L_CONNECTED_MEMBERS}
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}</table>
</td>
  </tr>
</table>
</div>
<!-- END disable_viewonline -->

CSS :

Code:

.titre_qeel {
font-size:40px;
color:crimson;
text-align:center;
display:block;
margin-top:-30px;
font-family: 'Playball', cursive;
}
.transparent .row1 {
background-color: transparent;
}
.transparent .gensmall {
font-size:12px;
}
/*onglets*/
.onglet {
background:white;
padding:2px;
margin-right:3px;
}

.onglet_0 {
background:whitesmoke;
}

.onglet_1 {
background:white;
}

#onglet_un {
color:cyan;
}

#onglet_deux {
color:pink;
}

#onglet_trois {
color:silver;
}

.contenu_onglet {
display:none;
padding:10px;
height:120px;
text-align:justify;
}

#contenu_onglet_un {
font-size:13px;
}

#contenu_onglet_deux{
font-size:13px;
}

#contenu_onglet_trois {
font-size:13px;
}
/*fin onglets*/

#qeel_fond {
background:whitesmoke;
}

#qeel_img {
height:63px;
background-image:url(http://upz.fr/Ueim1.png);
}

#qeel_position {
position: relative;
padding:10px;
}

.qeel_colonne1 {
font-size: 12px;
text-align: justify;
width: 35%;
height: 150px;
overflow: auto;
background:pink;
padding:10px;
}

.qeel_colonne2 {
width: 25%;
height: 150px;
overflow: auto;
background:pink;
padding:10px;
text-align:center;
}

La suite de l'ensemble se trouve ici :

PA Pink & Gray
Catégories
Qeel

Merci !

Merci !

Merci !

Merchi !

Merci!

J'aime beaucoup le rendu ! merci beaucoup *^*

J'adore

Merci !!!

Très beau. Merci du partage.

Merci !! Simple & efficace !

merci beaucoup :)

wonderfull, thanks!

merci beaucoup

Merci du partage :heart:

Merci beaucoup! =D

merci

Thank you

Merci

merci :)

Du rose *-*
Merci !

Merci beaucoup !

Merci

imer

C'est simple, parfait pour mon forum ^^