Fiche officielle Démons

Bonjour et bienvenue pour ce nouveau LS !

Aujourd'hui je vous propose un petit LS type "fiche officielle" pour ayant un thème démoniaque et sombre tout en noir et rouge. La fiche en elle-même est très simple, il n'y a pas d'effets de transition ou autre. L'image d'en tête a été modifié par moi-même et toutes les autres images ont été réalisé par moi-même. Il y a différents niveaux de titre, le titre 1 étant le titre "général" de la fiche, et les titres 2 et 3 les sous-titres et sous-sous-titres.

Le code HTML

Pour petit rappel, le code HTML est le code à insérer directement dans votre message.

Code:

<div class="fiche_demons">
  <span class="titre1_demons">Titre 1</span>
  <span class="titre2_demons">Titre 2</span>
  <span class="titre3_demons">Titre 3</span>
  <div class="texte_demons">Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus, tum iudicio tuo gravissimo et maximo. Ex quo profecto intellegis quanta in dato beneficio sit laus, cum in accepto sit tanta gloria.

Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</div>
  <div class="credits_demons"><a href="http://www.never-utopia.com/">(c) Shaneliae | Never Utopia</a></div>
</div>
<link href='https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Calligraffitti' rel='stylesheet' type='text/css'>

Si vous souhaitez ajouter un titre de niveau 1, utilisez ce code :

Code:

<span class="titre1_demons">Votre titre 1</span>

Si vous souhaitez ajouter un titre de niveau 2, utilisez ce code :

Code:

<span class="titre2_demons">Votre titre 2</span>

Si vous souhaitez ajouter un titre de niveau 3, utilisez ce code :

Code:

<span class="titre3_demons">Votre titre 3</span>

Après vos titres, vous devez insérer votre texte dans des balises comme ceci :

Code:

<div class="texte_demons">Votre texte à mettre ici</div>

Si vous avez les droits de fondation de votre forum et que vous utilisez cette fiche comme fiche officielle pour votre forum, vous pouvez supprimer la dernière ligne de code et la mettre dans le template overall_header :

Code:

<link href='https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Calligraffitti' rel='stylesheet' type='text/css'>

Le CSS

Pour rappel, le CSS est la partie qui va donner le "style" de votre fiche. Sans lui votre HTML ne servira à rien !

Si vous êtes admin du forum...

Dans le cas où vous êtes un admin du forum où cette fiche est utilisée, vous devez utiliser le code ci-dessous que vous allez copier/coller dans Panneau d'admin > Affichage > Images & Couleur > Couleurs > Feuille de style CSS :

Code:

/***** FICHE DEMONS *****/
/* Cadre de la fiche */
.fiche_demons {
  width: 600px;
  background: url('http://img11.hostingpics.net/pics/602762Sanstitre.png') top center no-repeat, url('http://img11.hostingpics.net/pics/436405Sanstitre2.png') bottom center no-repeat;
  background-color: #000000;
  margin: auto;
  padding-top: 360px;
  padding-bottom: 100px;
  border-top: 5px solid #5f2d27;
  border-right: 1px solid #5f2d27;
  border-bottom: 5px solid #5f2d27;
  border-left: 1px solid #5f2d27;
  border-radius: 50px;
  box-shadow: 0px 0px 5px #000000;
}
/* Titres de la fiche */
.titre1_demons {
  color: #5f2d27;
  font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 25px;
  text-align: center;
  text-shadow: 1px 1px 5px #5c3b35;
  width: 100%;
  height: 70px;
  padding-top: 40px;
  margin-bottom: 30px;
  display: inline-block;
  background: url('http://img11.hostingpics.net/pics/682400titre1.png') top center no-repeat #000000;
}
.titre2_demons {
  color: #5c221c;
  font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  text-shadow: 1px 1px 10px #5c504e;
  width: 100%;
  height: 40px;
  padding-top: 15px;
  display: inline-block;
  background: url('http://img15.hostingpics.net/pics/225898titre2.png') top center no-repeat #000000;
}
.titre3_demons {
  color: #9c2d1e;
  font-family: 'Calligraffitti', cursive;
  font-weight: normal;
  font-size: 18px;
  text-shadow: 0px 0px 2px #9c2d1e;
  text-align: left;
  padding-top: 15px;
  padding-left: 30px;
  display: inline-block;
}
/* Style du texte de la fiche */
.texte_demons {
  color: #71616b;
  font-size: 12px;
  padding-top: 5px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: justify;
}
/* Style du crédit vers Never Utopia */
.credits_demons {
  font-size: 8px;
  text-align: center;
  width: 100%;
  padding-top: 20px;
}
.credits_demons a {
  color: #71616b;
  text-decoration: none !important;
  transition: 100ms ease all;
  font-family: 'Cinzel', serif;
}
.credits_demons a:hover {
  color: #44120d;
  transition: 100ms ease all;
}

Si vous n'êtes pas admin du forum...

Si vous souhaitez utilisez ce LS sur un forum où vous n'êtes pas admin, utilisez le CSS ci-dessous que vous insérez tout au début de votre message suivi de votre HTML :

Code:

<style>.fiche_demons{width: 600px; background: url('http://img11.hostingpics.net/pics/602762Sanstitre.png') top center no-repeat, url('http://img11.hostingpics.net/pics/436405Sanstitre2.png') bottom center no-repeat; background-color: #000000; margin: auto; padding-top: 360px; padding-bottom: 100px; border-top: 5px solid #5f2d27; border-right: 1px solid #5f2d27; border-bottom: 5px solid #5f2d27; border-left: 1px solid #5f2d27; border-radius: 50px; box-shadow: 0px 0px 5px #000000;}.titre1_demons{color: #5f2d27; font-family: 'Cinzel', serif; font-weight: normal; font-size: 25px; text-align: center; text-shadow: 1px 1px 5px #5c3b35; width: 100%; height: 70px; padding-top: 40px; margin-bottom: 30px; display: inline-block; background: url('http://img11.hostingpics.net/pics/682400titre1.png') top center no-repeat #000000;}.titre2_demons{color: #5c221c; font-family: 'Cinzel', serif; font-weight: normal; font-size: 18px; text-align: center; text-shadow: 1px 1px 10px #5c504e; width: 100%; height: 40px; padding-top: 15px; display: inline-block; background: url('http://img15.hostingpics.net/pics/225898titre2.png') top center no-repeat #000000;}.titre3_demons{color: #9c2d1e; font-family: 'Calligraffitti', cursive; font-weight: normal; font-size: 18px; text-shadow: 0px 0px 2px #9c2d1e; text-align: left; padding-top: 15px; padding-left: 30px; display: inline-block;}.texte_demons{color: #71616b; font-size: 12px; padding-top: 5px; padding-left: 15px; padding-right: 15px; text-align: justify;}.credits_demons { font-family: 'Cinzel', serif; font-size: 8px; text-align: center; width: 100%; padding-top: 20px; } .credits_demons a { color: #71616b; text-decoration: none !important; transition: 100ms ease all; font-family: 'Cinzel', serif;} .credits_demons a:hover { color: #44120d; transition: 100ms ease all; }</style>

On voit pas le visuel :'(

Même si je pense voir de quelle fiche il s'agit ! *-*
Merci de ton partage

Pardon, j'ai oublié d'ajouter le lien du visuel >.<

J'ai ajouté le visuel ! Merci Nihil <3

Merci pour le partage ! （　´∀｀）

Merci !

J'aime le côté sombre de la fiche
Merci du partage !!

Je ne sais pas si je l'utiliserai mais je voulais vraiment te dire qu'elle est super cool :)

merci

Merci

Merci ^^

merci ^^

Merci

Jadore. Beau Travail. Merci du partage

Merci pour ce très joli code :3

merci !

merci

Trop cool, merci

Merci pour ce LS :)

wahou, merci c'est trop beau

Pour mon forum Ange VS Démon c'est parfait !
Merci <3

Merci !

Merci !

Merci

Magnifique !

merci :)

C'est superbe! Merci beaucoup de partager ce code!