Suggestions II

Code:

<b>Taille :</b> <i>200*320, 200*400, 200*350, etc...</i>
<b>Texte :</b> <i>Extrait de chanson/poème/jeu vidéo, etc...</i>
<b>Provenance du personnage :</b> <i>Nom du personnage par Artiste/Série</i>
<b>Images :</b> <i>Sous forme de liens</i>
<b>Précisions :</b> <i>Ambiance particulière, forme du gif, etc...</i>

Code:

<b>Largeur maximale :</b> <i>500px, 600px, etc...</i>
<b>Hauteur maximale :</b> <i>Si aucune = auto</i>
<b>Schéma :</b> <i>Sous forme de lien</i>
<b>Éléments :</b> <i>Si impossibilité absolue de produire une esquisse imagée ou pour affiner cette dernière</i>
<b>Images :</b> <i>Si images particulières à afficher, les placer ici sous forme de liens</i>
<b>Animations :</b> <i>Glissement, redimensionnement, niveaux de gris, changement d'opacité, etc...</i>
<b>Informations supplémentaires :</b> <i>A votre appréciation</i>

Bonjour/bonsoir!
Voilà, je suis très admirative de votre travail et étant donné que vous ouvrez les suggestions, je me permets de laisser la mienne :

Taille : 200*320 ou 200*400
Texte : "Angel with a shotgun"
Provenance du personnage : Mercy - Overwatch
Images : https://static.zerochan.net/Mercy.full.2043468.jpg
https://www.picstatio.com/large/5f9859/mercy-angel-overwatch-art.jpg]https://www.picstatio.com/large/5f9859/mercy-angel-overwatch-art.jpg
https://i.pinimg.com/736x/9f/62/cf/9f62cf27e6d8f758aeb575bd04a37249--overwatch-mercy-female-characters.jpg
Précisions : carte blanche !

En vous souhaitant une très bonne continuation ! :)

Bonjour Skaemp :) Voici deux petites suggestions de codage que j'aimerais bien voir en LS ^^ évidemment, les maquettes sont en libre service, donc vous pouvez sans mal les coder sans n'avoir de soucis de ce côté-ci :)


Largeur maximale : La largeur totale du forum, sans compter la bande sur le côté, fait 1002px :) La largeur des catégories est de 399px :) -la largeur de l'image, en gros-. Ensuite, au survol des catégories, le bloc brun pâle du bas fait 399px de large. Les sous-forums font 163px de large. Finalement, le gros bloc des descriptions fait 377px de large. Pour le qeel, la largeur de la bande brune est de 977px. La largeur totale du bloc du qeel est de 977px. Quant aux trois blocs de textes, la bordure brune en haut fait 220px de large puis pour le gros bloc de texte dessous, il fait également 220px de large.

Hauteur maximale : La hauteur totale du forum est, évidemment, automatique. La hauteur totale des catégories, sans les bordures, fait 399px -la hauteur de l'image, en gros-. La bordeur fait 2px de haut, pour sa part :) Ensuite, au survol des catégories, le bloc brun pâle du bas fait 57px de hauteur. Les sous-forums font 22px de haut. Finalement, le gros bloc des descriptions fait 144px de haut. Quant au qeel, la hauteur de la bande brune est de 39px. La hauteur du bloc de qeel, exception faite de la bordure brune en haut et celle en bas -qui est, également, de 2px- est de 230px. Quand aux trois blocs de textes, la bordure brune en haut fait 29px de haut puis, pour le gros bloc de texte dessous, il fait 181px de haut.

Schéma : Voici le schéma regroupant les éléments à coder pour la première suggestion :) https://sd-g1.archive-host.com/membres/images/653bae60db7f5ad4505561ea8db38d3a631950d9/Remember_the_Onirism/666802maquetteindex.png
Éléments : Voici les informations concernant les différentes couleurs :) La couleur verte-turquoise est #1d7258. La couleur brun plus foncé est #7b5b2f. Le brun pâle est #c6a97e. Le reste n'est que du noir ou du blanc :)

Images : Pas d'images particulières à fournir, tout est intégré
Animations : Alors, le seul effet et qu'au survol de l'image des catégories, la description et les sous-forums apparaissent :)
Informations supplémentaires : Comme j'ai bien vu que vous ne faisiez pas le reste -navigations, bannière sur le côté, PA, etc- je ne fais pas l'offense de vous le demandez :) Je me débrouillerai de mon côté, déjà, si vous décidez de réaliser cette suggestion :)



Largeur maximale : Alors le forum au complet fait 1350px de large. Après, pour les éléments plus ciblés : Les catégories. Déjà, elles font 1206 de largeur si on compte les quatre mis côte à côte :) Sinon, la description fait 500px de large. Les old, new, lock font 150px de large. L'image sous les catégories fait 200px de large. Les sous-forums font 109px de large. Le titre du forum -le gros bloc noir, donc- fait 245px de large. Donc, normalement, les éléments font la taille des images fournis plus bas, enfin, pour ceux qui en ont :) Les autres font celles dites ^^
Pour le qeel maintenant. L'image sous les groupes fait 252px de large. L'image découpée en bas à droite, chaque carré fait 46px de largeur. Ensuite, chaque bloc de texte fait 222px de large.
Hauteur maximale : Une hauteur automatique pour le forum au complet :) Après, pour les éléments plus ciblés : Les catégories. Ensuite, une hauteur automatique pour les blocs des catégories -sachant qu'ils vont se positionner automatiquement-. Les old, new, lock font 150px de hauteur. L'image sous les catégories fait 200x de hauteur. Les sous-forums font 19px de hauteur :) Le titre du forum -le gros bloc noir, donc- fait 53px de haut :) Donc, normalement, les éléments font la taille des images fournis plus bas, enfin, pour ceux qui en ont :) Les autres font celles dites ^^
Pour le qeel maintenant. L'image sous les groupes fait 65px de haut. L'image découpée en bas à droite, chaque carré fait 43px de hauteur. Ensuite, chaque bloc de texte fait 291px de haut.
Schéma : Voici la maquette :) https://img2.lght.pics/dnEf.png
Éléments : Voici les couleurs :) Le noir est en fait #000106. Le rose-beige est #b39898. Je ne sais pas si c'est possible de l'avoir en dégradé pour le titre des catégories, mais je met les couleurs tout de même. Sinon je m'amuserai avec photoshop :) Le dégradé est donc de #9e7eb7 à #0c093e, du haut vers le bas :)
Pour le qeel, je ne sais pas si c'est possible de changer la couleur d'une même image, donc dans le doute je vais les mettre, mais sinon j'irai m'amuser sur photoshop encore une fois ^^ Les couleurs sont #474c70 pour le bleu, #7e2930 pour le rouge, #094c54 pour le vert-turquoise et #8c5429 pour le brun jaunâtre. Le rose des groupes du qeel est #b49a9a. Le rose un peu plus foncé du texte descriptif des groupes est #a78283. Après les couleurs sont celles normales -blanc et noir ^^-.
Pour l'image découpée en bas à droite, il se trouve que ce sont des partenaires :) Ensuite, le 12 est la version du forum. Les images en haut de celle découpée sont les versions disponible du codage -ici chrome et firefox- ainsi qu'une image menant vers le lien du discord du forum -ici c'est à votre convenance, à vous de voir si vous en mettez une ou pas :)-.
Images : Alors :
https://img.lght.pics/dnE6.png - l'image pour mettre sous les catégories. Elle peut tenir sous deux des quatre :) C'est également l'image, en plus petite niveau hauteur, des groupes du qeel :)
https://img1.lght.pics/dnEY.png - le cadre pour les descriptions.
https://img.lght.pics/dnEx.png - l'image du nouveau message, pas de nouveau, etc.
Animations : La seule animation est que, au clique sur les différents groupes, l'image du bloc juste à leur droite change en fonction du groupe cliqué :)
Informations supplémentaires : Comme j'ai bien vu que vous ne faisiez pas le reste -navigations, bannière sur le côté, PA, etc- je ne fais pas l'offense de vous le demandez :) Je me débrouillerai de mon côté, déjà, si vous décidez de réaliser cette suggestion :)


Et voilà :) Merci de m'avoir lue jusqu'ici et en espérant que ma suggestion soit réalisée :) -mais je ne vous en voudrai pas si ce n'est pas le cas évidemment ^^-

Remplacez l'intégralité du template index_box par :

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <span class="gensmall">{LAST_VISIT_DATE}<br />
     {CURRENT_TIME}<br />
     </span>
     <!-- END switch_user_logged_in -->
     <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
     </td>
     <td class="gensmall" align="right" valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>

        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span>
        <!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
         <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="boxFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div style="display:inline-block; vertical-align:middle;"><div class="nbFRM">{catrow.forumrow.TOPICS} S</div><div class="nbIIFRM">{catrow.forumrow.POSTS} M</div></div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div></div></div>
         <!-- END forumrow -->
         <!-- BEGIN catfoot -->

         <!-- BEGIN inc -->
         <!-- END inc -->
    
         <!-- END catfoot -->
         <!-- BEGIN tablefoot -->
          <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->

Partie CSS :

Code:

/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:auto;
width:880px; padding:10px; text-align:left;
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0 auto; display:inline-block; vertical-align:middle;
font-size:42px; letter-spacing:3px; font-style:italic;
font-family:Arial; color:#1D7258; text-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* TRAIT TITRE CATEGORIE */
.tleCAT h2::after {
content:''; display:inline-block; vertical-align:middle; margin-left:5px;
width:250px; height:1px;
background:#1D7258; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:870px; padding-left:30px;
}
/* BLOC FORUM */
.FRM {
float:left; margin-bottom:20px; width:400px; overflow:hidden;
border-top:2px solid #7B5B2F; border-bottom:2px solid #7B5B2F; /* MODIFIABLE */
}
.FRM:nth-of-type(even) {
margin-left:35px;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:absolute; z-index:3; margin-top:10px; margin-left:10px;
}
/* TITRE FORUM */
.tleFRM a {
display:inline-block; vertical-align:middle;
color:#1D7258 !important; text-shadow:1px 1px 0px rgba(0,0,0,0.2); /* MODIFIABLE */
font-family:Arial; font-size:16px; font-weight:bold; font-style:italic;
}
/* TRAIT TITRE FORUM */
.tleFRM a::after {
content:''; display:inline-block; vertical-align:middle; margin-left:5px;
width:100px; height:1px;
background:#1D7258; /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
#descFRM {
width:400px; height:400px; overflow:hidden;
background:#7B5B2F; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
position:absolute; z-index:2;
width:400px; height:400px;
opacity:0.9;
}  
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; z-index:3; margin-left:15px; margin-top:40px;
width:360px; height:135px; padding:5px; overflow-y:auto;
background:#7B5B2F; color:white; /* MODIFIABLE */
font-size:11px; text-align:justify; font-family:Arial;
opacity:0; transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.FRM:hover .descFRM {
opacity:1;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:3; margin-top:-200px; margin-left:15px;
width:370px; max-height:120px; overflow-y:auto;
font-size:10px; text-align:center; color:rgba(0,0,0,0);
opacity:0; transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.FRM:hover .sfFRM {
opacity:1;
}
/* SOUS-FORUMS */
.sfFRM a{
display:inline-block; vertical-align:middle; margin:5px 5px 0;
width:150px; padding:5px;
background:#7B5B2F; color:white !important; /* MODIFIABLE */
font-family:Arial; font-size:10px;
}
/* ICÔNES FORUM */
.imgFRM {
position:absolute; z-index:5; margin-top:-25px;
}
/* BLOC NOMBRE SUJETS & MESSAGES / DERNIER MESSAGE FORUM */
.boxFRM {
position:absolute; z-index:3; margin-top:-62px;
width:390px; padding:5px;
background:#C6A97E; /* MODIFIABLE */
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
margin-bottom:2px;
width:70px; height:15px; padding:5px; overflow:hidden;
text-align:center; font-size:11px;  font-family:Arial;
background:#1D7258; color:#C6A97E; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbIIFRM {
width:70px; height:15px; padding:5px; overflow:hidden;
text-align:center; font-size:11px; font-family:Arial;
background:#1D7258; color:#C6A97E; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:middle; margin-left:5px;
width:305px;
font-size:11px; font-family:Arial; text-align:center;
color:#7B5B2F; /* MODIFIABLE */
}
.lmsgFRM br:nth-of-type(1) {
display:none;
}
.lmsgFRM a:nth-of-type(1) {
margin-right:5px;
}

Instructions :


Remplacez le code du QEEL [lignes 136 à 184] par celui-ci :

Code:

<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><!-- TITRE --><div class="tleQEEL"><a href="{U_VIEWONLINE}" rel="nofollow">Les Düériniens présents et statistiques</a><!-- TRAIT --><span></span></div><!-- GROUPES --><div class="GQEEL">{GROUP_LEGEND}</div><div class="QEEL"><!-- STATISTIQUES --><div class="boxQEEL"><div class="tleIIQEEL">Statistiques</div><div class="stsQEEL"><!-- TOTAL MESSAGES --><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 /," ") .replace(/messages/," ");</script><br/>messages</div><!-- TOTAL MEMBRES --><div class="tlMQEEL"><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><br/>comptes</div><!-- DERNIER UTILISATEUR ENREGISTRE --><div class="lstQEEL">Bienvenue à<br/><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><!-- UTILISATEURS EN LIGNE --><div id="TLUS">{TOTAL_USERS_ONLINE}</div><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"En ce moment");</script></div></div><!-- MEMBRES CONNECTES --><div class="boxQEEL"><div class="tleIIQEEL">Les connectés</div><div class="onlineQEEL" id="onLINE">{LOGGED_IN_USERS_LIST}</div></div><!-- 24H --><div class="boxQEEL"><div class="tleIIQEEL">Ces dernières 24H</div><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div></div>
</td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :

Code:

/* BLOC TITRE QEEL */
.tleQEEL {
margin:0 auto 10px; width:975px;
text-align:left; font-size:26px; letter-spacing:2px;
}
/* TITRE QEEL */
.tleQEEL a {
display:inline-block; vertical-align:middle; margin-right:5px;
color:#1D7258; text-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* TRAIT TITRE QEEL */
.tleQEEL span {
display:inline-block; vertical-align:middle;
width:30%; height:1px;
background:#1D7258; /* MODIFIABLE */
}
/* BLOC GROUPES QEEL */
.GQEEL {
margin:0 auto;
width:975px; padding:10px 0;
background:#7B5B2F; /* MODIFIABLE */
color:rgba(0,0,0,0); text-align:center;
}
/* GROUPES QEEL */
.GQEEL a{
font-family:Arial; font-size:14px; color:white !important; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:975px; height:210px; padding:10px 0;
text-align:center; font-family:Arial;
background:url(image.png); border-bottom:2px solid #7B5B2F; /* MODIFIABLE */
}
/* POSITIONNEMENT QEEL */
.boxQEEL {
display:inline-block; vertical-align:top;
width:230px; height:210px;
}
.boxQEEL:nth-of-type(2) {
margin:0 65px;
}
/* TITRES STATISTIQUES / CONNECTES / 24H QEEL */
.tleIIQEEL {
height:20px; padding:5px 0;
background:#7B5B2F; color:#C6A97E; /* MODIFIABLE */
text-align:center; font-size:16px;
}
/* STATISTIQUES QEEL */
.stsQEEL {
height:155px; padding-top:25px;
background:#C6A97E; color:black; /* MODIFIABLE */
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top;
width:105px;
text-align:center; font-size:11px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-left:5px;
width:105px;
text-align:center; font-size:11px;
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin:10px auto; width:200px;
text-align:center; font-size:12px;
}
/* NOMBRE UTILISEURS EN LIGNE QEEL */
#TLUS {
margin:auto; width:200px;
font-size:10px; text-align:center;
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
width:220px; height:170px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:#C6A97E; color:black; /* MODIFIABLE */
}
/* 24H QEEL */
.dayQEEL {
width:220px; height:170px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:#C6A97E; /* MODIFIABLE */
}
.dayQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .gensmall {
font-family:Arial; font-size:11px;
color:black; /* MODIFIABLE */
}

Bonjour/Bonsoir,

Taille : 200*320
Texte : « Smoking is bad but the reason i smoke is worse. » ; « I think I’m Good and then I don’t know. »
Provenance du personnage : Jean Kirschtein ; Shingeki No Kyojin
Images : https://imgur.com/a/mWsDQ all in one
Précisions : Carte blanche 8)

Taille : 200*320
Texte : « Shoutout to my dad for not using a condom. » ; « Missing you used to make me sick, now I don't give a fuck. » ; « My anxiety spikes every night so it makes it harder for me to doze off. »
Provenance du personnage : Vanitas ; Kingdom Hearts
Images : https://imgur.com/a/mZyvl all in one
Précisions : Carte blanche 8)

Bonjour ! À mon tour, je viens avec une petite commande. J'espère qu'elle vous inspirera !
Taille : 200*320
Texte : Remember • Queen of Hearts • Joker • Sinnerwoman • Stay and play • Faith • Justice • Nightcall • Starway to heaven • Lust • Agony • Dreaming • Sherlocked • Tears and blood
Provenance du personnage : Hatsune Miku par Vocaloid
Images : J'ai fait une galerie ici : http://imgbox.com/g/omaB6rOVm0
Précisions : Liberté totale !
Merci d'avance ^-^ Je me demandais, est-ce que tu fais encore des tutoriels d'avatars ?

Bonjour :) Voici une petite commande pour deux de mes personnages rp *-* et autant que les images servent à tout le monde ^^


Taille : 200*320
Texte : "still thinkin of running", "Why is the rhum always gone ?", "But why the rhum gone ?", "It's a pirate life for me, Savvvy", "On va voler l’navire ? Ce navire ?" Réquisitionner. On « réquisitionne » ce « bâtiment », termes nautiques." -celle-ci tient en une citation, ce sont deux personnes qui parles :)-, "wherever we want to go we'll go that's what a ship is you know"...
Provenance du personnage : Jack Sparrow -Pirate des Caraïbes
Images :
https://imgbox.com/g/eY4lMFc0vo
Précisions : Carte blanche :D

Taille : 200*320
Texte : "There's not a person alive whose seen it. It's obvious isn't it ? You have to talk to someone whose dead.", "Une pincée de folie dans un corps sain d'esprit", "happiness can be found even in the darkest of times if one only remembers to turn on the light",  “Things we lose have a way of coming back to us in the end, if not always in the way we expect.”, "the things we lose always come back to us in unexpected ways", -suite de mots qualifiant son caractère :)- "eccentric, strange,
sweet, kindness, kind, lonely, wise, intuitive", "be what you are and say what you feel... because those who mind don't matter... and those who matter don't mind", "Don't worry. you're just as sane as i am", "I see things that others do not say, Am I crazy for that ?" "Oh, a Nargle !", "I'm not crazy, I'm a Seer"
Provenance du personnage : Luna Lovegood -Harry Potter-
Images :
https://imgbox.com/g/kcBRDNz2Hv
Précisions : Carte blanche :D


Voilà, merci d'avance :D

Bonsoir :) Je vous présente, ici bas, une maquette de catégorie ainsi que de qeel que j'aimerais énormément vous voir réalisez. Évidemment, elle est en libre-service, car quel est l'intérêt de piquer le travail des autres, à part s'attirer des ennuis ?


Largeur maximale : 900px
Hauteur maximale : automatique :)
Schéma : https://www.zupimages.net/up/17/38/m32k.png
Éléments : //
Images : Si images particulières à afficher, les placer ici sous forme de liens
Animations : Changement d'opacité et effet au survol pour les sous-forums et lien du sujet/posté le, ainsi qu'une bordure autour des éléments des forums.
Informations supplémentaires : Catégories : Les couleurs sont #ffad89 pour le fond des descriptions,
#ebefcf pour les sous-forums et lien du sujet/posté le au survol. #ffffff est la couleur de la bordure des forums -et fait 10px- et #40225c est la couleur du nom des catégories. #da374e est là couleur de la bordure tout en bas. #fffdd7 est la couleur de fond du forum -pas la couleur de tout le fond, mais celle du fond des catégories/qeel-. Une image de haut et de bas de catégories de taille 900*50px. L'image de gauche est l'image new/no new/lock. L'image de droite est une image de description. Et je me demandais si c'était possible de rajouter quelque chose dans le bloc de droite, au survol. Dans un petit rond, l'image du dernier posteur avec une bordure blanc. Pour le positionnement, j'avais penser à gauche du pseudo du posteur -ou à droite, c'est comme vous préférez ici-
Qeel : Les couleurs des groupes sont #a52121, #324a99, #21a53d et #a021a5. La couleur rouge-rose est #e15f71, le texte mauve -statistiques etc- est #40225c. Le jaune pâle est le même que celui des catégories. Le texte des groupes est #5b6ead. Les partenaires font parties du qeel est font 88*31. La couleur jaune du fond est le même que celle des catégories. Le mauve est le même que l'écriture des stats du qeel. Pour liste des connectés et liste des 24h, il faudrait un overflow. La taille des blocs est de : 285px*180px pour les connectés et 24h. Les anniversaires fait 580px*50x. La description des groupes fait 580px*100px. Le gros bloc tout à gauche fait 300px*410px.


Voilà ! Normalement, vous avez tout d'indiquez. En vous remerciant en avance et en vous souhaitant une agréable fin de journée et une bonne année avec du retard c:

Remplacez l'intégralité du template index_box par :

Code:

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <table width="900px" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td style="text-align:center; line-height:13px;">
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 <div class="lksCAT">
    <!-- BEGIN switch_user_logged_in -->
    <span><a class="gensmall" href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> - <a class="gensmall" href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> - <a class="gensmall" href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></span><br/>
    <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> - <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><!-- END switch_user_logged_in --> - <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></div>
    </td>
    </tr>
    </table>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
 <div class="mdlCAT">
 <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
   
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="sfFRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="boxDESC"><div class="lmsgFRM"><div class="lstavFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>{catrow.forumrow.LAST_POST}</div></div></div>   
    <!-- END forumrow -->
   
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
 </div><div class="btmCAT"></div>
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :

Code:

/* LIENS STATISTIQUES FORUM */
.lksCAT {
font-family:Arial; text-transform:uppercase; font-size:11px;
color:#E15F71; /* MODIFIABLE */
}
.lksCAT a.gensmall {
display:inline-block; vertical-align:middle;
color:#E15F71; /* MODIFIABLE */
}
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:auto; margin-top:5px;
width:900px; height:50px; text-align:left;
background:url(image.png); /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0; padding-left:20px;
font-size:32px;
font-family:Kaushan Script; color:#40225C; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:900px; padding:10px 0;
background:#FFFDD7; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:0 auto 10px;
width:900px; height:25px;
background:#DA374E; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:10px auto; width:870px; padding:10px 0;
text-align:center; font-family:Arial;
background:#FFFFFF; /* MODIFIABLE */
}
/* BLOC ICÔNES & SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top;
width:200px; height:140px;
}
/* ICÔNES FORUM */
.imgFRM {
width:200px; height:140px;
}
/* BLOC SOUS-FORUMS */
.sfFRM div {
position:absolute; z-index:3; margin-top:-140px;
width:200px; height:130px; padding-top:10px; overflow-y:auto;
text-align:center; text-transform:uppercase;
background:#EBEFCF; /* MODIFIABLE */
opacity:0; transition:all 0.85s ease; -webkit-transition:all 0.85s ease;
}
.FRM:hover .sfFRM div {
opacity:1;
}
/* SOUS-FORUMS */
.sfFRM a {
color:#40225C !important; /* MODIFIABLE */
}
/* BLOC TITRE & DESCRIPTION FORUM */
.boxFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:410px; height:120px; padding:10px;
background:#FFAD89; /* MODIFIABLE */
}
/* BORDURE TITRE FORUM */
.tleFRM {
margin:0 auto 5px;
width:335px; height:15px; padding-bottom:5px; text-align:center;
border-bottom:1px solid white; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
font-size:13px; letter-spacing:3px;
font-family:Arial; color:white !important; font-weight:bold; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
width:410px; height:90px; overflow:hidden;
font-size:11px; text-align:justify; line-height:13.2px;
color:white;  /* MODIFIABLE */
}
.descFRM:hover {
width:405px; padding-right:5px; overflow-y:auto;
}
/* BLOC IMAGE DESCRIPTIVE & DERNIER MESSAGE FORUM */
.boxDESC {
display:inline-block; vertical-align:top;
width:200px; height:140px;
background:#D6D6D6; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; z-index:3; margin-top:-36px; margin-left:430px;
width:200px; height:140px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; z-index:5;
width:200px; height:120px; padding-top:20px;
text-align:center; font-size:11px; text-transform:uppercase;
background:#EBEFCF; color:#40225C; /* MODIFIABLE */
opacity:0; transition:all 0.85s ease; -webkit-transition:all 0.85s ease;
}
.FRM:hover .lmsgFRM {
opacity:1;
}
/* AVATAR DERNIER POSTEUR FORUM */
.lstavFRM {
position:absolute; margin-top:32px; margin-left:80px;
width:35px; height:35px; border-radius:35px; overflow:hidden;
border:2px solid white; /* MODIFIABLE */
}
.lstavFRM img {
width:35px;
}
.lmsgFRM strong {
display:block;
margin-top:50px;
}

Taille des icônes du forum : 200*140
Taille des images descriptives : 200*140

Instructions :

▲ Supprimez les lignes 66 à 89 du template index_body
Remplacez le code du QEEL [lignes 136 à 184] par :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="QEEL"><!-- STATISTIQUES --><div class="stsQEEL"><!-- DERNIER INSCRIT --><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><br/><br/><br/><br/><!-- TOTAL MEMBRES --><div>Colorblind a</div><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membre(s?) enregistré(s?)/,"membre$1");</script><br/><!-- TOTAL MESSAGES --><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 /," ");</script></div>

<div class="boxQEEL"><!-- MEMBRES CONNECTES --><div class="onlineQEEL"><table><span id="TLUS" style="font-size:9px;">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script><br/><br/>{LOGGED_IN_USER_LIST}</table><br/></div><!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div><!-- ANNIVERSAIRES --><div class="anvQEEL"><table>{L_WHOSBIRTHDAY_TODAY}</table></div>

<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script>
<!-- TRAITS COLORES GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background-color:#A52121;"></span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background-color:#324A99;"></span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background-color:#21A53D;"></span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="background-color:#A021A5;"></span>
</div></div>

<!-- DESCRIPTIFS GROUPES --><div class="blocGQEEL"><div class="contenu_onglets"><!-- CONTENU GROUPE 1 --><div class="contenu_onglet" id="contenu_onglet_eins">Contenu groupe 1.</div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei">Contenu groupe 2.</div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_drei">Contenu groupe 3.</div><!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_vier">Contenu groupe 4.</div>

</div></div></div>

<script type="text/javascript">
            //<!--
                    var anc_onglet = 'eins';
                    change_onglet(anc_onglet);
            //-->
            </script>
 
<!-- PARTENAIRES --><div class="partQEEL"><!-- TITRE --><div>Nos partenaires</div><!-- I --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- III --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- IV --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- V --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VI --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VIII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- IX --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- LIGNE II --><!-- X --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XI --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XIII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XIV --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XV --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XVI --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XVII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XVIII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a></div>

</div></td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :

Code:

/* QEEL */
.QEEL {
margin:auto; width:900px; font-family:Arial;
}
/* STATISTIQUES QEEL */
.stsQEEL {
display:inline-block; vertical-align:top;
width:300px; height:310px; padding-top:100px; overflow:hidden;
background:#EDEFF4; color:#40225C; /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* INTITULES STATISTIQUES QEEL */
.stsQEEL div {
margin-bottom:-5px;
font-family:Kaushan Script; font-size:36px;
}
/* BLOC MEMBRES EN LIGNE / 24H / ANNIVERSAIRES / GROUPES QEEL */
.boxQEEL {
display:inline-block; vertical-align:top;
width:600px; height:410px;
background:#FFFDD7;  /* MODIFIABLE */
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
display:inline-block; vertical-align:top; margin:10px;
width:265px; height:160px; padding:10px; overflow-y:auto;
background:white; color:#E15F71; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* 24H QEEL */
.dayQEEL {
display:inline-block; vertical-align:top; margin-top:10px;
width:265px; height:160px; padding:10px; overflow-y:auto;
background:white; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.dayQEEL .row1 {
padding:0 !important; background:none !important;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .row1 .gensmall {
font-family:Arial;
color:#E15F71; /* MODIFIABLE */
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
margin:0 auto 10px;
width:560px; height:30px; padding:10px; overflow-y:auto;
background:white; /* MODIFIABLE */
}
.anvQEEL .row1 {
padding:0 !important; background:none !important;
}
/* COULEUR TEXTE ANNIVERSAIRES QEEL */
.anvQEEL .row1 .gensmall {
font-family:Arial; color:#E15F71; /* MODIFIABLE */
}
/* BLOC TRAITS COLORES GROUPES QEEL */
.GQEEL {
margin:auto; width:580px; text-align:center;
}
/* TRAITS COLORES GROUPES QEEL */
.onglet {
display:inline-block; vertical-align:top;
width:145px; height:25px;
opacity:0.5; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL TRAIT COLORE GROUPE QEEL */
.onglet_1 {
opacity:1;
}
/* BLOC DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
margin:auto;
width:560px; height:90px; padding:10px; overflow:auto;
background:white; color:#5B6EAD; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.contenu_onglet {
display:none;
}
/* PARTENAIRES QEEL */
.partQEEL {
margin:10px auto;
width:900px; padding:5px 0; text-align:center;
background:#FFFDD7;  /* MODIFIABLE */
}
/* TITRE PARTENAIRES QEEL */
.partQEEL div {
font-size:14px; text-transform:uppercase; font-weight:bold;
color:#40225C; /* MODIFIABLE */
}
.partQEEL a {
display:inline-block; vertical-align:middle; margin:5px;
}

Instructions :

Vous souhaitant pareillement.

Bonjour, et merci d'ouvrir les suggestions ! J'aime beaucoup ce que tu fais et je voulais de demander ça depuis un petit moment ~ Penses-tu pouvoir faire 5 avatars s'il te plait ?

Taille : 200*400
Texte : Endless - See the good - Never stop dreaming - Hold On Pain Ends - ou tout ce qui t'inspire
Provenance du personnage : Velvet Crowe de la série des Tales of
Images : Celle çi, celle là ou encore cette dernière, mais tu es libre d'en choisir d'autres...
Précisions : Une ambiance un peu sombre si possible

Merci beaucoup :3

Bonjour,

Voici une suggestion de catégories :

Largeur maximale : 900 px
Hauteur maximale : auto
Schéma : https://i.imgur.com/boDgBYm.png
Éléments : X
Images : X
Animations : https://codepen.io/littlesnippets/pen/bpMmBO
Informations supplémentaires : Le texte visible sur l'image correspond au nom de la catégorie, au survol apparait la description, le dernier message, les sous forums (sous formes de lien de type chiffres romains (I., II, III?,
...)) et le nombre de sujets/messages. Pour montrer la présence d'un nouveau message il faudrait que le bloc blanc entourant le second mot de la catégorie change de couleur.

Bien entendu il s'agit d'une suggestion il n'y a donc aucune obligation ou besoin de réaliser impérativement ceci.
En vous souhaitant une bonne journée.

Remplacez l'intégralité du template index_box par :

Code:

<table width="900px" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
        <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
        </td>
        <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
        </td>
        </tr>   
        </table>
   
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span>
        <!-- END tablehead -->

        <!-- BEGIN cathead -->
        <!-- END cathead -->
       
        <!-- BEGIN forumrow -->
        <div class="FRM"><div class="downFRM"></div><div class="leftFRM"></div><div class="rightFRM"></div><div class="upFRM"></div><div class="nbFRM">{catrow.forumrow.TOPICS}<br/>―<br/>{catrow.forumrow.POSTS}</div><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div></div>
        <!-- END forumrow -->
       
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
    <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->
 <!-- ADAPTATION DU VISUEL DE LITTLESNIPPETS / CODEPEN - PAR SKAEMP / CCCRUSH -->

Partie CSS :

Code:

/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:10px auto 0;
width:900px; padding:10px 0; text-align:center;
background:black; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:32px; text-transform:uppercase;
letter-spacing:2px; font-family:Arial; color:white; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:899px; padding-left:1px; text-align:center;
background:darkgrey; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
float:left; margin:7px 0 7px 7px;
width:290px; height:200px; overflow:hidden;
font-family:Arial; background:black; /* MODIFIABLE */
}
/* BANDE ▼ FORUM */
.downFRM {
position:absolute; z-index:3; margin-left:35px;
width:3px; height:0;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.FRM:hover .downFRM {
height:160px;
}
/* BANDE ► FORUM */
.leftFRM {
position:absolute; z-index:3; margin-top:175px;
width:0; height:3px;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.FRM:hover .leftFRM {
width:150px;
}
/* BANDE ◄ FORUM */
.rightFRM {
position:absolute; z-index:3; margin-top:105px; margin-left:290px;
width:0; height:3px;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.FRM:hover .rightFRM {
margin-left:50px; width:240px;
}
/* BANDE ▲ FORUM */
.upFRM {
position:absolute; z-index:3; margin-left:161px; margin-top:200px;
width:3px; height:0;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.FRM:hover .upFRM {
margin-top:120px; height:80px;
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
width:290px; height:200px;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
.FRM:hover #descFRM img {
opacity:0.5;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
position:absolute; z-index:2;
width:35px; height:180px; padding-top:15px;
font-size:10px; text-align:center;
color:white; /* MODIFIABLE */
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .nbFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:absolute; z-index:3; margin-top:110px; margin-left:39px;
width:120px; height:55px; padding-top:10px;
text-transform:uppercase; text-align:center; font-family:Arial; font-size:13px; font-weight:bold; line-height:20px;
}
/* IER MOT TITRE FORUM */
.tleFRM a { 
color:white !important; /* MODIFIABLE */
}
/* IIND MOT TITRE FORUM */
.tleFRM b {
display:block;
color:black !important; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM {
position:absolute; z-index:2; margin-top:140px; margin-left:-96px;
width:100px; height:20px;
}
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; z-index:2; margin-left:45px;
width:235px; height:95px; padding:5px; overflow-y:auto;
font-size:9px; text-align:justify;
color:white; /* MODIFIABLE */
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .descFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* ALIGNEMENT DESCRIPTION FORUM */
.descFRM span {
display:inline-block; vertical-align:bottom;
}
.descFRM span:nth-of-type(1) {
height:95px;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:2; margin-top:180px;
width:160px; height:17px; padding-top:3px; overflow:hidden;
text-align:center; text-transform:uppercase; font-size:9px; color:rgba(0,0,0,0);
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .sfFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* SOUS-FORUMS */
.sfFRM a {
margin:0 2px; font-size:0px
}
/* SYMBOLES SOUS-FORUMS */
.sfFRM a::before {
content:'#'; /* MODIFIABLE */
display:inline-block; font-size:9px !important;
color:white; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; z-index:2; margin-top:110px; margin-left:165px;
width:115px; height:80px; padding-top:10px; padding-left:10px; overflow:hidden;
text-align:left; font-size:9px; line-height:13px;
color:white; /* MODIFIABLE */
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .lmsgFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:white !important; /* MODIFIABLE */
}
/* TAILLE PSEUDONYME DERNIER POSTEUR FORUM */
.lmsgFRM .gensmall {
font-size:9px; /* MODIFIABLE */
}

Taille des icônes du forum : 100*20
Taille des images descriptives : 290*200

Instructions :


Encadrez le IInd mot du titre du forum par b :

Code:

Ier Mot<b>IInd Mot</b>

Encadrez le texte descriptif des balises suivantes :

Code:

<div class="descFRM"><!-- ALIGNEMENT --><span></span><!-- CONTENU --><span>Texte descriptif.</span></div>

Une agréable journée à vous aussi.

Bonjour à vous! Et quelle chance je dois dire que vos suggestions soient ouvertes connaissant la qualité de votre travail! Je suis ravie et m'empresse donc de vous commander quelques avatars si toutefois le temps vous le permet. En vous remerciant grandement par avance, et vous souhaitant une bonne journée et continuation!

Taille : 200*320
Texte : Pretty Decay - Nicotine & Corbillard - Le gouffre de tes yeux, plein d'horribles pensées, Exhale le vertige, et les danseurs prudents - Paint it Black - Madness - Tous mes rêvent se meurent à quatre heures du matin - Et tout ce qui pourra vous inspirer.
Provenance du personnage : Nikola Selezinko
Images : J'ai fais une petite galerie ici! Tout n'est pas à prendre, c'est simplement pour donner du choix.
https://imgur.com/a/QZ6G9

Précisions : Rien de particulier, tant que les cheveux semblent noirs.


Une agréable journée à vous aussi.

Bonjour/bonsoir, je tombe des nues devant vos créations à chaque fois que j'y passe ! En espérant que mes suggestions ne soit pas de trop, je sais que j'en demande beaucoup ;w;

Taille : 200*320
Texte : « bad seed » ; Cassiopée Sorense
Provenance du personnage : XII ; dCTb
Images : https://imgur.com/a/wj6eJ
Précisions : /

Taille : 250*400
Texte : « Le souffle court, les yeux embués de larmes, en apoplexie. A sillonner l'asphalte brûlant au soleil de midi. Je me cherche et te cherche, dans les rues, les écouteurs vissés sur les oreilles »
Provenance du personnage : Fuuchouin Kazuki ; Get Backers
Images : https://imgur.com/a/OZSq7
Précisions : /

Taille : 250*400
Texte : « Give me back my crown » ; « I would die first onto the throne »
Provenance du personnage : Veloce Visrin ; Carciphona
Images : https://imgur.com/a/Idmg1
Précisions : /

Je vous remercie d'avoir lu ces propositions, en espérant ne pas vous gêner qwp

Bonsoir!!

Je viens vous proposer deux suggestions, une PA et des catégories!

PA
Largeur maximale : 800 px
Hauteur maximale :
Schéma : https://i.imgur.com/FBQN1lD.jpg
Éléments : Si impossibilité absolue de produire une esquisse imagée ou pour affiner cette dernière
Images : Si images particulières à afficher, les placer ici sous forme de liens
Animations : Le coin dernier message ne devra pas défiler, il laissera apparaître les dix derniers messages postés sur le forum

Les carrés sous nos intrigues devront comporter des zones de texte avec overflow auto :)
Informations supplémentaires : A votre appréciation



Caté
Largeur maximale : 800 px
Hauteur maximale :
Schéma : https://i.imgur.com/VZini33.jpg
Éléments : Le carré transparent du milieu recevra les description des catégories en texte
L'image de fond devra être l'image de la caté
La place de la roue est pour les nouveaux messages
L'avatar visible donc du dernier posteur
Images : Si images particulières à afficher, les placer ici sous forme de liens
Animations : Laucune
Informations supplémentaires : A votre appréciation

Merci par avance!

Remplacez l'intégralité du template index_box par :

Code:

<table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
         <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
         </td>
         <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
         </td>
         </tr>    
        </table>
    
     <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span>
        <!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
        <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="nbFRM">{catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} échanges</div><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><script type="text/javascript">$('.lmsgFRM').each(function(){$(this).html($(this).html().replace(/<br>/g,'<span style="display:inline-block; padding:0 2px;"> </span>'));});</script><div class="lstavFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div><div class="sfFRM"><span style="display:inline-block; vertical-align:middle; height:35px;"></span><span style="display:inline-block; vertical-align:middle;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div></div>
         <!-- END forumrow -->
        
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
     <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->

Partie CSS :

Code:

/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:5px auto;
width:750px; padding:10px 0; text-align:center;
border-bottom:10px solid grey; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:32px; text-transform:uppercase;
letter-spacing:2px; font-family:Arial; color:black; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px; padding-bottom:10px; text-align:center;
}
/* BLOC FORUM */
.FRM {
float:left; margin:15px 0;
width:390px; height:200px; overflow:hidden;
font-family:Arial; background:black; /* MODIFIABLE */
}
.FRM:nth-of-type(even) {
margin-left:20px;
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
width:390px; height:200px;
opacity:0.5;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:absolute; z-index:2; margin-top:-7px;
width:390px; text-align:center;
text-transform:uppercase; font-family:Arial; font-size:13px; font-weight:bold;
}
/* TITRE FORUM */
.tleFRM a {  
color:white !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
position:absolute; z-index:2; margin-top:25px;
width:290px; padding:4px 0 4px 100px;
font-size:10px; text-align:left;
background:grey; color:black /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; z-index:2; margin-top:51px;
width:285px; overflow:hidden;
text-align:right; font-size:9px;
color:white; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:white !important; /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR FORUM */
.lstavFRM {
position:absolute; z-index:3; margin-top:15px; margin-left:290px;
width:85px; height:50px; overflow:hidden;
}
.lstavFRM img {
width:85px;
}
/* ICÔNES FORUM */
.imgFRM {
position:absolute; z-index:4; margin-top:40px; margin-left:160px;
width:50px; height:50px;
}
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; z-index:2; margin-top:80px; margin-left:45px;
width:290px; height:75px; padding:5px; overflow-y:auto;
font-size:9px; text-align:justify;
background:lightgrey; color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:2; margin-top:180px; margin-left:25px;
width:330px; height:35px; padding:0 5px; overflow-y:auto;
text-align:center; text-transform:uppercase; font-size:9px; font-family:Arial;
background:grey; color:black; /* MODIFIABLE */
}
/* SOUS-FORUMS */
.sfFRM a {
font-size:9px;
color:black !important; /* MODIFIABLE */
}

Taille des images descriptives : 390*200

Instructions :



Encadrez le texte descriptif des balises suivantes :

Code:

<div class="descFRM"> Texte descriptif </div>

Bonjour ! J'aurais bien aimé un QEEL pour un forum que je construis. Merci de votre temps, en espérant que vous réalisiez ma requête.

Largeur maximale : 800px
Hauteur maximale : auto
Schéma : https://zupimages.net/up/18/05/z8aw.png
Éléments : Je pense que le schéma est assez explicite, il y a différentes parties à savoir : l'entête du "qui est en ligne" (avec une couleur de fond et les statistiques actuelles), en dessous les membres connectés actuellement et dans les dernières 24 heures, puis le nombre de messages et le nombre de membre, suivi par les copyrights du forum, plus bas un bloc afin de souhaiter la bienvenue au dernier à avoir rejoint le forum (avec son avatar à gauche) les différents groupes avec leur description et la couleur qui les caractérise, et enfin une image qui au survol révèle les prochains anniversaires.
Images : Aucune en particulier
Animations : Un filtre gris à 30% sur l'avatar qui disparait au survol si possible
Informations supplémentaires : Merci pour votre travail

Remplacez le code du QEEL [lignes 136 à 184] par celui-ci :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="QEEL"><!-- TITRE --><div class="tleQEEL"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a><!-- UTILISATEURS EN LIGNE --><span id="TLUS" style="font-size:9px;">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script></div><!-- CONNECTES & 24H  --><div class="ondayQEEL"><table>{LOGGED_IN_USER_LIST}</table><br/><!-- 24H --><table>{L_CONNECTED_MEMBERS}</table></div><!-- TOTAL MESSAGES & MEMBRES --><div class="stsQEEL"><!-- TOTAL MESSAGES --><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 /," ") .replace(/messages/," ");</script><br/>messages</div><!-- TOTAL MEMBRES --><div class="tlMQEEL"><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><br/>membres</div></div>

<!-- DISCLAIMER --><div class="cdtQEEL">QEEL par <a href="http://crushcrushcrush.actifforum.com/" target="_blank">Skaemp</a> d'après un croquis de Miraa.</div><br/>

<!-- DERNIER UTILISATEUR ENREGISTRE --><div class="lstQEEL"><!-- AVATAR --><span id="lstavQEEL"></span><!-- BIENVENUE -->Bienvenue à<br/><br/><br/><!-- PSEUDONYME --><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>

<!-- TRAITS COLORES GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background-color:#FA5858;"></span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background-color:#FF8000;"></span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background-color:#FFFF00;"></span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="background-color:#80FF00;"></span><!-- GROUPE 5 --><span class="onglet_0 onglet" id="onglet_funf" onmouseover="javascript:change_onglet('funf');" style="background-color:#0080FF;"></span><!-- GROUPE 6 --><span class="onglet_0 onglet" id="onglet_sechs" onmouseover="javascript:change_onglet('sechs');" style="background-color:#BF00FF;"></span><!-- GROUPE 7 --><span class="onglet_0 onglet" id="onglet_sieben" onmouseover="javascript:change_onglet('sieben');" style="background-color:#FE2EF7;"></span>

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

<!-- CONTENU GROUPE 1 --><div class="contenu_onglet" id="contenu_onglet_eins"><!-- NOM DU GROUPE --><div style="background:#FA5858;">Groupe I</div><!-- CONTENU --><p>Contenu groupe 1.</p></div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei"><div style="background:#FF8000;">Groupe II</div><!-- CONTENU --><p>Contenu groupe 2.</p></div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_drei"><!-- NOM DU GROUPE --><div style="background:#FFFF00;">Groupe III</div><!-- CONTENU --><p>Contenu groupe 3.</p></div><!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_vier"><!-- NOM DU GROUPE --><div style="background:#80FF00;">Groupe IV</div><!-- CONTENU --><p>Contenu groupe 4.</p></div><!-- CONTENU GROUPE 5  --><div class="contenu_onglet" id="contenu_onglet_funf"><!-- NOM DU GROUPE --><div style="background:#0080FF;">Groupe V</div><!-- CONTENU --><p>Contenu groupe 5.</p></div><!-- CONTENU GROUPE 6  --><div class="contenu_onglet" id="contenu_onglet_sechs"><!-- NOM DU GROUPE --><div style="background:#BF00FF;">Groupe VI</div><!-- CONTENU --><p>Contenu groupe 6.</p></div><!-- CONTENU GROUPE 7  --><div class="contenu_onglet" id="contenu_onglet_sieben"><!-- NOM DU GROUPE --><div style="background:#FE2EF7;">Groupe VII</div><!-- CONTENU --><p>Contenu groupe 7.</p></div>

</div></div>

<script type="text/javascript">
        //<!--
                var anc_onglet = 'eins';
                change_onglet(anc_onglet);
        //-->
        </script>
   
<!-- ANNIVERSAIRES --><div class="anvQEEL"><div><table>{L_WHOSBIRTHDAY_TODAY}</table></div></div>
      
</div></td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :

Code:

/* QEEL */
.QEEL {
margin:auto; width:800px; padding-bottom:15px;
text-align:center; font-family:Arial;
background:lightgrey; /* MODIFIABLE */
}
/* BLOC TITRE QEEL */
.tleQEEL {
margin-bottom:15px; padding:10px; text-align:right;
border-bottom:5px solid black; background:grey; color:black; /* MODIFIABLE */
}
/* TITRE QEEL */
.tleQEEL a {
text-transform:uppercase; font-size:24px;
color:black; /* MODIFIABLE */
}
#TLUS {
display:block; font-size:9px;
}
/* BLOC CONNECTES & 24H */
.ondayQEEL {
display:inline-block; vertical-align:top;
width:325px; height:128px; padding:5px; overflow:auto; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
font-size:10px; text-align:justify; font-family:Arial;
}
.ondayQEEL .row1 {
padding:0 !important; background:none !important;
}
/* COULEUR TEXTE 24H QEEL */
.ondayQEEL .gensmall {
font-family:Arial;
color:black; /* MODIFIABLE */
}
/* BLOC TOTAL MESSAGES & MEMBRES QEEL */
.stsQEEL {
display:inline-block; vertical-align:top; margin:0 15px;
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL {
margin-bottom:14px;
width:125px; height:45px; padding-top:15px; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-family:Arial; font-size:11px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
width:125px; height:45px; padding-top:15px; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-family:Arial; font-size:11px;
}
/* DISCLAIMER QEEL */
.cdtQEEL {
display:inline-block; vertical-align:top;
width:255px; height:128px; padding:5px; overflow-y:auto; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
text-align:justify; font-size:11px;
}
/* DERNIER UTILISATEUR QEEL */
.lstQEEL {
display:inline-block; vertical-align:top; margin-top:15px;
width:220px; height:126px; padding-left:100px; padding-top:20px; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
}
/* AVATAR DERNIER UTILISATEUR QEEL */
#lstavQEEL {
position:absolute; margin-left:-170px; margin-top:-25px;
width:100px; height:150px; overflow:hidden;
transform:rotate(-10deg); -webkit-transform:rotate(-10deg);
}
#lstavQEEL img {
width:100px; filter:grayscale(30%); -webkit-filter:grayscale(30%); transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.lstQEEL:hover #lstavQEEL img {
filter:grayscale(0); -webkit-filter:grayscale(0);
}
/* BLOC DESCRIPTIFS GROUPES QEEL */
.boxQEEL {
display:inline-block; vertical-align:bottom; margin-left:15px; margin-top:15px;
}
/* BLOC DESCRIPTIF GROUPE QEEL */
.contenu_onglet {
display:none;
width:430px; height:150px; overflow:hidden;
background:rgba(250,250,250,0.9); /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* NOM GROUPE QEEL */
.contenu_onglet div {
height:25px; padding-top:5px; overflow:hidden;
text-align:center; text-transform:uppercase; font-size:16px;
}
/* DESCRIPTIF GROUPE */
.contenu_onglet p {
margin:0;
width:420px; height:110px; padding:5px; overflow-y:auto;
font-size:10px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* BLOC TRAITS COLORES GROUPES QEEL */
.GQEEL {
position:absolute; margin-left:800px; margin-top:-150px;
width:75px; text-align:center;
}
/* TRAITS COLORES GROUPES QEEL */
.onglet {
display:block; margin-bottom:5px;
width:75px; height:15px;
opacity:0.5; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL TRAIT COLORE GROUPE QEEL */
.onglet_1 {
opacity:1; 
}
/* IMAGE ANNIVERSAIRES QEEL */
.anvQEEL {
margin:15px auto 0;
width:770px; height:35px;
background:url(image.png); /* MODIFIABLE */
}
/* ANNIVERSAIRES QEEL */
.anvQEEL div {
position:absolute;
width:750px; height:15px; padding:10px; overflow-y:auto;
text-transform:uppercase; text-align:center;
background:black; /* MODIFIABLE */
opacity:0; transition:opacity 0.55s ease; -webkit-transition:opacity 0.55s ease;
}
.anvQEEL:hover div {
opacity:1;
}
.anvQEEL .row1 {
width:750px; padding:0; background:none;
}
/* COULEUR TEXTE ANNIVERSAIRES QEEL */
.anvQEEL .row1 .gensmall {
font-family:Arial; font-size:11px;
color:white; /* MODIFIABLE */
}

Instructions :


Dans le template profile_view_body, remplacez :
Panneau d'administration > Affichage > Templates > Profil

Code:

{AVATAR_IMG}

Par :

Code:

<span id="avQEEL">{AVATAR_IMG}</span>

Code Javascript - adapté de ce sujet - à activer sur l'index :
Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript > Créer un nouveau Javascript

Code:

$(function(){
    $.get($("#nUSER a[href^='/u']")[0].href,function(d){
    (a=$("#avQEEL img",$(d))).length&&$("#lstavQEEL").html(a);})
    });

Coucou Skaemp :) Voici une suggestion de codage de catégorie que tu pourrais réaliser :) -je ne fais pas l'affront de te proposer de coder la bande sur le côté, comme tu ne le propose pas dans tes choix-.


Largeur maximale : Alors le tout fait 814px de large -ceci sans compter, évidemment, la couleur mauve sur les côtés. Avec celle-ci ça fait XXX. L'avatar fait 141px de large. Les forums -sans compte l'espace entre l'avatar et le forum ainsi que l'avatar- font 666px de large. L'écart entre le forum et l'image fait 10px de large. Le fond mauve, de chaque côté des catégories, fait 92px de large. Le petit bloc des statistiques -nombre de message et de topic- fait, -sans compter la bordure-, 73px de large. Les sous-forums font -sans compter la bordure- 77px de large. Finalement, le bloc mauve avec la description du forum, fait 310px de large.
Hauteur maximale : Les forums font 211px de haut. Les titres de catégories -qui sont en images- font 82px de haut. L'avatar fait 211px de haut. Les forums -sans compte l'espace entre l'avatar et le forum ainsi que l'avatar- font 211px de haut. L'écart entre les forums et le titre des catégories fait 10px de haut. L'écart entre chaque forum fait 10px de haut. Le fond mauve, de chaque côté des catégories, est en automatique -ça se trouve être le fond du forum-. Le petit bloc des statistiques -nombre de message et de topic- fait, -sans compter la bordure-, 23px de haut. Les sous-forums font -sans compter la bordure- 16px de haut. Le bloc tout en bas -le mauve- fait 64px de haut. Finalement, le bloc mauve avec la description du forum, fait 211px de haut.
Schéma : https://www.zupimages.net/up/18/05/9xms.png
Éléments : Alors les couleurs sont : #f0eee9 pour le blanc et #543946 pour le mauve. AH et pour les bordures des sous-forums et du nombre de topics/messages, ils font 1px :) Par contre je sais pas du tout comment la fille elle a mit cet espèce d'effet de flou à la bordure, donc je ne sais pas si c'est possible, mais si oui le flou fait également 1px. AH et si jamais, le fond du forum -l'espèce de mauve/brun- c'est #89716d.
Images :
Animations : Un niveau de gris au survol de l'avatar serait apprécié :) -niveau de gris et au survol la couleur redevient normale-. Tout ce qu'il y a de vu -description, nombre de sujet, dernier posteur, nom du forum, etc-, c'est ce qui apparait au survol. Je me demandais s'il serait possible que certains élément aient un effet particulier. Par exemple j'aimerais que le bloc de description apparaisse de la droite avec un léger effet de slide -un effet de glissement si vous préférez-. Pour le nombre de topics/messages, j'aimerais qu'il apparaisse d'en bas. Finalement pour le dernier posteur/nom du forum/nom du sujet répondu, j'aimerais qu'il apparaisse progressivement. Je ne sais pas si c'est possible que chaque éléments aient un effet différents. Si cela ne l'est pas, un simple glissement de la gauche vers la droite avec un léger rebondissement arrivé à la fin sera correct pour moi :)
Informations supplémentaires : En vous remerciant d'avance et vous souhaitant une agréable fin de journée/bonne nuit/bonne journée -selon le moment où vous verrez mon message :)-