AccueilDernières imagesRechercherS'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.

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    Fiche officielle Démons

    Anonymous
    Invité

    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
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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:

    Anonymous
    Invité

    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
    Anonymous
    Invité

    Sam 26 Déc 2015 - 23:09

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

    Dim 6 Mar 2016 - 18:08

    Merci !
    Anonymous
    Invité

    Lun 7 Mar 2016 - 1:32

    J'aime le côté sombre de la fiche Very Happy
    Merci du partage !!
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    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 :)



    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Mer 23 Mar 2016 - 17:16

    merci



    Fiche officielle Démons F86e7518c1
    Lovelymp
    Lovelymp
    FémininAge : 45Messages : 118

    Mer 30 Mar 2016 - 17:07

    Merci
    Yumeki
    Yumeki
    FémininAge : 32Messages : 147

    Jeu 31 Mar 2016 - 3:43

    Merci ^^
    Ryumeru
    Ryumeru
    FémininAge : 30Messages : 53

    Mer 20 Avr 2016 - 17:26

    merci ^^
    BlackNight
    BlackNight
    MasculinAge : 37Messages : 90

    Mar 10 Mai 2016 - 17:00

    Merci
    Anonymous
    Invité

    Mer 11 Mai 2016 - 5:07

    Jadore. Beau Travail. Merci du partage Very Happy
    Elilith
    Elilith
    FémininAge : 27Messages : 94

    Sam 6 Aoû 2016 - 0:06

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

    Jeu 11 Aoû 2016 - 3:07

    merci !
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Dim 4 Sep 2016 - 14:58

    merci
    Edward Speleers
    Edward Speleers
    MasculinAge : 36Messages : 460

    Mar 20 Sep 2016 - 21:57

    Trop cool, merci



    Fiche officielle Démons Edkidd11
    Anonymous
    Invité

    Mer 21 Sep 2016 - 3:02

    Merci pour ce LS :)
    Necrolythia
    Necrolythia
    FémininAge : 37Messages : 580

    Mer 21 Sep 2016 - 10:16

    wahou, merci c'est trop beau



    Fiche officielle Démons KKEVK8u
    Praecursator
    Praecursator
    MasculinAge : 22Messages : 77

    Mer 21 Sep 2016 - 21:04

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

    Mar 27 Sep 2016 - 20:58

    Merci !
    KimmyKinder
    KimmyKinder
    FémininAge : 23Messages : 181

    Lun 3 Oct 2016 - 19:54

    Merci !
    Senarath
    Senarath
    FémininAge : 32Messages : 5

    Ven 21 Oct 2016 - 17:40

    Merci
    Ipiutiminelle
    Ipiutiminelle
    FémininAge : 36Messages : 267

    Dim 23 Oct 2016 - 14:38

    Magnifique !

    merci :)



    Fiche officielle Démons 5_25
    .pinkrocks
    .pinkrocks
    FémininAge : 34Messages : 41

    Mer 26 Oct 2016 - 20:38

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


      La date/heure actuelle est Dim 24 Nov 2024 - 13:15