Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

[Fiche] Simple avec image en haut Empty [Fiche] Simple avec image en haut

le Mer 3 Avr - 11:19


[Fiche] Simple avec image en haut


Hello !

voilà une petite fiche qui pourra te servir pour les réponses aux RPs, les descriptions de lieux, etc.
Elle est assez simple pour une jolie mise en page sans prise de tête.

> Ce LS est compatible avec toutes les versions.
> Merci de ne pas retire le cp en bas de la fiche.

> Vous n'avez pas nécessairement besoin de l'accès aux templates ni à la CSS, vous pouvez vous service de ce code sur n'importe quel forum.
> Quelques bases en HTML et CSS sont les bienvenues.

Aperçu


Image du RP

Le titre du RP

Le sous-titre du RP

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ante, vehicula vitae accumsan sed, faucibus vitae est. Phasellus placerat ligula nec orci rutrum varius. Sed imperdiet eros quis erat feugiat, at auctor sem aliquam. Aenean tempus accumsan ante non semper.

Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue.

In hac habitasse platea dictumst. Aenean dapibus facilisis ipsum in dapibus. Mauris scelerisque placerat massa, a vehicula mi. Aliquam eget eros consequat, sollicitudin dui sit amet, pulvinar turpis.

Fiche codée par Mäven



Les codes


~ Si tu n'es pas administrateur du forum et que c'est pour un RP ponctuel :
Exclamation Tous les
Code:
<!--

-->
sont à garder. Ils permettent d'aérer votre code sans faire n'importe quoi avec le BBCode. Pour comprendre le pourquoi, [url=#]je t'invite à lire ce tutoriel (à venir)[/url].
Code:
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'><!--
--> <style>.Maven_fiche{width:500px;height:auto;background:#f7f6a2;border:2px solid #44361d;margin:auto;padding:5px;}.Maven_div_image{margin:auto;width:450px;height:150px;text-align:center;}.Maven_div_image img{border:2px solid #44361d;}.Maven_fiche .titre{font-family: 'Parisienne', cursive;text-align:center;margin:0 0 -10px;padding:0;font-size:40px;color:#432e08;}.Maven_fiche .sous-titre{font-family: 'Alegreya Sans SC', sans-serif;text-align:center;margin:0;padding:0;font-size:18px;color:#000;}.Maven_fiche .contenu{width:420px;margin:0 auto;padding:10px;font-size:12px;font-family:verdana;color:#000;}.Maven_fiche .cp{font-size:9px;font-family:verdana;margin:auto;text-align:center;}.Maven_fiche a{color:black;text-decoration:none;font-weight:bold;}</style><!--

--><div class="Maven_fiche"><!--

--><div class="Maven_div_image"><img src="https://i.servimg.com/u/f68/15/82/71/87/image10.png" alt="Image du RP" /></div><!--

-->
<div class="titre">Le titre du RP</div><!--

-->
<div class="sous-titre">Le sous-titre du RP</div><!--

--><div class="contenu"><!--

--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ante, vehicula vitae accumsan sed, faucibus vitae est. Phasellus placerat ligula nec orci rutrum varius. Sed imperdiet eros quis erat feugiat, at auctor sem aliquam. Aenean tempus accumsan ante non semper.  </p><!--

--><p>Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue. </p><!--

--><p>In hac habitasse platea dictumst. Aenean dapibus facilisis ipsum in dapibus. Mauris scelerisque placerat massa, a vehicula mi. Aliquam eget eros consequat, sollicitudin dui sit amet, pulvinar turpis.  </p><!--
--></p><!--
--></div><!--

--><p class="cp">Fiche codée par <a href="http://tambouille-raleuses.forumactif.com" target="_blank">Mäven</a></p><!--
--></div>

~ Si Tu es administrateur et que c'est une mise en page habituelle :
La CSS n'est pas commentée. Il est possible d'avoir une explication pour une personnalisation plus rapide au besoin Smile
A mettre dans la CSS du forum (Affichage --> Couleurs --> Feuille de style CSS) :
Code:
/*******************Debut fiche RP*************************/
.Maven_fiche{
width:500px;
height:auto;
background:#f7f6a2;
border:2px solid #44361d;
margin:auto;padding:5px;
}
.Maven_div_image{
margin:auto;
width:450px;
height:150px;
text-align:center;
}
.Maven_div_image img{
border:2px solid #44361d;
}

.Maven_fiche .titre{
font-family: 'Parisienne', cursive;
text-align:center;
margin:0 0 -10px;
padding:0;
font-size:40px;
color:#432e08;
}

.Maven_fiche .sous-titre{
font-family: 'Alegreya Sans SC', sans-serif;
text-align:center;
margin:0;
padding:0;
font-size:18px;
color:#000;
}

.Maven_fiche .contenu{
width:420px;
margin:0 auto;
padding:10px;
font-size:12px;
font-family:verdana;
color:#000;
}

.Maven_fiche .cp{
font-size:9px;
font-family:verdana;
margin:auto;
text-align:center;
}

.Maven_fiche a{
color:black;
text-decoration:none;
font-weight:bold;
}

/*******************Fin fiche RP*************************/
Le HTML à poster :
Exclamation Tous les
Code:
<!--

-->
sont à garder. Ils permettent d'aérer votre code sans faire n'importe quoi avec le BBCode.
Code:
<div class="Maven_fiche"><!--

--><div class="Maven_div_image"><img src="https://i.servimg.com/u/f68/15/82/71/87/image10.png" alt="Image du RP" /></div><!--

-->
<div class="titre">Le titre du RP</div><!--

-->
<div class="sous-titre">Le sous-titre du RP</div><!--

--><div class="contenu"><!--

--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ante, vehicula vitae accumsan sed, faucibus vitae est. Phasellus placerat ligula nec orci rutrum varius. Sed imperdiet eros quis erat feugiat, at auctor sem aliquam. Aenean tempus accumsan ante non semper.  </p><!--

--><p>Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue. </p><!--

--><p>In hac habitasse platea dictumst. Aenean dapibus facilisis ipsum in dapibus. Mauris scelerisque placerat massa, a vehicula mi. Aliquam eget eros consequat, sollicitudin dui sit amet, pulvinar turpis.  </p><!--
--></p><!--
--></div><!--

--><p class="cp">Fiche codée par <a href="http://tambouille-raleuses.forumactif.com" target="_blank">Mäven</a></p><!--
--></div>

Et pour garder les mêmes polices, à mettre dans le Template Overall_header, après
Code:
<head>

Code:
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>




Si tu as la moindre question ou si tu souhaite que je t'aide à personnaliser le tout, n'hésites pas à demander.
A bientôt !


Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses