COMMANDE DE TEMPLATE (QEEL)

Bonsoir à vous, cher dieu du code. Cela fait plus de trois semaines que j'attends impatiemment la levée de l'indisponibilité pour vous implorer de réaliser ce qeel.
Sans plus tarder, voici ce que je souhaiterais si possible:

Largeur maximale : 940 (j'ai pris la largeur du header actuel du forum
Hauteur maximale : auto^^
Schéma : une esquisse: https://2img.net/r/hpimg4/pics/300536Qeelpossiible.jpg
Éléments : Tout est mis dans le schéma, je crois.
Images : Pas d'images particulières, on en change souvent.
Animations : - Dans le cercle au milieu, le descriptif des groupes apparaît bien entendu après passage de la souris sur les icônes des groupes placés en bas. Sinon, c'est l'image qui est visible.
- Les avatars des membres du mois et l'icône du groupe du mois se redimensionnent automatiquement. Je vous laisse le choix de choisir les dimensions.^^
Informations supplémentaires : *Pour les couleurs, nous sommes un forum composé essentiellement de filles donc préférez des tons pastels pour une première réalisation. Néanmoins, nous aimerons pouvoir les modifier à notre guise plus tard.
*Nos groupes seront en fait appelés "Maisons", si vous pouvez déjà nous faire les modifications nécessaires ce serait trop sympa^^
*Si vous souhaitez modifier quelque chose dans le schéma, libre à vous. L'important c'est qu'il aille dans le sens de ce que nous voulons^^

Merci d'avance pour la prise en charge de ma commande (je croise fort les doigts pour que vous acceptez de le faire) et un grand merci d'exister et d'être aussi bon dans ce que vous faites!

Bonjour,

Remplacer le code du QEEL [lignes 173 à 221] par celui-ci :

Spoiler:

Code:: <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td><div class="QEEL"><div class="tleQEEL"><div class="tlMQEEL"><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script><br/>Membres</div><div class="tlPQEEL"><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script><br/>Messages</div><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a><div class="lstQEEL"><div>Bienvenue à</div><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div></div>

<div class="boxQEEL"><div class="tleMDM">Membres du mois</div><div class="mdmQEEL"><iframe src="lien" scrolling="no" style="width:225px; height:110px; margin:auto;" marginwidth="0" marginheight="0" frameborder="0"></iframe>Merci pour votre implication</div><div class="onlineQEEL"><table>{LOGGED_IN_USER_LIST}</table></div></div>

<div class="blocGQEEL"><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script><img src="{L_ONLINE_IMG}" class="imgQEEL" />

<div class="contenu_onglet" id="contenu_onglet_eins">Contenu groupe 1.</div><div class="contenu_onglet" id="contenu_onglet_zwei">Contenu groupe 2.</div><div class="contenu_onglet" id="contenu_onglet_drei">Contenu groupe 3.</div><div class="contenu_onglet" id="contenu_onglet_vier">Contenu groupe 4.</div><div class="contenu_onglet" id="contenu_onglet_funf">Contenu groupe 5.</div>

</div><div class="boxQEEL"><div class="tleGDM">Maison du mois</div><div class="gdmQEEL"><iframe src="lien" scrolling="no" style="width:200px; height:120px;" marginwidth="0" marginheight="0" frameborder="0"></iframe></div><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div></div>

<div class="GQEEL"><div class="onglets"><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background:#FA5858;">Maison I</span><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background:#FF8000;">Maison II</span><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background:#FFFF00">Maison III</span><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="background:#80FF00">Maison IV</span><span class="onglet_0 onglet" id="onglet_funf" onmouseover="javascript:change_onglet('funf');" style="background:#0080FF;">Maison V</span>

</div></div>

<script type="text/javascript">
//
</script>

</td></tr></table>

Partie CSS :

Code:: /* QEEL */
.QEEL {
width:940px; margin:auto; text-align:center;
background:#ccc; /* MODIFIABLE */
}
/* BLOC STATISTIQUES & TITRE QEEL */
.tleQEEL {
width:940px; height:40px; padding:15px 0 25px;
background:coral; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
/* TITRE QEEL */
.tleQEEL a.cattitle {
display:inline-block; vertical-align:top; margin:10px 45px 0;
font-size:28px; font-family:Arial; color:white; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-right:20px;
width:100px; height:30px; padding:10px;
background:#e8e7e9; /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top;
width:100px; height:30px; padding:10px;
background:#e8e7e9; /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
display:inline-block; vertical-align:top; margin-left:10px;
width:220px; height:30px; padding:10px;
background:#e8e7e9; /* MODIFIABLE */
text-align:center; font-size:12px;
}
/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
padding:20px;
}
/* TITRE MEMBRES DU MOIS */
.tleMDM {
margin-bottom:-5px; margin-top:-5px;
text-align:center; font-size:24px; font-family:Dancing Script;
color:black; /* MODIFIABLE */
}
/* MEMBRES DU MOIS */
.mdmQEEL {
width:250px; height:125px; padding:5px; border-radius:15px; overflow:auto;
background:#e8e7e9; color:black; /* MODIFIABLE */
font-size:10px; text-align:center;
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
margin-top:20px;
width:250px; height:125px; padding:5px; border-radius:15px; overflow:auto;
background:#e8e7e9; color:black; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* TITRE GROUPE DU MOIS */
.tleGDM {
margin-bottom:-5px; margin-top:-5px;
text-align:center; font-size:24px; font-family:Dancing Script;
color:black; /* MODIFIABLE */
}
/* GROUPE DU MOIS */
.gdmQEEL {
height:120px; width:230px; padding-top:10px; border-radius:15px; overflow:auto;
background-color:#e8e7e9; color:black; /* MODIFIABLE */
}
/* 24H QEEL */
.dayQEEL {
margin-top:20px;
height:125px; width:220px; padding:5px; border-radius:15px; overflow:auto;
background-color:#e8e7e9; color:black; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.dayQEEL .row1 {
padding:0; background:none;
}
/* BLOC DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
display:inline-block; vertical-align:top; margin:15px;
width:310px; height:250px; text-align:center;
}
/* IMAGE QEEL */
.imgQEEL {
margin-top:27px; width:300px; height:285px; opacity:0.5;
}
/* DESCRIPTIFS GROUPES QEEL */
.contenu_onglet {
display:none; position:absolute; margin-top:-225px; margin-left:25px;
width:250px; height:150px; padding:5px; border-radius:15px; overflow:auto;
background-color:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* BLOC NOMS DES GROUPES QEEL */
.GQEEL {
margin-top:15px;
width:940px; padding:10px 0; text-align:center;
}
/* BLOC NOM DU GROUPE QEEL */
.onglet {
display:inline-block;
margin:0 20px; padding:10px;
text-align:center; font-size:12px; text-transform:uppercase;
color:black; /* MODIFIABLE */
opacity:0.7; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL NOM DU GROUPE QEEL */
.onglet_1 {
opacity:1; /* MODIFIABLE */
}

Image QEEL : 300*285

Instructions :

► Créer deux nouvelles pages html en mode avancé :

Code de la page des membres du mois :
Redimensionnement optimal des avatars à partir du 200*320

Code:: <style type="text/css">
#mdmQEEL {
text-align:center;
}
#mdmQEEL div {
display:inline-block; margin:5px 10px; font-size:11px; text-align:center;
}
#mdmQEEL div img{
display:block; width:50px; height:80px;
}
</style>
<div id="mdmQEEL"><div><img src="" />Pseudo</div><div><img src="" />Pseudo</div><div><img src="" />Pseudo</div></div>

Code de la page du groupe du mois :

Code:: <style type="text/css">
.imgGDM {display:inline-block; margin-right:10px; width:75px; height:75px; }
.clapGDM {display:inline-block; vertical-align:top; text-align:center;}
.winGDM {font-size:18px; text-transform:uppercase;}
.pointsGDM {margin-top:10px; text-align:center;}
</style>
<img src="" class="imgGDM" /><div class="clapGDM">Félicitations au<div class="winGDM">groupe X</div></div>
<div class="pointsGDM">Vainqueurs avec X points</div>

► Remplacer les liens des iframes par ceux des pages html créées.

Bonsoir S,

Mille fois merci pour l'acceptation et la rapidité!! Ce qeel satisfait parfaitement nos attentes.

Seul petit bémol: la case du contenu des groupes est visible sur l'image (200x385) et ça fait pas très joli joli. Es-ce qu'il serait possible de le mettre en "invisible" et de le faire apparaître seulement quand on passe la souris sur l'icône des groupes en bas?

C'est encore moi^^
Désolée pour le double post.

Je viens à peine de remarquer que la liste des connectés au cours des derniers 24h ne s'affiche pas. Le bloc est vide. Je crois que la variable concernée est absente dans le code du template. Je pourrais bien la mettre mais j'ai peur de faire des bêtises^^

Merci encore pour votre aide♥

Afficher les membres connectés au cours des dernières 24H :

Remplacer le code du QEEL [lignes 173 à 221] par celui-ci :

Spoiler:

Code:: <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td><div class="QEEL"><div class="tleQEEL"><div class="tlMQEEL"><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script><br/>Membres</div><div class="tlPQEEL"><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script><br/>Messages</div><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a><div class="lstQEEL"><div>Bienvenue à</div><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div></div>

<div class="boxQEEL"><div class="tleMDM">Membres du mois</div><div class="mdmQEEL"><iframe src="lien" scrolling="no" style="width:225px; height:110px; margin:auto;" marginwidth="0" marginheight="0" frameborder="0"></iframe>Merci pour votre implication</div><div class="onlineQEEL"><table>{LOGGED_IN_USER_LIST}</table></div></div>

<div class="blocGQEEL"><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script>

<script type="text/javascript">
//
</script>

<img src="{L_ONLINE_IMG}" class="imgQEEL" />

<div class="contenu_onglet" id="contenu_onglet_eins">Contenu groupe 1.</div><div class="contenu_onglet" id="contenu_onglet_zwei">Contenu groupe 2.</div><div class="contenu_onglet" id="contenu_onglet_drei">Contenu groupe 3.</div><div class="contenu_onglet" id="contenu_onglet_vier">Contenu groupe 4.</div><div class="contenu_onglet" id="contenu_onglet_funf">Contenu groupe 5.</div>

</div>

<div class="boxQEEL"><div class="tleGDM">Maison du mois</div><div class="gdmQEEL"><iframe src="lien" scrolling="no" style="width:200px; height:120px;" marginwidth="0" marginheight="0" frameborder="0"></iframe></div><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div></div>

<div class="GQEEL"><div class="onglets"><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" onmouseout="document.getElementById('contenu_onglet_eins').style.display = 'none'" style="background:#FA5858;">Maison I</span><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" onmouseout="document.getElementById('contenu_onglet_zwei').style.display = 'none'" style="background:#FF8000;">Maison II</span><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" onmouseout="document.getElementById('contenu_onglet_drei').style.display = 'none'" style="background:#FFFF00">Maison III</span><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" onmouseout="document.getElementById('contenu_onglet_vier').style.display = 'none'" style="background:#80FF00">Maison IV</span><span class="onglet_0 onglet" id="onglet_funf" onmouseover="javascript:change_onglet('funf');" onmouseout="document.getElementById('contenu_onglet_funf').style.display = 'none'" style="background:#0080FF;">Maison V</span>

</div></div>

</td></tr></table>

Vous souhaitant une agréable journée.

C'est topissime!!

Merci beaucoup!!

Etant donné que la session "Questions" est fermée, puis-je poser une question rapido?
Travaillez-vous avec du HTML aussi? Je suppose que oui mais j'aimerais bien avoir confirmation, comme cela dès la levée de l'indisponibilité, je reviens solliciter vos services^^ Si non, ce n'est pas grave.

Vous n'êtes pas obligé de me répondre, je suis consciente que j'ai assez profité de votre gentillesse.

Merci encore!!

Toute réalisation exigeant une structure HTML, ce langage se révèle en chacune d'entre elles. Quelle serait la nature de votre requête ?

Bonsoir S,
Merci pour votre réponse♥

Alors voilà.

Sur notre fofo', nous organisons souvent des élections "Miss" en l'occasion de fêtes comme Halloween et autres. Le système de vote de Forumactif ne nous convenant pas du tout, nous avons pensé faire une page spéciale Elections, qui se présenterait un peu comme un formulaire et qui aurait un bouton "Elections" dans la barre de navigation.

Voici en image ce à quoi pourrait approximativement ressembler cette page:

Il y a parfois jusqu'à 80 images et chaque candidat en présente 3. Cette page permettrait aux votants de voter directement en dessous des images et d'envoyer leurs votes dans un sujet prévu à cet effet (sujet qui sera ouvert en lecture uniquement pour les admins). L'idéal serait que les points ramassés par chaque image soient automatiquement comptés mais ça ne nous dérangera pas non plus de le faire manuellement^^. Et bien évidemment que les votants soient obligés de voter toutes les images.

Ce que nous ignorons, c'est comment les données seront envoyés. Un formulaire normal envoie les données sous forme de texte. Dans ce cas particulier, nous ignorons comment l'envoi pourrait se faire. Nous ignorons également comment recevoir les votes de façon anonyme, ou du moins sans que le votant se doute que nous récupérerons son identité.

Voilà vous savez tout. Pensez-vous que cela soit réalisable? Si oui, *Oh joie!*, je n'hésiterai pas à venir présenter ma commande dès que cela sera possible! Si non... *va se frapper la tête contre un mur*

En tout cas merci infiniment pour l'attention que vous nous accordez♥

Je vous souhaite une bonne fin de journée.

Bien que ne disposant de votre image - le lien de cette dernière n'étant valide, l'ensemble ainsi décrit ne paraît pas impossible à réaliser. Le travail exigé ne correspond toutefois à aucun des services ici proposés et je crains ainsi devoir vous rediriger vers l'ensemble des forums se spécialisant dans l'entraide.

Vous souhaitant pareillement.