Partagez | 
 

 Thème simple 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 simple I    Jeu 9 Juin - 5:33

EXPLICATIONS

Avant tout, ne soyez pas effrayez devant tous ces codes qui ne vous dises peut-être rien du tout. Vous n'avez qu'à suivre ces indications et vous devriez y arriver! Ce code est libre (uniquement sur AMC) à qui voudra s'en servir comme base et il peut être modifié selon vos préférences.

Tout d'abord, vous pouvez commencer par trouver une belle image et celle-ci doit être de 600px de largeur. Si vous n'êtes pas doué en graphisme, vous pouvez prendre une image que vous aimez et ,avec un logiciel comme Photofiltre, simplement la recadrer pour qu'elle fasse 600px de largeur. La hauteur importe peu, c'est comme vous le sentez!

Passons maintenant aux choses un peu plus sérieuses. Le codage. Pour les personnes prudentes, vous pouvez seulement changer les couleurs, selon l'image choisie. Les couleurs sont toutes les lettres ou tous les chiffres précédés de « # ». Par exemple, #ffffff est la couleur blanche et #000000 est la couleur noire. Afin de modifier les couleurs, vous pouvez utiliser la « pipette » de votre logiciel et prendre les couleurs sur votre image. Si vous désirez être encore plus prudents, vous pouvez remplacer ces séries de lettres/chiffres par la couleur voulue. Par exemple, vous pouvez remplacer #ffffff par white ou alors consulter ce site et trouver les couleurs qui vous conviennent!

Voici la liste des couleurs utilisées dans mon code et ce qu'elles représentent:

#ffffff (blanc): Contour entier du topic et titre des catégories.
#eeeeee: Couleur de fond du topic.
#bbbbbb: Ombre derrière les mots Ton Pseudo et Catégorie. Couleur également utilisée pour les bordures (sous Ton Pseudo, sous les catégories et autour des cartes) et les mots Tickets et Légende.

En faisant CTRL+F, vous pouvez rechercher ces codes de couleur et les remplacer par celles que vous préférez.

Attend! Comment bien s'assurer que je change le bon truc?

Pour vous aidez, je vais aussi faire un petit cours 101 de codage.

    - À chaque fois que la couleur est précédée de « border: ?px solid #couleur », vous allez changer la couleur des bordures (sous Ton Pseudo, sous les catégories et autour des cartes).

    - À chaque fois que la couleur est précédée de « color: #couleur », vous allez changer la couleur du texte.

    - À chaque fois que la couleur est précédée de « text-shadow: 2px 2px 0px #couleur », vous allez changer l'ombre derrière le texte (Ton Pseudo et Catégorie).

    - Et finalement, à chaque fois que la couleur est précédée de « background-color: #couleur », vous allez changer la couleur de fond.


Mais c'est quoi des bordures sous les catégories?

Il existe différents types de bordures: solid, double et dotted sont les plus utilisés.

    - Solid: Une barre remplie. Si le code est écrit « border-bottom:5px solid #couleur; », vous allez avoir une barre comme celle sous la deuxième catégorie.

    - Double: Une double barre. Si le code est écrit « border-bottom:5px double #couleur; », vous allez avoir une barre comme sur la première catégorie.

    - Dotted: Une barre pointillée. Si le code est écrit « border-bottom:5px dotted #couleur; », vous allez avoir une barre comme sur la dernière catégorie.


Vous pouvez donc choisir le style qui vous plaît le plus et il suffit de remplacer les mots « solid », « double » et « dotted ». Si vous êtes inquiets de le faire vous-même, je suis toujours à disposition!

Et c'est quoi une légende?

Vous pouvez choisir l'importance que vous accordez à vos cartes! Par exemple, une carte ayant comme légende 20/20 est presque impossible à avoir, tandis qu'une carte ayant 10/20 a moins d'importance aux yeux de son propriétaire.

Pour aider les nouveaux membres et les moins expérimentés du HTML, j'ai gardé le texte sous les cartes, mais vous pouvez remplacer le texte par une image et créer des légendes personnalisées!

Le reste, vous n'avez pas à vous en préoccuper, sauf si vous savez comment faire et que le langage HTML n'est plus un secret pour vous.

Et si vous avez la moindre question ou problème avec le code, vous pouvez me contacter en message privé!

Bonne chance!


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


TON PSEUDO

Citation Citation Citation Citation Citation Citation Citation Citation







TICKETS




LÉGENDE

TA LÉGENDE ICI





TA CATÉGORIE


NomNOTE CARTE 1 NomNOTE CARTE 2 NomNOTE CARTE 3NomNOTE CARTE 4 NomNOTE CARTE 5 NomNOTE CARTE 6



TA CATÉGORIE


NomNOTE CARTE 1 NomNOTE CARTE 2 NomNOTE CARTE 3NomNOTE CARTE 4 NomNOTE CARTE 5 NomNOTE CARTE 6



TA CATÉGORIE


NomNOTE CARTE 1 NomNOTE CARTE 2 NomNOTE CARTE 3NomNOTE CARTE 4 NomNOTE CARTE 5 NomNOTE CARTE 6





Code:
<center><div style="width:600px; background-color: #eeeeee; border: solid #ffffff 10px;">[img]http://image.noelshack.com/fichiers/2016/18/1462603722-image-exemple.png[/img]
<div style="font-family: georgia; font-size: 45px; letter-spacing:-3px; font-style:italic; color:#ffffff; text-align:left;margin-left:50px;text-shadow: 2px 2px 0px #bbbbbb;margin-top:10px;">TON PSEUDO</div>
<div style="font-family: georgia; font-size: 10px; letter-spacing:3px; font-style:italic; color:#bbbbbb; text-align:left;margin-left:50px; margin-top:-10px;">Citation Citation Citation Citation Citation Citation Citation Citation </div>

<center><div style="width:500px; border-bottom:3px double #bbbbbb;"></div></center>

<br>

<div style="font-family: georgia; font-size: 30px; letter-spacing:-3px; font-style:italic; color:#bbbbbb; text-align:left;margin-left:40px;">TICKETS</div>
<div style="width:530px; height:130px; border: solid #bbbbbb 1px; margin-left:20px; padding:10px; overflow:auto; margin-top:-18px;">[img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img][img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img][img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img][img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img][img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img][img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img]
</div>

<div style="font-family: georgia; font-size: 30px; letter-spacing:-3px; font-style:italic; color:#bbbbbb; text-align:left;margin-left:40px;">LÉGENDE</div>
<div style="width:530px; height:130px; border: solid #bbbbbb 1px; margin-left:20px; padding:10px; overflow:auto; margin-top:-18px;">TA LÉGENDE ICI
</div>

<br>

<div style="font-family: georgia; font-size: 45px; letter-spacing:-3px; font-style:italic; color:#ffffff; text-align:left;margin-left:10px; margin-top:71px; text-shadow: 2px 2px 0px #bbbbbb;">TA CATÉGORIE</div>
<div style="margin-top:-10px;width:600px; border-bottom:5px double #bbbbbb;"></div>
<div style="width:530px; border: solid #d5d1cc 1px; margin-left:20px; padding:10px; margin-top:-5px;"><div class="volet"><span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 1</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 2</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 3</span></span><span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 4</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 5</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 6</span></span>
</div></div>


<div style="font-family: georgia; font-size: 45px; letter-spacing:-3px; font-style:italic; color:#ffffff; text-align:left;margin-left:10px; margin-top:71px;text-shadow: 2px 2px 0px #bbbbbb;">TA CATÉGORIE</div>
<div style="margin-top:-10px;width:600px; border-bottom:5px solid #bbbbbb;"></div>
<div style="width:530px; border: solid #d5d1cc 1px; margin-left:20px; padding:10px; margin-top:-5px;"><div class="volet"><span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 1</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 2</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 3</span></span><span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 4</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 5</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 6</span></span>
</div></div>


<div style="font-family: georgia; font-size: 45px; letter-spacing:-3px; font-style:italic; color:#ffffff; text-align:left;margin-left:10px; margin-top:71px;text-shadow: 2px 2px 0px #bbbbbb;">TA CATÉGORIE</div>
<div style="margin-top:-10px;width:600px; border-bottom:5px dotted #bbbbbb;"></div>
<div style="width:530px; border: solid #d5d1cc 1px; margin-left:20px; padding:10px; margin-top:-5px;"><div class="volet"><span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 1</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 2</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 3</span></span><span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 4</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 5</span></span> <span><img src="http://nsm08.casimages.com/img/2013/09/17//13091703233215914311559777.png" alt="Nom" /><span>NOTE CARTE 6</span></span>
</div></div>


</div></center>




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


Spoiler:
 


Dernière édition par Brownie le Sam 11 Juin - 6:09, édité 2 fois

Revenir en haut Aller en bas
Saïma
avatar
ADMINISTRATRICE


Féminin

Nombre de cartes11/40
Points181


MessageSujet: Re: Thème simple I    Ven 10 Juin - 21:03

Super ton tuto Brownie merci pour ta contribution ♥
J'aurais une seule critique à faire sur le choix de la mise en forme des cartes : le codage de l'effet éventail est un code relativement joli mais hélas assez limité, étant donné qu'il fonctionne très bien de droite à gauche en y passant la souris, mais très mal de gauche à droite puisqu'il saute une carte sur deux... Donc je le déconseille de manière générale, à moins qu'on puisse améliorer ses paramètres xD



Revenir en haut Aller en bas
Brownie
avatar
+ 1.000 messages
+ 1.000 messages


Féminin

Nombre de cartes25/42
Points267
CARTE FAVORITE



MessageSujet: Re: Thème simple I    Ven 10 Juin - 21:26

Merci Saïma ♥
Effectivement, le style volet pose un problème de déplacement, mais il permet en même temps de mettre plus de cartes sur une seule ligne... Un bien pour un mal? Libre aux gens de changer le code pour les cartes! Ceci n'est qu'une mise en forme et il peut être modifié!

Si quelqu'un a un peu trop peur de modifier le codage des volets, je peux le faire pour lui!




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


Spoiler:
 

Revenir en haut Aller en bas
Contenu sponsorisé





MessageSujet: Re: Thème simple I    


Revenir en haut Aller en bas
 

Thème simple 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-