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 : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

    Fiche de Prédéfini avec onglets

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 30 Sep 2016 - 0:48




    Fiche de Prédéfini avec onglets


    Salut !

    Voici un petit LS d'une fiche de prédéfini à onglets que j'ai faite suite à la demande de MPGuenette.

    Pour voir l'aperçu : cliquez ici.
    Pour voir l'aperçu, onglet Histoire : cliquez ici.
    Pour voir l'aperçu, onglet Autres : cliquez ici.

    Ce LS est en trois parties.
    • Tout d'abord, nous allons ajouter le javascript qui permet de faire fonctionner les onglets.
    • Puis, nous allons mettre en forme la fiche avec du CSS.
    • Enfin, nous allons poster la fiche.


    Laisser le crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    1. Ajouter le javascript


    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES CODES JAVASCRIPT

    Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


    Ensuite, on clique sur "Créer un nouveau Javascript"
    On choisit un nom, par exemple comme "Système d'onglets des prédéfinis".
    On choisit le placement "Sur les sujets".

    Enfin, on met le javascript suivant et on enregistre :
    Code:
    $(function() {
      var index_onglet;
      $('.predef_onglet').click(function(){
        $(this).parent().find('.predef_actif').removeClass('predef_actif');
        $(this).parent().find('.predef_contenu_actif').removeClass('predef_contenu_actif');
        index_onglet = $(this).index();
        $(this).parent().find('.predef_contenu').eq(index_onglet).addClass('predef_contenu_actif');
        $(this).addClass('predef_actif');
      });
    });



    2. Mise en forme (CSS)


    Il est maintenant temps de mettre en forme notre fiche à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /*Bloc de predef*/
    .predef_bloc {
      width: 500px;
      margin: auto;
      background: url('http://www.zupimages.net/up/16/36/ss1h.jpg') center top;
      font-family: 'Playfair Display SC', serif;
      padding-bottom: 25px;
      font-size: 14px;
      position: relative;
    }
    /*Titre de predef*/
    .predef_title {
      background: #101010;
      padding: 10px 5px 5px 5px;
      font-family: 'UnifrakturCook', cursive;
      margin-bottom: 25px;
      font-size: 32px;
      color: #656565;
      text-align: center;
    }
    /*Citation de predef*/
    .predef_cite {
      padding-top: 5px;
      font-size: 20px;
      color: #454545;
    }
    /*Bloc milieu*/
    .predef_bloc_middle {
      padding-top: 5px;
      margin: auto;
      width: 450px;
      background-color: rgb(53, 53, 53);
      background-color: rgba(53, 53, 53, 0.75);
      text-align: center;
    }
    /*Onglet predef*/
    .predef_onglet {
      display: inline-block;
      width: 120px;
      margin: 10px;
      text-align: center;
      font-size: 24px;
      color: #959595;
      cursor: pointer;
    }
    .predef_onglet:hover {
      color: #a3a3a3;
    }
    /*Onglet predef actif*/
    .predef_actif {
      color: #b5b5b5!important;
      cursor: default;
    }
    /*Contenu de onglet*/
    .predef_contenu {
      display: none;
      margin: auto;
      padding: 5px 15px 15px 15px;
      width: 420px;
      text-align: justify;
    }
    .predef_contenu_actif {
      display: block;
    }
    /*Image*/
    .predef_img {
      float: left;
      height: 320px;
      width: 200px;
    }
    /*Bloc de texte*/
    .predef_text {
      border: 2px solid #b5b5b5;
      color: #b5b5b5;
      float: left;
      width: 196px;
      margin-left: 10px;
      height: 306px;
      padding: 5px;
      overflow: auto;
    }
    .predef_contenu:nth-of-type(2) .predef_text {
      margin-left: 0px;
      width: 406px;
    }
    .predef_contenu:nth-of-type(3) .predef_text {
      margin-left: 0px;
      margin-right: 10px;
    }
    /*Crédits*/
    .predef_credit {
      position: absolute;
      text-align: center;
      width: 100%;
      bottom: 1px;
      left: 0px;
      font-size: 10px;
      color: #000000;
    }
    .predef_credit a {
      color: #c4c4c4;
    }
    .predef_credit a:hover {
      color: #ffffff;
    }



    3. Poster la fiche (html)


    Il suffit de vous rendre là où vous voulez poster la fiche et d'y mettre ce code :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|UnifrakturCook:700" rel="stylesheet" /><div class="predef_bloc"><div class="predef_title">TITRE OU NOM DU PRÉDÉFINI<div class="predef_cite">SOUS-TITRE OU CITATION</div></div><div class="predef_bloc_middle"><span class="predef_onglet predef_actif">Général</span><span class="predef_onglet">Histoire</span><span class="predef_onglet">Autres</span><div class="predef_contenu predef_contenu_actif"><img class="predef_img" src="URL IMAGE 1ER ONGLET" alt="avatar1" /><div class="predef_text">TEXTE DU 1ER ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 2E ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 3E ONGLET</div><img class="predef_img" src="URL IMAGE 3E ONGLET" alt="avatar2" /><div style="clear: both;"></div></div></div><div class="predef_credit">Par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></div></div>

    Les majuscules servent à indiquer où mettre le contenu.




    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

    À plus !


    Dernière édition par Onyx le Mer 21 Déc 2016 - 5:03, édité 1 fois



    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Jeu 8 Déc 2016 - 10:57

    Hooo merci beaucoup pour le partage Onyx c'est magnifique comme toujours :love:



    :heart: :heart:
    Anonymous
    Invité

    Jeu 8 Déc 2016 - 16:46

    Merci pour le partage !
    Evie Gimhilde
    Evie Gimhilde
    FémininAge : 25Messages : 20

    Sam 10 Déc 2016 - 14:34

    Tu l'as fait avec le CSS et HTML mélangés ?
    Chimik Girl
    Chimik Girl
    FémininAge : 30Messages : 128

    Sam 25 Fév 2017 - 21:12

    J'aime bien cette fiche, c'est original de faire un fiche de prédéfini avec des onglets. Merci pour le partage.
    Kame-Chan
    Kame-Chan
    FémininAge : 33Messages : 53

    Dim 26 Fév 2017 - 11:04

    Merci beaucoup pour ce jolie code ! c'est exactement le genre dont j'avais besoin
    Cassisse
    Cassisse
    FémininAge : 31Messages : 128

    Dim 5 Mar 2017 - 18:31

    Merciiii
    NaLu
    NaLu
    FémininAge : 28Messages : 176

    Lun 17 Avr 2017 - 2:28

    Merci beaucoup pour ce codage ^^



    onglets - Fiche de Prédéfini avec onglets 683430Sanstitre7
    kevdes
    kevdes
    MasculinAge : 35Messages : 6

    Dim 7 Mai 2017 - 11:49

    Il est sympa .
    abysean
    abysean
    MasculinAge : 29Messages : 33

    Mar 20 Juin 2017 - 21:51

    Merci :)
    Eiv
    Eiv
    MasculinAge : 29Messages : 511

    Mer 28 Juin 2017 - 6:47

    merci



    onglets - Fiche de Prédéfini avec onglets Signautopia
    onglets - Fiche de Prédéfini avec onglets 472020userbarfanclubdelenthil
    Phenixis
    Phenixis
    FémininAge : 25Messages : 25

    Sam 15 Juil 2017 - 4:06

    Superbe fiche, compacte et originale ♥



    onglets - Fiche de Prédéfini avec onglets 832631nyxsisisign
    Myulunie
    Myulunie
    FémininAge : 26Messages : 23

    Mar 18 Juil 2017 - 21:31

    Merci beaucoup pour ce code, j'en cherchais justement un avec des onglets. Ca fera l'affaire, c'est super !
    Eleania Madena
    Eleania Madena
    FémininAge : 26Messages : 90

    Jeu 3 Aoû 2017 - 21:49

    Merci !




    Tarkon
    Tarkon
    MasculinAge : 26Messages : 18

    Dim 22 Oct 2017 - 17:33

    Merci :3
    Kaguyanis
    Kaguyanis
    MasculinAge : 102Messages : 25

    Ven 3 Nov 2017 - 10:44

    Merci !!
    Baylee Hamilton
    Baylee Hamilton
    FémininAge : 28Messages : 69

    Jeu 30 Nov 2017 - 4:06

    merci :)
    Pucky
    Pucky
    FémininAge : 26Messages : 44

    Ven 1 Déc 2017 - 23:33

    Ton codage est superbe !
    Dreuis
    Dreuis
    MasculinAge : 28Messages : 95

    Ven 23 Fév 2018 - 8:50

    Merci beaucoup pour le partage
    Helvelina
    Helvelina
    FémininAge : 32Messages : 82

    Mer 7 Mar 2018 - 16:26

    Merci pour ce partage !
    Draly
    Draly
    FémininAge : 31Messages : 119

    Ven 23 Mar 2018 - 14:20

    jamais vu ce style encore sur les forums, alors que c'est pourtant différent et original. J'aime bien, en tout cas.^^
    Pyrosta
    Pyrosta
    FémininAge : 24Messages : 5

    Lun 23 Avr 2018 - 2:34

    Merciiii <3
    Kim'z
    Kim'z
    FémininAge : 33Messages : 10

    Mer 7 Nov 2018 - 19:54

    Rohhhh, mais ça fait longtemps que je n'ai pas vu un beau code comme ça !! Merci beaucoup du partage!
    Shaolan
    Shaolan
    MasculinAge : 32Messages : 121

    Ven 25 Déc 2020 - 21:37

    Merci beaucoup pour le code !

    Edit: (j'ai trouvé mon problème, enfin...j'ai entièrement refait sur une nouvelle plateforme de test et c'est nickel )
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:49