Partagez | 
 

 Thème modéré I

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Brownie
avatar
+ 1.000 messages
+ 1.000 messages


Féminin

Nombre de cartes25/42
Points267
CARTE FAVORITE



MessageSujet: Thème modéré I   Lun 20 Juin - 9:34

EXPLICATIONS

Je sais, je sais, mes thèmes manquent affreusement de couleur, mais c'est pour vous aider à mieux comprendre comment fonctionne le code! Celui-ci est inspiré de mon propre topic de cartes et j'ai essayé de le simplifier un peu.

Il y a beaucoup plus de codage que dans les thèmes simples, mais si vous suivez mes instructions à la lettre, vous devriez y arriver!

Avec ce codage, vous devrez être en mesure d'ajuster les hauteurs! Plus vous aurez de cartes dans une catégorie, plus vous devrez augmenter les hauteurs. Dans le code que je fournis, vous pouvez y mettre 2 lignes de 5 cartes. Si vous avez besoin d'une ligne supplémentaire, vous devrez alors modifier le code vous-même, si vous en avez le courage, ou venir me voir!

La taille d'une catégorie de base est de 400px de hauteur par 475px de largeur. Le cadre intérieur est de 335 de hauteur par 420px de largeur. Ces tailles peuvent avoir 2 lignes de 5 cartes.

En faisant des tests, j'ai trouvé approximativement les tailles pour 3 et 4 lignes de 5 cartes. La largeur reste identique, seule la hauteur augmente!

    3 lignes: Catégorie (550px hauteur) Cadre (485px hauteur)
    4 lignes: Catégorie (700px hauteur) Cadre (625px hauteur)


Pour les couleurs, comme à l'habitude je vous dis ce qu'ils représentent! Si vous avez besoin d'explications supplémentaires, vous pouvez en trouver dans mes deux autres thèmes simples!

    Grey: Fond de Mon Pseudo, Légende et Chez les autres membres.
    White ou #fff: Couleur du texte Mon Pseudo, couleur du texte Ta Catégorie, couleur du texte Légende ainsi que son cadre, couleur du texte Chez les autres membres ainsi que son cadre.
    #bbb: Couleur de fond de Cartes Recherchées, couleur du texte Tickets, couleur de fond Ta Catégorie, couleur du cadre des Catégories.
    #eee: Couleur de fond Tickets, couleur du texte Cartes Recherchées, couleur de fond des Catégories
    Black: Couleur du texte Cote


Évidemment, toutes ces couleurs peuvent être changées à votre guise!

Il y a un petit plus pour la partie Légende, où vous avez un « tableau » qui divise la légende en trois parties horizontales. Vous pouvez la retirer en enlevant les codes:
Code:
<table><tr><td></td></tr></table>
Je recommande deux légendes par rangées, mais vous êtes libre de faire ce qu'il vous plaît!

La cote a ce code:
Code:
<div style="color:black;">[b]COTE[/b]</div>
Vous pouvez la remplacer par une image ou un texte selon votre légende! Pour simplifier, j'ai laissé en texte.


---------------------------------------------------------

TON PSEUDO
CARTES RECHERCHÉES
Il est gentil, trop gentil, le petit oisillon tombé du nid. Quand on a besoin d'aide, d'un coup de main, d'une épaule sur laquelle se tenir, Sparrow sera toujours là et vous relèvera avec la force de ses petites ailes. Oui, il aurait bien voulu en avoir de plus grandes, pour pouvoir voler très très haut. Si seulement il avait été plus fort;
TICKETS
LÉGENDE
♚ = (Presque) Intouchable
♥♥♥♥♥ = Très (très) difficile
♥♥♥♥ = Difficile
♥♥♥ = Moyennement difficile
♥♥ = Moyen
♥ = Facile
TA CATÉGORIE
TA CATÉGORIE
CHEZ LES AUTRES MEMBRES
Un oisillon faible qui allait toutefois être sauvé par quelqu'un qui passait par là. Mes parents n'avaient peut-être pas entendu mon appel (je préfère penser cette idée), mais elle avait entendu. Et sans explication, sans raison, elle avait accouru, ses pieds s'enfonçant dans la neige et m'avait tendu la main pour m'aider à me redresser. Elle m'avait mis son foulard, sa chaleur s'était propagée dans mes membres congelés et je l'avais suivi. Depuis lors, elle m'avait élevé, comme une maman oiseau, elle m'avait nourrit et avait pris soin de mes petites ailes.



Code:
<center><div style="background-color:grey; height:100px; width:600px;"><div style="font-size:50px;color:white;text-transform:uppercase;line-height:65px;text-align:center;padding-top:15px;">TON PSEUDO</div></div><table><tr><td><div style="background-color:#bbb; height:400px; width:200px;"><div style="color:#eee; margin-top:0px; margin-left:20px;"><b>CARTES RECHERCHÉES</b></div><div style="border:1px solid #eee; padding:15px;width:148px; height:330px;margin-left:10px;text-align:justify;color:#eee;overflow:auto;">Il est gentil, trop gentil, le petit oisillon tombé du nid. Quand on a besoin d'aide, d'un coup de main, d'une épaule sur laquelle se tenir, Sparrow sera toujours là et vous relèvera avec la force de ses petites ailes. Oui, il aurait bien voulu en avoir de plus grandes, pour pouvoir voler très très haut. Si seulement il avait été plus fort;</div></div></td><td><div style="background-color:#eee; height:400px; width:395px;"><div style="color:#bbb; margin-top:0px; margin-left:20px;"><b>TICKETS</b></div><div style="border:1px solid #bbb; padding:15px;width:342px; height:330px;margin-left:10px;text-align:justify;color:#bbb;overflow:auto;">[img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img][img]http://image.noelshack.com/fichiers/2016/20/1463512640-ticketboutique50-brownie-17052016.png[/img]</div></div></td></tr></table><div style="background-color:grey; height:100px; width:600px;"><div style="color:#fff; margin-top:0px; margin-left:0px;"><b>LÉGENDE</b></div><div style="border:1px solid #fff; padding:15px;width:530px; height:35px;margin-left:0px;text-align:justify;color:#fff;overflow:auto;"><center><table><tr><td>♚ = (Presque) Intouchable
♥♥♥♥♥ = Très (très) difficile</td><td>♥♥♥♥ = Difficile
♥♥♥ = Moyennement difficile</td><td>♥♥ = Moyen
♥ = Facile</td></tr></table></center></div></div><table><tr><td><div style="background-color:#bbb;width:120px;height:400px;"><div style="font-size:17px;color:white;text-align:left;padding-left:10px;padding-top:15px;">TA CATÉGORIE</div></div></td><td><div style="background-color:#eee; width:475px;height:400px;">
<div style="border:1px solid #bbb; padding:15px;width:420px; height:335px;margin-left:10px;text-align:center;color:#bbb;"><div style="margin-top:-10px;"><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a>
<a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a></div></div></div></td></tr></table><table><tr><td><div style="background-color:#eee; width:475px;height:400px;">
<div style="border:1px solid #bbb; padding:15px;width:420px; height:335px;margin-left:10px;text-align:center;color:#bbb;"><div style="margin-top:-10px;"><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a>
<a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a></div></div></div></td><td><div style="background-color:#bbb;width:120px;height:400px;"><div style="font-size:17px;color:white;text-align:left;padding-left:10px;padding-top:15px;">TA CATÉGORIE</div></div></td></tr></table><div style="background-color:grey; height:200px; width:600px;"><div style="color:#fff; margin-top:0px; margin-left:0px;"><b>CHEZ LES AUTRES MEMBRES</b></div><div style="border:1px solid #fff; padding:15px;width:530px; height:135px;margin-left:0px;text-align:justify;color:#fff;overflow:auto;">Un oisillon faible qui allait toutefois être sauvé par quelqu'un qui passait par là. Mes parents n'avaient peut-être pas entendu mon appel (je préfère penser cette idée), mais elle avait entendu. Et sans explication, sans raison, elle avait accouru, ses pieds s'enfonçant dans la neige et m'avait tendu la main pour m'aider à me redresser. Elle m'avait mis son foulard, sa chaleur s'était propagée dans mes membres congelés et je l'avais suivi. Depuis lors, elle m'avait élevé, comme une maman oiseau, elle m'avait nourrit et avait pris soin de mes petites ailes.</div></div>
</center>

    Pour ajouter deux catégories, copiez le code suivant et collez-le après le dernier <**/table>:

Code:
<table><tr><td><div style="background-color:#bbb;width:120px;height:400px;"><div style="font-size:17px;color:white;text-align:left;padding-left:10px;padding-top:15px;">TA CATÉGORIE</div></div></td><td><div style="background-color:#eee; width:475px;height:400px;">
<div style="border:1px solid #bbb; padding:15px;width:420px; height:335px;margin-left:10px;text-align:center;color:#bbb;"><div style="margin-top:-10px;"><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a>
<a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a></div></div></div></td></tr></table><table><tr><td><div style="background-color:#eee; width:475px;height:400px;">
<div style="border:1px solid #bbb; padding:15px;width:420px; height:335px;margin-left:10px;text-align:center;color:#bbb;"><div style="margin-top:-10px;"><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a>
<a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png" height="150" width="80"/><span><img src="http://image.noelshack.com/fichiers/2016/24/1466199723-suzuya-juuzou.png"/ alt="Nom"><div style="color:black;">[b]COTE[/b]</div></span></a></div></div></div></td><td><div style="background-color:#bbb;width:120px;height:400px;"><div style="font-size:17px;color:white;text-align:left;padding-left:10px;padding-top:15px;">TA CATÉGORIE</div></div></td></tr></table>




« If you have the time to think about a beautiful end, then live beautifully until the end. »


Spoiler:
 

Revenir en haut Aller en bas
 

Thème modéré I

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: La Place publique :: Topics Libre Service-