AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Fiche officielle Démons

    Partagez
    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Sam 26 Déc 2015 - 19:02


    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 rendu en direct de la fiche
    Une capture d'écran de la fiche (le fond bleu correspond au fond de mon forum test)


    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>

    En cas de question ou de problème, je rappelle que la section problème avec mon code est là pour ça. Si vous me posez une question ici je risque de ne pas vous répondre !


    Dernière édition par Shaneliae le Mer 1 Mar 2017 - 17:40, édité 3 fois



    Présence réduite.
    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Sam 26 Déc 2015 - 19:27

    On voit pas le visuel :'(

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

    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Sam 26 Déc 2015 - 21:03

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

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



    Présence réduite.
    avatar
    Kelalin
    FémininAge : 25Messages : 1707

    le Sam 26 Déc 2015 - 23:09

    Merci pour le partage ! ( ´∀`)
    avatar
    Rebekaah
    FémininAge : 22Messages : 51

    le Dim 6 Mar 2016 - 18:08

    Merci !
    avatar
    Orochimaru
    FémininAge : 27Messages : 188

    le Lun 7 Mar 2016 - 1:32

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



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Chocolakato
    FémininAge : 27Messages : 789

    le Ven 18 Mar 2016 - 11:32

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



    avatar
    Fyraliel
    FémininAge : 26Messages : 1424

    le Mer 23 Mar 2016 - 17:16

    merci



    avatar
    Lovelymp
    FémininAge : 38Messages : 57

    le Mer 30 Mar 2016 - 17:07

    Merci
    avatar
    Yumeki
    FémininAge : 25Messages : 136

    le Jeu 31 Mar 2016 - 3:43

    Merci ^^
    avatar
    Ryumeru
    FémininAge : 22Messages : 42

    le Mer 20 Avr 2016 - 17:26

    merci ^^
    avatar
    BlackNight
    MasculinAge : 30Messages : 90

    le Mar 10 Mai 2016 - 17:00

    Merci
    avatar
    Orochimaru
    FémininAge : 27Messages : 188

    le Mer 11 Mai 2016 - 5:07

    Jadore. Beau Travail. Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Elilith
    FémininAge : 20Messages : 75

    le Sam 6 Aoû 2016 - 0:06

    Merci pour ce très joli code :3
    avatar
    SectumSempra
    FémininAge : 20Messages : 81

    le Jeu 11 Aoû 2016 - 3:07

    merci !
    avatar
    Marion Navi
    FémininAge : 23Messages : 182

    le Dim 4 Sep 2016 - 14:58

    merci
    avatar
    Edward Speleers
    FémininAge : 29Messages : 452

    le Mar 20 Sep 2016 - 21:57

    Trop cool, merci



    avatar
    Invité

    le Mer 21 Sep 2016 - 3:02

    Merci pour ce LS :)
    avatar
    Necrolythia
    FémininAge : 30Messages : 443

    le Mer 21 Sep 2016 - 10:16

    wahou, merci c'est trop beau



    avatar
    Praecursator
    MasculinAge : 15Messages : 77

    le Mer 21 Sep 2016 - 21:04

    Pour mon forum Ange VS Démon c'est parfait !
    Merci <3
    Yunroxas
    FémininAge : 24Messages : 37

    le Mar 27 Sep 2016 - 20:58

    Merci !
    avatar
    KimmyKinder
    FémininAge : 16Messages : 179

    le Lun 3 Oct 2016 - 19:54

    Merci !
    avatar
    Senarath
    FémininAge : 25Messages : 5

    le Ven 21 Oct 2016 - 17:40

    Merci
    avatar
    Ipiutiminelle
    FémininAge : 29Messages : 207

    le Dim 23 Oct 2016 - 14:38

    Magnifique !

    merci :)



    avatar
    .pinkrocks
    FémininAge : 27Messages : 41

    le Mer 26 Oct 2016 - 20:38

    C'est superbe! Merci beaucoup de partager ce code! :lovebomb:
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Nov 2017 - 16:12