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

    Rappel du premier message :


    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
    Yoyami Shinosuke
    FémininAge : 20Messages : 21

    le Sam 10 Déc 2016 - 11:31

    Merci <3



    avatar
    Océ
    FémininAge : 43Messages : 270

    le Sam 10 Déc 2016 - 13:35

    Merci



    Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
    avatar
    Patdrue
    FémininAge : 27Messages : 156

    le Lun 12 Déc 2016 - 16:38

    C'est choli! merchi beau cou!
    avatar
    Elektra Kloo
    FémininAge : 28Messages : 154

    le Jeu 15 Déc 2016 - 15:40

    merci
    avatar
    Deamyx
    MasculinAge : 21Messages : 200

    le Ven 16 Déc 2016 - 0:35

    Merci
    avatar
    Sighild
    FémininAge : 30Messages : 149

    le Mer 28 Déc 2016 - 18:41

    Merci pour cette fiche
    avatar
    Elenna
    FémininAge : 22Messages : 32

    le Jeu 12 Jan 2017 - 6:37

    Merci Shocked
    avatar
    Carapace
    FémininAge : 19Messages : 10

    le Ven 14 Avr 2017 - 16:43

    Je dis : merci et c'est magnifique ^^
    avatar
    Bunny Lune
    FémininAge : 28Messages : 139

    le Ven 4 Aoû 2017 - 7:08

    Très joli merci beaucoup pour le partage :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Nov 2017 - 1:54