AccueilRechercherS'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.

-39%
Le deal à ne pas rater :
Huawei P30 Smartphone
395 € 649 €
Voir le deal

    Personnaliser les balises Code, Quote, Spoiler et Hide

    Onyx
    Onyx
    FémininAge : 26Messages : 3302

    le Mer 24 Aoû 2016 - 2:38



    Personnaliser les balises "Code", "Quote", "Spoiler" et "Hide"



    Bonjour !

    Ce tutoriel vous permettra d'apprendre comment personnaliser les balises "Code", "Quote", "Spoiler" et "Hide" pour améliorer leur apparence.

    Au cas où vous ne savez pas de quoi je parle, voilà ces balises :

    Code:
    Je suis un code.

    @Onyx a écrit:Je suis un quote (une citation).

    Spoiler:
    Je suis un spoiler.



    Petits exemples de résultats différents de balises après personnalisation :
    https://redcdn.net/hpimg15/pics/296960171.jpg
    https://redcdn.net/hpimg15/pics/998191602.jpg
    https://redcdn.net/hpimg15/pics/833452243.jpg
    https://redcdn.net/hpimg15/pics/378846444.jpg
    https://redcdn.net/hpimg15/pics/234533185.jpg


    Je profite aussi de l'occasion pour vous donnerles liens vers d'autres tutoriels/astuces qui pourraient vous intéresser :
    Coloriser vos balises de code : cliquez ici pour voir.
    Ajouter l'option "Sélectionner le contenu" à vos balises de code : cliquez ici pour voir.
    Personnalisation des intitulés des balises : cliquez ici pour voir.
    Ajouter des numéros de ligne à vos balises de code : cliquez ici pour voir.


    À noter que les codes ci-bas sont à mettre dans le CSS.
    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS



    Personnalisation des balises sous phpBB2


    Les balises code


    Pour personnaliser les balises code :
    Code:
    /*Contenu de CODE*/
    .code {
      propriété: valeur;
    }
    /*Intérieur du contenu de CODE*/
    .cont_code {
      propriété: valeur;
    }


    Les balises quote (citer)


    Pour personnaliser les balises quote (citer) :
    Code:
    /*Contenu de QUOTE*/
    .quote {
      propriété: valeur;
    }


    Les balises spoiler


    Pour personnaliser les balises spoiler :
    Code:
    /*Bloc qui contient le titre et le contenu de SPOILER*/
    .spoiler {
      propriété: valeur;
    }
    /*Ligne du titre de SPOILER*/
    .spoiler > dt {
      propriété: valeur;
    }
    /*Contenu de SPOILER fermé*/
    .spoiler_closed {
      propriété: valeur;
    }
    /*Contenu de SPOILER ouvert*/
    .spoiler_content {
      propriété: valeur;
    }
    /*Pour éliminer un espace pas rapport sous le spoiler*/
    .spoiler > dd:last-child {
      border: none;
    }


    Les balises hide


    Pour personnaliser les balises hide :
    Code:
    /*Bloc qui contient le HIDE*/
    .hidecode {
      propriété: valeur;
    }
    /*Contenu de HIDE*/
    .hidecode > dd:first-of-type {
      propriété: valeur;
    }


    Toutes les balises


    Pour personnaliser tous les balises en même temps :
    Code:
    /*Bloc qui contient le titre et le contenu de CODE, SPOILER, QUOTE ET HIDE*/
    .codebox {
      propriété: valeur;
    }
    /*Contenu de CODE, SPOILER FERMÉ, QUOTE ET HIDE*/
    .codebox > dd:first-of-type  {
      propriété: valeur;
    }
    /*Ligne du titre de CODE, SPOILER ET QUOTE*/
    .codebox > dt {
      propriété: valeur;
    }
    /*Titre de CODE, SPOILER ET QUOTE*/
    .codebox > dt .genmed, .spoiler > dt {
      propriété: valeur;
    }



    Personnalisation des balises sous Invision


    Les balises code


    Pour personnaliser les balises code :
    Code:
    /*Contenu de CODE*/
    code {
      propriété: valeur;
    }


    Les balises quote (citer)


    Pour personnaliser les balises quote (citer) :
    Code:
    /*Bloc qui contient la ligne de l intitulé et le contenu de QUOTE*/
    blockquote {
      propriété: valeur;
    }
    /*Bloc intérieur de QUOTE incluant l intitulé*/
    blockquote > div {
      margin-left: 0px;
      propriété: valeur;
    }
    /*Intitulé de QUOTE*/
    blockquote cite {
      background-image: none;
      propriété: valeur;
    }


    Les balises spoiler


    Pour personnaliser les balises spoiler :
    Code:
    /*Bloc qui contient le titre et le contenu de SPOILER*/
    .spoiler {
      propriété: valeur;
    }
    /*Ligne du titre de SPOILER*/
    .spoiler > dt {
      propriété: valeur;
    }
    /*Contenu de SPOILER fermé*/
    .spoiler_content {
      propriété: valeur;
    }
    /*Contenu de SPOILER ouvert*/
    .spoiler .hidden {
      propriété: valeur;
    }


    Les balises hide


    Pour personnaliser les balises hide :
    Code:
    /*Bloc qui contient le HIDE*/
    .hidecode {
      propriété: valeur;
    }
    /*Contenu de HIDE*/
    .hidecode > dd:first-of-type {
      propriété: valeur;
    }


    Toutes les balises


    Pour personnaliser plusieurs balises en même temps :
    Code:
    /*Bloc qui contient le titre et le contenu de CODE ET HIDE*/
    .codebox {
      propriété: valeur;
    }
    /*Contenu de CODE ET HIDE*/
    .codebox > dd:first-of-type  {
      propriété: valeur;
    }
    /*Ligne du titre de CODE ET HIDE*/
    .codebox > dt {
      propriété: valeur;
    }



    Personnalisation des balises sous phpBB3


    Les balises code


    Pour personnaliser les balises code :
    Code:
    /*Contenu de CODE*/
    code {
      propriété: valeur;
    }


    Les balises quote (citer)


    Pour personnaliser les balises quote (citer) :
    Code:
    /*Bloc qui crée l apostrophe et l espace autour de QUOTE*/
    blockquote {
      margin: 0px;
      background-image: none;
      propriété: valeur;
    }
    /*Intitulé de QUOTE*/
    blockquote cite {
      propriété: valeur;
    }
    /*Bloc de QUOTE incluant l intitulé*/
    blockquote > div {
      margin-left: 0px;
      propriété: valeur;
    }


    Les balises spoiler


    Pour personnaliser les balises spoiler :
    Code:
    /*Bloc qui contient le titre et le contenu de SPOILER*/
    .spoiler {
      propriété: valeur;
    }
    /*Ligne du titre de SPOILER*/
    .spoiler > dt {
      propriété: valeur;
    }
    /*Contenu de SPOILER fermé*/
    .spoiler_content {
      propriété: valeur;
    }
    /*Contenu de SPOILER ouvert*/
    .spoiler .hidden {
      propriété: valeur;
    }


    Les balises hide


    Pour personnaliser les balises hide :
    Code:
    /*Bloc qui contient le HIDE*/
    .hidecode {
      propriété: valeur;
    }
    /*Contenu de HIDE*/
    .hidecode > dd:first-of-type {
      propriété: valeur;
    }


    Toutes les balises


    Pour personnaliser plusieurs balises en même temps :
    Code:
    /*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
    .codebox {
      propriété: valeur;
    }
    /*Contenu de CODE, SPOILER ET HIDE*/
    .codebox > dd:first-of-type  {
      propriété: valeur;
    }
    /*Ligne du titre de CODE, SPOILER ET HIDE*/
    .codebox > dt {
      propriété: valeur;
    }



    Personnalisation des balises sous PunBB


    Les balises code


    Pour personnaliser les balises code :
    Code:
    /*Contenu de CODE*/
    .cont_code {
      propriété: valeur;
    }


    Les balises quote (citer)


    Pour personnaliser les balises quote (citer) :
    Code:
    /*Bloc autour de QUOTE*/
    blockquote {
      propriété: valeur;
    }
    /*Intitulé de QUOTE*/
    blockquote cite {
      background-image: none;
      propriété: valeur;
    }
    /*Bloc de QUOTE incluant l intitulé*/
    blockquote > div {
      margin-left: 0px;
      propriété: valeur;
    }


    Les balises spoiler


    Pour personnaliser les balises spoiler :
    Code:
    /*Bloc qui contient le titre et le contenu de SPOILER*/
    .spoiler {
      propriété: valeur;
    }
    /*Ligne du titre de SPOILER*/
    .spoiler > dt {
      propriété: valeur;
    }
    /*Contenu de SPOILER fermé*/
    .spoiler_content {
      propriété: valeur;
    }
    /*Contenu de SPOILER ouvert*/
    .spoiler .hidden {
      propriété: valeur;
    }


    Les balises hide


    Pour personnaliser les balises hide :
    Code:
    /*Bloc qui contient le HIDE*/
    .hidecode {
      propriété: valeur;
    }
    /*Contenu de HIDE*/
    .hidecode > dd:first-of-type {
      propriété: valeur;
    }


    Toutes les balises


    Pour personnaliser plusieurs balises en même temps :
    Code:
    /*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
    .codebox {
      propriété: valeur;
    }
    /*Contenu de CODE, SPOILER ET HIDE*/
    .codebox > dd:first-of-type  {
      propriété: valeur;
    }
    /*Ligne du titre de CODE, SPOILER ET HIDE*/
    .codebox > dt {
      propriété: valeur;
    }


    Dernière édition par Onyx le Ven 14 Avr 2017 - 18:45, édité 7 fois



    Dariel
    Dariel
    FémininAge : 50Messages : 69

    le Mer 9 Nov 2016 - 1:13

    Merci 

    :titanic:



    C'est la vie Invité ! Pas le paradis.
    Dariel
    Dariel
    FémininAge : 50Messages : 69

    le Mer 9 Nov 2016 - 1:16

    scratch J'veux pas chiquer la guenille mais on en fait quoi de ces codes ?
    Dans un template ?
    Si oui, lequel ?
    Merci

    :wall:



    C'est la vie Invité ! Pas le paradis.
    TiGraou
    TiGraou
    MasculinAge : 26Messages : 243

    le Mer 9 Nov 2016 - 11:54

    Nop, dans le CSS.
    Onyx
    Onyx
    FémininAge : 26Messages : 3302

    le Mer 5 Avr 2017 - 15:34

    Dans le CSS oui, la précision a été ajouté au tutoriel.

    Toutes les versions ont été ajoutées au tutoriel (sauf la nouvelle en version bêta), donc voilà ce tutoriel terminé ^^



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5149

    le Dim 14 Jan 2018 - 21:32

    Merci pour ton tuto Onyx :hudada:

    Je déplace le sujet dans les tuto :lovebomb:

    Au passage, HostingPics annonce qu'il va fermer (merci à Rozenbrez d'avoir averti :hug: ). Ca aura lieu dans quelques mois, mais si tu veux tu peux remplacer les images de ton tuto en les hébergeant ailleurs T_T
    Yuby
    Yuby
    MasculinAge : 31Messages : 38

    le Dim 19 Aoû 2018 - 13:40

    Merci pour le tuto Very Happy
    Anonymous
    Invité

    le Sam 11 Jan 2020 - 21:36

    Merci pour le tuto :)
    Contenu sponsorisé


      La date/heure actuelle est Mer 1 Avr 2020 - 3:48