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.
HTML & CSS ~ Voici donc un aperçu : www
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} : {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
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
S'il y a des problèmes, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
Dernière édition par A-Lice le Mar 17 Fév 2015 - 15:26, édité 2 fois
