AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

Annuaire forum rpg : L'Antre du rpg :: Le coup de pouce de l'Antre :: Entraide commune :: EncyclopédiePartagez

Quelques habillages préfabriqués

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage

Siana

Siana

Âme errante de l'Antre.

Messages : 34

Date d'inscription : 06/08/2012


MessageSujet: Quelques habillages préfabriqués Quelques habillages préfabriqués Icon_minitimeSam 8 Sep 2012 - 16:49
Voici quelques codes d'habillages préfabriqués pour votre contexte, votre fiche de pub ou de vos prédéfinis (codage CSS/Html). Ils sont accessibles à tous. Ils peuvent donc être utilisés sur plusieurs forum RPG.

Tous les codes postés ici ont été réalisés par moi-même. Je les mets à votre disposition. Je ne demande qu'une chose en échange : ne pas toucher aux crédits intégrés dans l'habillage. C'est un juste retour pour le temps passé à vous créer ces "codes cadeaux".
Merci de votre compréhension.

Pour personnaliser un habillage préfabriqué, il vous suffit de remplir là où se trouvent les mentions en majuscule. Certaines mentions vous indiquent la taille de l'image, son format (portrait ou paysage), la longueur minimale du texte avant activation du scroll.
Exemples de mentions à remplir par vous-même :
- NOM DU PERSONNAGE
- QUALITÉ 1
- NOM DU JEU
- HISTOIRE DU PERSONNAGE
- URL AVATAR DU PJ
N'oubliez pas de compléter la dernière ligne (celle des crédits) avec les mentions concernant les images et le contenu texte.

Pour changer les couleurs, comme celle de la bordure ou du texte, il vous suffit de changer le code couleur de base. Il vous suffit de changer par celui de votre choix.

Exclamation Tous points communs/similitudes/ressemblances/ dans un de mes habillages, avec un code créé par quelqu'un d'autre, sont fortuits.

Afin de ne pas alourdir et ralentir les pages de ce sujet, par le cumul d'habillages, le visuel de chaque code est mis en spoiler.
Revenir en haut Aller en bas

Siana

Siana

Âme errante de l'Antre.

Messages : 34

Date d'inscription : 06/08/2012


MessageSujet: Re: Quelques habillages préfabriqués Quelques habillages préfabriqués Icon_minitimeSam 8 Sep 2012 - 16:52
Habillage 1


Habillage pour fiche prédéfini et PJ - Dérouler le spoiler pour le voir:
Exemple visuel de l'habillage complété:
Dans cet exemple d'habillage personnalisé, vous verrez que les gifs animés apportent un bel effet. En mettre un ou deux peut rendre la fiche d'un PJ plus vivante (surtout si la bannière est animée !). Ne pas en abuser pour autant, il ne faut pas ralentir le chargement de la page sinon le visiteur peut fuir !
Code:
<div style="border: 5px #000000 solid;width:99%; background-image: url('IMAGE FOND DE LA FICHE'); background-size: 100% 100%;"><center><br><div style="display: block; text-align: center; font-size:40px;font-family: impact;color: #000000;">NOM DU PERSONNAGE</div><div style="display: block; text-align: center; font-size: 10px; color: #000000;margin-top:5px;">Feat NOM CÉLÉBRITÉ ILLUSTRANT LE PJ</div><br><center><div style="border-right: 2px #000000 solid; border-left: 2px #000000 solid; border-top: 2px #000000 solid; width:90%; height:200px; background-image: url('URL AVATAR DU PJ EN FORMAT PAYSAGE AVEC HAUTEUR DE 200PX'); background-size: 100% 100%;"></div><div style="text-align: justify; font-size: 12px; color: #000000; width:90%; height: 500px;background-image: url('http://img86.xooimage.com/files/3/5/7/sans-titre-36f8536.jpg'); background-size: 100% 100%; border-right: 2px #000000 solid; border-left: 2px #000000 solid; border-bottom: 2px #000000 solid;"><table><tr><td><div style="width:200px;height:70px;"><select size="1" name="Qualités" style="background-color:#ffffff;color:#000000;width:100%;"><option>Qualités</option><option>QUALITÉ 1</option><option>QUALITÉ 2</option><option>QUALITÉ 3</option></select><select size="1" name="Défauts" style="background-color:#ffffff;color:#000000;width:100%;"><option>Défauts</option><option>DÉFAUT 1</option><option>DEFAUT 2</option><option>DEFAUT 3</option></select></div><center><div style="width:100px; height:405px;"><div style="border:1px #000000 solid;width:90%; height:90px;background-image:url('MINI AVATAR DU PJ FORMAT 100PX SUR 100PX');background-size:100% 100%;-moz-transform:rotate(-10deg);"></div><div style="border:1px #000000 solid;width:90%; height:90px;background-image:url('MINI AVATAR DU PJ FORMAT 100PX SUR 100PX');background-size:100% 100%;-moz-transform:rotate(10deg);"></div><div style="border: 1px #000000 solid;width:90%; height:90px;background-image:url('MINI AVATAR DU PJ FORMAT 100PX SUR 100PX');background-size:100% 100%;-moz-transform:rotate(-10deg);"></div><div style="border: 1px #000000 solid;width:90%; height:90px;background-image:url('MINI AVATAR DU PJ FORMAT 100PX SUR 100PX');background-size:100% 100%;-moz-transform:rotate(10deg);"></div></div></center></td><td><div style="width:100%;height:490px;overflow:auto;"><table cellpadding="5"><tr><td>HISTOIRE DU PERSONNAGE</td></tr></table></div></td></tr></table></div><br><div style="width:90%;background-color:#ffffff;"><div style="width:100%;font-size:30px;margin:10px;font-family: impact;">LIENS</div><table style="margin-bottom:10px;" style="align:left;"><tr><td><div style="background-image: url('AVATAR LIEN 1'); background-size: 100% 100%;width:100px;height:100px;border: 1px #000000 solid;"></div></td><td><div style="color:#000000;text-align:justify;height:100px;overflow:auto;">NATURE LIEN 1</div></td><td><div style="background-image: url('AVATAR DU LIEN 2'); background-size: 100% 100%;width:100px;height:100px;border: 1px #000000 solid;"></div></td><td><div style="color:#000000;text-align:justify;height:100px;overflow:auto;">NATURE LIEN 2</div></td></tr></table><table style="color:#000000;align:left;"><tr><td><div style="text-align:justify;height:100px;overflow:auto;">NATURE LIEN 3</div></td><td><div style="background-image: url('AVATAR LIEN 3'); background-size: 100% 100%;width:100px;height:100px;border: 1px #000000 solid;"></div></td><td><div style="color:#000000;text-align:justify;height:100px;overflow:auto;">NATURE LIEN 4</div></td><td><div style="background-image: url('AVATAR LIEN 4'); background-size: 100% 100%;width:100px;height:100px;border: 1px #000000 solid;"></div></td></tr></table></div>
</center></div><div style="display: block; text-align: center; text-decoration: none !important; font-size: 8px; color: #000000;">(c) CREDITS Code : <a href="http://imaginarium-rp.xooit.com"/index.php">Siana</a> - Code obtenu sur <a href="http://antredurpg.1fr1.net/">l'Antre du RPG</a> - Background : CREDIT DU FOND - Avatars : CREDIT DES AVATARS - Texte : CREDIT DU CONTENU TEXTE</div>

Exclamation Infos concernant ce code :

  • La fiche est réalisée en pourcentage. Cela signifie qu'elle s'adaptera à la largeur du forum. Quelque soit le forum, elle apparaitra comme sur le visuel, elle sera plus ou moins large et ne déformera pas la largeur de votre forum.
  • Dans le contenu texte principal, le scroll (barre de défilement verticale) s'active au-delà de 250 mots environ. Cela varie en fonction de la largeur de votre forum (par exemple, sur mon forum, c'est vers les 200 mots. Ici, sur l'Antre, c'est autour des 300 mots).
  • L'avatar sous forme de bannière n'est pas une chose commune ! Elle est agréable à regarder mais a un inconvénient : elle joue sur la qualité de l'image. Pourquoi ? Parce que la hauteur est fixée à 200px (sur cette fiche) et la largeur est en pourcentage pour s'adapter à celle de la fiche et donc du forum. De plus, il y a un code qui permet à l'image au cadre, quelque soit la taille de l'image. Si l'image fait 300px de haut, le code la retaille à 200px sans la rogner (l'image reste identique mais moins haute). Par conséquent : il arrive que l'image semble un peu déformée, comme à la tv quand on est en format 16/9. Pour éviter une trop grosse déformation, je vous conseille de prendre une image proche des 200px de hauteur et d'une largeur à peu près similaire à celle de vos posts.
  • Pour les images dans les petits carrés, même topo que pour l'avatar sous forme de bannière : il y a un auto-redimensionnement de l'image afin qu'elle prenne une taille de 100px sur 100px. Je vous conseille donc de prendre des images carrées. Ainsi, lors du redimensionnement, elle ne sera pas du tout déformée. Ne prenez pas une image trop grande car sinon, le résultat sera tout petit et pas visible. Je vous conseille un maximum de 400px sur 400px.
Revenir en haut Aller en bas

Siana

Siana

Âme errante de l'Antre.

Messages : 34

Date d'inscription : 06/08/2012


MessageSujet: Re: Quelques habillages préfabriqués Quelques habillages préfabriqués Icon_minitimeDim 9 Sep 2012 - 16:41
Habillage 2


Habillage pour fiche prédéfini et PJ - Dérouler le spoiler pour le voir:
Exemple visuel de l'habillage complété:
Dans cet exemple d'habillage personnalisé, pas de fioriture. Comme quoi, le simple fait autant d'effet que les fiches scintillantes, avec strass et paillettes.

Code:
<div style="border: 6px solid #ffffff; border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -htm-border-radius: 50px; -webkit-border-radius: 50px; widht:99%; background-color:#ffffff"><div style="border: 6px solid #ffffff; border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -htm-border-radius: 50px; -webkit-border-radius: 50px; widht:99%; background-image: url('IMAGE FOND DE LA FICHE'); background-size: 100% 100%"><br><div style="display: block; text-align: center; font-size: 30px; color: #ffffff; letter-spacing: 2px;">NOM DU PERSONNAGE</div><div style="display: block; text-align: center; font-size: 10px; color: #ffffff; letter-spacing: 2px;">Feat NOM CÉLÉBRITÉ ILLUSTRANT LE PJ</div><br><br><center><div style="width:90%; align:center;"><table><tr><td><div style="width:200px;height:250px;background-image:url('URL AVATAR DU PJ');background-size: 100% 100%;border: 6px solid #ffffff; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px;"></div></td><td rowspan="2"><div style="text-align: justify; font-size: 12px; color: #000000; width:100%; height: 415px; overflow:auto; background-image: url('http://img86.xooimage.com/files/3/5/7/sans-titre-36f8536.jpg'); background-size: 100% 100%; border: 6px solid #ffffff; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px;"> HISTOIRE DU PERSONNAGE</div></td></tr><tr><td><div style="width:200px;border: 6px solid #ffffff; border-top-left-radius: 10px;-Webkit-border-top-left-radius: 10px;border-top-right-radius: 10px;-Webkit-border-top-right-radius: 10px;background-image: url('http://img86.xooimage.com/files/3/5/7/sans-titre-36f8536.jpg'); background-size: 100% 100%;color:#000000;overflow:auto;height:100px;text-align:justify;">INFO SUPPLÉMENTAIRES</div><div style="width:200px;border: 6px solid #ffffff; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px;background-image: url('http://img86.xooimage.com/files/3/5/7/sans-titre-36f8536.jpg'); background-size: 100% 100%;color:#000000;overflow:auto;border-bottom-left-radius: 10px;-Webkit-border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;-Webkit-border-bottom-right-radius: 10px;"><select size="1" name="Qualités" style="width:200px;background-color:#ffffff;color:#000000;"><option>Qualités</option><option>Qualité 1</option><option>Qualité 2</option><option>Qualité 3</option></select><select size="1" name="Défauts" style="background-color:#ffffff;color:#000000;width:200px;"><option>Défauts</option><option>défaut 1</option><option>défaut 2</option><option>défaut 3</option></select></div></td></tr></table></div></center><br></div><div style="display: block; text-align: center; text-decoration: none !important; font-size: 7px; color: #253f4d; letter-spacing: 2px(c) CREDITS Code :  <a href="http://imaginarium-rp.xooit.com"/index.php">Siana</a> - Code obtenu sur <a href="http://antredurpg.1fr1.net/">l'Antre du RPG</a> - Background : CREDIT DU FOND - Avatars : CREDIT AVATAR - Texte : CREDIT DU CONTENU TEXTE</div><div style="clear: both;"></div></div>

Exclamation Infos concernant ce code :

  • La fiche est réalisée en pourcentage. Cela signifie qu'elle s'adaptera à la largeur du forum. Quelque soit le forum, elle apparaitra comme sur le visuel, elle sera plus ou moins large et ne déformera pas la largeur de votre forum.
  • Dans le contenu texte principal, le scroll (barre de défilement verticale) s'active au-delà de 250 mots environ. Cela varie en fonction de la largeur de votre forum et des paramètres concernant la police de votre forum (par exemple, sur mon forum, c'est vers les 130 mots. Ici, sur l'Antre, c'est autour des 340 mots).
  • L'avatar est auto-redimensionné sans rognage si celui-ci dépasse les 250px de haut et les 200px de large. Par conséquent : je vous conseille de prendre un avatar vertical proche des dimensions du cadre pour éviter une déformation et une pixellisation de l'image.
  • Pour le background, auto-redimensionnement (là aussi, oui je sais, j'aime la formule "background-size:100% 100%;"). Donc à vous de prendre un fond qui peut s'adapter à l'auto-redimensionnement.
Revenir en haut Aller en bas

Contenu sponsorisé



MessageSujet: Re: Quelques habillages préfabriqués Quelques habillages préfabriqués Icon_minitime
Revenir en haut Aller en bas

Quelques habillages préfabriqués

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

Sujets similaires

-
» Quelques liens gratuits pour faire sa pub

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Annuaire forum rpg : L'Antre du rpg :: Le coup de pouce de l'Antre :: Entraide commune :: Encyclopédie-