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.


    Présentation simple et bleutée

    Partagez
    avatar
    Kanae
    FémininAge : 25Messages : 339

    le Ven 16 Déc 2016 - 7:55



    Présentation Simple et Bleutée



    Coucou ! Cette fiche vous est proposée suite à la demande de Vani qui voulait une fiche toute simple et qui s'intégrait bien à son forum à dominante bleue.

    Petit aperçu :
    Cliquez ici


    Le code vous est offert directement et sans balise < hide > mais un petit mot gentil fait toujours plaisir et une critique constructive permet toujours de s'améliorer.
    N'hésitez donc pas à me faire part de vos impressions !


    Intégrer la police au Templace Overall_header



    Rendez-vous dans PA > Affichage > Templates > Overall_header et copier/coller le code suivant juste après la balise "head" :

    Code:
    <link href="https://fonts.googleapis.com/css?family=Italianno" rel="stylesheet">

    N'oubliez pas de valider votre Template ou la police n'apparaîtra pas !

    La police sera utilisable sur l'ensemble de votre forum.



    Code du message



    Voici le code à intégrer directement par le membre dans son message :

    Code:
    <div class="fond_presa"><div class="titre_presa">Prénom Nom</div>
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div><table style="margin: 40px 20px 0 20px;"><tr><td><div class="text_info_1"><b>IDENTITE</b>

    <b>Nom :</b> Indiquez
    <b>Prénom :</b> Indiquez
    <b>Surnom :</b> Indiquez
    <b>Âge :</b> Indiquez

    <b>Archipel d'origine :</b> Indiquez

    <b>Profession :</b> Indiquez
    <b>Groupe :</b> Indiquez

    <b>Autre :</b> Indiquez</div></td><td><img src="url de l'image" class="image_presa"></td></tr></table>

    <div class="titre_presa">Descriptions</div>
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div><div class="text_info_2"><b>DESCRIPTION DU DRAGON</b>

    Commencez la description</div><table style="margin: 40px 20px 0 20px;"><tr><td><div class="text_info_3"><b>DESCRIPTION PHYSIQUE</b>

    Décrivez votre personnage</div></td><td><div class="text_info_4"><b>DESCRIPTION MENTALE</b>

    Décrivez votre personnage</div></td></tr></table>

    <div class="titre_presa">Histoire</div>
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div>

    <div class="text_info_5"><b>VOTRE PASSE</b>

    Histoire de votre personnage</div>
    <div class="titre_presa">Et vous ?</div>
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div>

    <div class="text_info_6"><b>Derrière l'écran</b>

    <b>Prénom :</b> Indiquez
    <b>Pseudo :</b> Indiquez
    <b>Âge :</b> Indiquez

    <b>Comment avez-vous connu le forum ?</b> Indiquez
    <b>Quelque chose à ajouter ?</b> Indiquez</div>

    <div class="credit_presa"> <a style="color: #F3F7F8;" href="http://www.never-utopia.com">© Never-Utopia</a><br /><span style="color: #C6D3DD;">Kanae</span></div>
    </div>


    Code du CSS du forum



    Et voici le code à intégrer au CSS :

    Code:
    /******* FICHE DE PRESENTATION *******/
    .fond_presa {
      background-image:url(http://img11.hostingpics.net/pics/522854fondimage.png);
      width: 600px;
      margin: auto;
      padding: 20px;
      }
    .titre_presa {
      font-family: 'Italianno', cursive;
      text-align: center;
      font-size: 80px;
      margin-top: 60px;
      color: #FFFFFF;
      }
    .text_info_1 {
      background-color: #F3F7F8;
      width: 260px;
      height: 270px;
      padding: 25px;
      color: #6F91A8;
      }
    .text_info_2 {
      margin: 40px 20px 0 20px;
      background-color: #F3F7F8;
      width: 510px;
      height: 100px;
      padding: 25px;
      overflow: auto;
      color: #6F91A8;
      }
    .text_info_3 {
      background-color: #F3F7F8;
      width: 206px;
      height: 263px;
      padding: 25px;
      color: #6F91A8;
      overflow: auto;
      }
    .text_info_4 {
      background-color: #F3F7F8;
      width: 206px;
      height: 263px;
      padding: 25px;
      margin-left: 40px;
      color: #6F91A8;
      overflow: auto
      }
    .text_info_5 {
      background-color: #F3F7F8;
      margin: 0 20px 0 20px;
      width: 510px;
      height: 270px;
      padding: 25px;
      color: #6F91A8;
      overflow: auto;
      }
    .text_info_6 {
      background-color: #F3F7F8;
      margin: 0 20px 0 20px;
      width: 510px;
      height: 150px;
      padding: 25px;
      color: #6F91A8;
      overflow: auto;
      }
    .image_presa {
      margin-left: 40px;
      width: 200px;
      height: 320px;
      border: 1px #E6EEF0;
      }
    .credit_presa {
      text-align: center;
      margin: -30px 20px -30px 0;
      font-size: 10px;
      line-height: 12px;
      }
    /******* FIN FICHE DE PRESENTATION *******/

    Et voilà, le tour est joué !

    avatar
    Onyx
    FémininAge : 23Messages : 3031

    le Mer 21 Déc 2016 - 21:07

    Salut!

    C'est tout beau! Les seuls bémols que j'ai est l'utilisation de la balise "center" que tu pouvais remplacer par un < div style="text-align: center;" > < /div > ainsi que le fait que tu as utilisé "credit" comme class. Considérant le nombre de LS différents de NU qu'une personne utilise sur son forum, il est mieux de ne pas utiliser ce nom de class parce que tout le monde l'utilise et cela pourrait causer problème. À la place, j'ai mis "credit_presa" Wink

    Bref, tout est bon donc je valide le LS qui sera bientôt déplacé dans la section appropriée ^^

    Merci du partage :joie:



    avatar
    Kelalin
    FémininAge : 25Messages : 1676

    le Mer 21 Déc 2016 - 23:42

    Merci pour le partage !
    avatar
    Whit
    FémininAge : 20Messages : 152

    le Sam 31 Déc 2016 - 10:39

    Merci beaucoup pour le partage <3
    avatar
    Mello
    FémininAge : 20Messages : 52

    le Jeu 5 Jan 2017 - 21:45

    Merci!
    avatar
    Plume Rusée
    FémininAge : 11Messages : 13

    le Dim 8 Jan 2017 - 11:31

    Merci c'est juste magnifique !
    avatar
    Plume Rusée
    FémininAge : 11Messages : 13

    le Dim 8 Jan 2017 - 11:38

    Juste comme je suis débutante quelqu'un pourrait m'aider je ne trouve pas où ça la met en fait :/
    avatar
    Kanae
    FémininAge : 25Messages : 339

    le Mer 18 Jan 2017 - 20:01

    Bonjour Plume Rusée !

    Je m'excuse du délai de ma réponse. Pour utiliser cette fiche telle qu'elle est présentée, tu dois être administratrice de ton forum afin de copier le code CSS dans la partie CSS de ton forum (PA > Affichage > Couleurs > CSS), n'oublie pas de valider, puis poste un message normal avec la code principal que j'ai transmis. La fiche devrait apparaître sans difficulté.

    Contenu sponsorisé


      La date/heure actuelle est Sam 21 Oct 2017 - 1:34