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.


    [ASTUCE] Comment masquer la bordure d'un spoiler ?

    Partagez
    Kiwi SuperStar
    FémininAge : 24Messages : 88

    le Mar 11 Juin 2013 - 21:04

    Hello ! Comme c'est mon tout premier tuto, j'espère déjà que je suis au bon endroit et que je vais réussir à être claire :) (Et naturellement j'espère que le sujet n'existe pas déjà ^^' il aurait alors échappé à ma recherche et si c'est le cas, je m'en excuse d'avance :/)
    Il faut savoir que je débute en CSS et que cela fais presque 3 mois que je cherche cette solution (par moi-même). Aujourd'hui j'ai trouvé la résolution de mon problème et j'espère que mon partage servira :)

    Voici comment se présente un spoiler basique :
    1) Quand il est caché :
    Spoiler:
    2) Quand il est dévoilé :
    Spoiler:

    Maintenant, comment faire pour se débarrasser de ce cadre disgracieux qui entour votre texte caché.

    1) Panneau de configuration > Affichage > Couleurs > Feuille de style CSS
    2) vous collez ce code sur votre fiche ! (N'oubliez pas de valider vos modifications ~.^)

    Code:
    .spoiler_closed, .spoiler_closed.hidden, .spoiler_content, .spoiler_content.hidden {
      background-color: black;
      text-align : justify; /* alignement standart d'un spoiler */
      border-color: transparent; /* c'est ceci qui fera disparaître votre cadre */
      -moz-border-radius: none; /* bien entendu vous pouvez lui donner une courbure si vous le désirez */
      border-radius: none;/* bien entendu vous pouvez lui donner une courbure si vous le désirez */
      padding:10px; /* espacement entre le bord de votre cadre et votre texte */
    }

    Naturellement, je ne souligne pas le fait que ce code peut-être modifié à toutes les sauces pour toutes les envies et les attentes de chacun Very Happy

    Voilà ^.^ J'espère qu'il vous sera utile :)


    Dernière édition par Kiwi SuperStar le Mer 8 Jan 2014 - 19:37, édité 1 fois
    MAS
    MasculinAge : 18Messages : 7

    le Sam 21 Déc 2013 - 22:58

    Marche pas pour moi silent 





    Kiwi SuperStar
    FémininAge : 24Messages : 88

    le Lun 23 Déc 2013 - 12:40

    Essayes avec ce code là :

    Code:
    .spoiler_closed, .spoiler_closed.hidden, .spoiler_content, .spoiler_content.hidden {
      background-color: black;
      text-align : justify; /* alignement standart d'un spoiler */
      border-color: transparent; /* c'est ceci qui fera disparaître votre cadre */
      -moz-border-radius: none; /* bien entendu vous pouvez lui donner une courbure si vous le désirez */
      border-radius: none;/* bien entendu vous pouvez lui donner une courbure si vous le désirez */
      padding:10px; /* espacement entre le bord de votre cadre et votre texte */}
    ;-)
    louha
    FémininAge : 29Messages : 212

    le Mer 8 Jan 2014 - 19:22

    Depuis le temps que je le cherche celui là ! Merci !
    Løve
    MasculinAge : 21Messages : 189

    le Mer 26 Fév 2014 - 10:29

    Coucou, excuse moi mais est-ce que tu saurais par hasard comment enlever le fond violet justement qu'il y a derrière ce cadre de spoiler?
    Kiwi SuperStar
    FémininAge : 24Messages : 88

    le Mer 26 Fév 2014 - 11:12

    Le fond violet ? O.o
    La première réponse qui me viendrait à l'esprit, serait de changer la couleur de fond.
    Le background-color. (Ici en noir : black)
    Si c'est bien ce que je pense que tu veux :)

    P.S. : Au pire, tu peux m'envoyer ton code par MP pour que je le vérifie ;-)
    Løve
    MasculinAge : 21Messages : 189

    le Mer 26 Fév 2014 - 13:32

    Et bien en faite, mon problème n'est pas à cause du code.
    Je l'est depuis que j'ai crée mon forum :/
    Depuis le début, mes spoilers s'affichent comme ça ^^"



    Dés qu'on clique sur "description", y a le texte qui s'affiche dans un cadre gris. Mon problème, c'est le fond rose à l'origine ^^
    Kiwi SuperStar
    FémininAge : 24Messages : 88

    le Mer 26 Fév 2014 - 14:49

    Ha oui je vois =/
    Hum... sans être certaine, il me semble que dans ton onglet affichage > couleurs : dans les couleurs de fond, tu as : couleur des citations, codes et boutons.
    Si ton cadre de sélection de couleur est rose, à mon avis, c'est là que tu devras changer ta couleur ^^

    Si malheureusement, ça ne marche pas, je ne suis pas assez expérimentée pour trouver l'origine de ton soucis =/
    sica3
    MasculinAge : 43Messages : 135

    le Mar 2 Déc 2014 - 6:32

    thank's
    Zoé
    FémininAge : 17Messages : 175

    le Lun 14 Sep 2015 - 11:43

    merci !



    Kelalin
    FémininAge : 24Messages : 1405

    le Lun 14 Sep 2015 - 14:18

    Merci ! (゜-゜)
    Fiery Aura
    FémininAge : 17Messages : 54

    le Jeu 31 Mar 2016 - 15:15

    Merci, c'est toujours utile Very Happy
    Contenu sponsorisé

    Aujourd'hui à 21:22


      La date/heure actuelle est Sam 10 Déc 2016 - 21:22