La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
La tambouille des râleuses

Tutoriels, libre-service, entraide et partage en gestion de forums, animation et codage (HTML, CSS, Javascript, Template) pour forum sous ForumActif.

Le deal à ne pas rater :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal

Fiche (Personnage, pub, RP, règlement, ...)

La tambouille des râleuses :: Coup de pouce :: Codes en libre-service
Répondre au sujet
Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Très peu présente en ce moment Sad
----
Idea Viens papoter avec nous sur le discord
Messages : 4055
https://tambouille-raleuses.forumactif.com/
+

Fiche (Personnage, pub, RP, règlement, ...) Empty Fiche (Personnage, pub, RP, règlement, ...)

Dim 19 Mai 2019 - 10:57

Fiche (Personnage, pub, RP, règlement, ...)


Bonjour !

Je viens te proposer ici une fiche multi-fonction Wink Personnellement je m'en sers en fiche d'analyse, mais elle peut aussi servir pour mettre en page un règlement, une présentation, une pub, etc... Voilà l'aperçu :

bannière
Grand titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.

Sous-titre
sous-sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.

sous-sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.

Fiche réalisée par Mäven



Exclamation Merci de laisse le copyright en bas de la fiche.
Idea Les couleurs, polices et contours sont personnalisables, des blocs peuvent être ajoutés. Si tu n'arrives pas à le faire seul, n'hésite pas à ouvrir une demande d'aide.

Pour utiliser sur ton propre forum

Si tu souhaite utiliser ce code pour ton propre forum, tu peux mettre la CSS directement dans ta feuille de style CSS (PA > Affichage > Couleurs > Feuille de style CSS).
Exclamation La CSS n'est pas commentée. Si tu as la moindre question pour la compréhension ou la personnalisation je serai ravie de te répondre.
Code:
#mavenFiche{
width:85%;
max-width:950px;
background-color:#8a8a8a;
margin:auto;
text-align:justify;
border:2px black solid;
color:#fff;
font-size:12px;
}
#mavenFiche img.bann{
display:block;
margin:auto;
width:60%;
}
#mavenFiche .titre_1{
font-variant:small-caps;
text-align:center;
font-size:28px;
font-style:italic;
}
#mavenFiche .titre_2{
font-variant:small-caps;
text-align:center;
margin:5px auto 0;
padding:0;
background-color:white;
font-size:20px;
border-top:4px double black;
border-bottom:4px double black;
line-height:25px;
color:black;
}
#mavenFiche .titre_3{
font-variant:small-caps;
margin:5px;
padding:0;
font-size:16px;
line-height:20px;
color:black;
text-decoration:underline;
}
#mavenFiche p {
padding:10px;
text-indent:15px;
}
#mavenFiche p#cp {
text-align:center;
font-size:10px;
font-style:italic;
}
#mavenFiche a{
font-variant:small-caps;
color:black;
}

Et la partie HTML pour tes sujets :
Arrow Ne pas retirer les commentaires
Code:
<!-- -->
ils permettent d'aérer le code sans créer d'espaces non voulus dans la fiche. Pour plus d'informations, [ rendez-vous ici]

Code:
<div id="mavenFiche"><!--

-->
<img src="http://pvereecken.fr/tambouille/bann-tambouille.png" alt="bannière" class="bann" />
<!--

--><div class="titre_1">Grand titre</div>
<!--

--><div class="titre_2">Sous-titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.
</p><!--

--><div class="titre_2">Sous-titre</div><!--

--><div class="titre_3">sous-sous titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><div class="titre_3">sous-sous titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><div class="titre_2">Sous-titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><p id="cp">Fiche réalisée par <a href="http://tambouille-raleuses.forumactif.com/">Mäven</a></p></div>

Pour utiliser sur un forum qui n'est pas le tien

Si tu veux créer ta propre fiche sur un forum qui n'est pas le tien tu n'as pas accès au PA. Tu peux tout de même utiliser cette fiche avec le code qui suit.
Arrow Ne pas retirer les commentaires
Code:
<!-- -->
ils permettent d'aérer le code sans créer d'espaces non voulus dans la fiche. Pour plus d'informations, [ rendez-vous ici]
Code:
<style>#mavenFiche{width:85%;max-width:950px;background-color:#8a8a8a;margin:auto;text-align:justify;border:1px #000 solid;color:#fff;font-size:12px}#mavenFiche img.bann{display:block;margin:auto;width:60%}#mavenFiche .titre_1{font-variant:small-caps;text-align:center;font-size:28px;font-style:italic}#mavenFiche .titre_2{font-variant:small-caps;text-align:center;margin:5px auto 0;padding:0;background-color:#fff;font-size:20px;border-top:4px double #000;border-bottom:4px double #000;line-height:25px;color:#000}#mavenFiche .titre_3{font-variant:small-caps;margin:5px;padding:0;font-size:16px;line-height:20px;color:#000;text-decoration:underline}#mavenFiche p{padding:10px;text-indent:15px}#mavenFiche p#cp{text-align:center;font-size:10px;font-style:italic}#mavenFiche a{font-variant:small-caps;color:#000}</style><div id="mavenFiche"><!--

-->
<img src="http://pvereecken.fr/tambouille/bann-tambouille.png" alt="bannière" class="bann" />
<!--

--><div class="titre_1">Grand titre</div>
<!--

--><div class="titre_2">Sous-titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque.
</p><!--

--><div class="titre_2">Sous-titre</div><!--

--><div class="titre_3">sous-sous titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><div class="titre_3">sous-sous titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><div class="titre_2">Sous-titre</div><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum est tortor, et vehicula lorem suscipit a. Proin facilisis erat nibh, nec pharetra metus hendrerit vel. Donec ullamcorper consectetur accumsan. Fusce bibendum orci ac nulla auctor ullamcorper. In eros eros, pharetra sed quam at, molestie viverra magna. Aenean ultrices hendrerit sapien, vel viverra risus lobortis sit amet. Duis scelerisque nisl mollis lacus laoreet, vel laoreet est imperdiet. Nulla eu purus tincidunt, consectetur dui id, fermentum leo. Quisque interdum, metus vitae sollicitudin aliquam, ipsum magna pretium dolor, nec pretium massa sapien ac velit. Nulla laoreet vestibulum scelerisque. </p><!--

--><p id="cp">Fiche réalisée par <a href="http://tambouille-raleuses.forumactif.com/">Mäven</a></p></div>

Quelques "trucs" pour le contenu


Pour ajouter un grand titre :
Code:
<div class="titre_1">Grand titre</div>
Un sous-titre :
Code:
<div class="titre_2">Sous-titre</div>
Un sous-sous-titre :
Code:
<div class="titre_3">Sous-sous-titre</div>
Pour ajouter du texte et qu'il y ai la mise en page (retrait en début de paragraphe et écart par rapport à la bordure) :
Code:
<p>ton texte</p>


Si quelque chose n'est pas clair, n'hésite pas à le dire. J'espère que cette fiche te plaira et te sera utile Smile

Revenir en haut
La tambouille des râleuses :: Coup de pouce :: Codes en libre-service
Répondre au sujet
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses

•