Modifier la balise spoiler
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Modifier la balise spoiler
Détails techniques
Version du forum : InvisionPoste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://meseries.forumactif.com/
Description du problème
Bonjour,Est-ce que c'est possible d'ajouter un "afficher" et un "cacher" sur la barre blanche du spoiler ?
http://meseries.forumactif.com/t164-game-of-thrones-en-general
Et aussi, je n'arrive pas à modifier le placement du contenu dans la balise spoiler.
Je trouve que ce qu'il y a écrit est un peu centré (espace a droite, à gauche, en haut, en bas, si vous voyez ce que je veux dire), et j'aimerais un placement du contenu normal.
Dernière édition par Clemsi le Ven 15 Déc 2017 - 15:06, édité 1 fois
Re: Modifier la balise spoiler
Pour la première question je ne sais pas, mais pour la deuxième c'est parce que le code des spoilers doit contenir un padding (espace à l'intérieur d'un bloc). Donc toutes le contenu de votre spoiler est décalé de Xpx par rapport à chaque bord. Vous pouvez essayer en rajoutant ça dans votre css :
- Code:
.spoiler {padding:0px !important;}
- Code:
padding : 3px 2px 3px 2px;
Re: Modifier la balise spoiler
J'ai essayé ces codes, mais ça réduit aussi la largeur du cadre des spoilers, si tu vois ce que je veux dire.
Re: Modifier la balise spoiler
Oui c'est normal, les paddings influencent la largeur. Pour te donner une idée, si je fait un bloc de 100*100 pixel, puis que je rajoute un padding de 10px sans modifier sa largeur, il deviendra un bloc de 120*120 - pour qu'il garde sa taille il faut lui mettre une largeur de 80*80. Actuellement ton spoiler ressemble à ça :
Comme tu vois la largeur est définie à 672 parce qu'il y a 8px de padding de chaque côté + une bordure de 1px de chaque côté (pour une largeur totale de 690). Bref tout ce petit cours pour dire qu'il faut que tu modifies la largeur de tes spoilers pour l'adapter à l'absence de padding. Ce qui donne, si tes messages ont une taille fixe qui ne bouge jamais :
Ou si tes messages peuvent s'agrandir selon leur contenu :
Taille à adapter évidemment selon le code que tu as mis pour que ça fasse la taille que tu veux =)
Comme tu vois la largeur est définie à 672 parce qu'il y a 8px de padding de chaque côté + une bordure de 1px de chaque côté (pour une largeur totale de 690). Bref tout ce petit cours pour dire qu'il faut que tu modifies la largeur de tes spoilers pour l'adapter à l'absence de padding. Ce qui donne, si tes messages ont une taille fixe qui ne bouge jamais :
- Code:
.spoiler{width:688px}
Ou si tes messages peuvent s'agrandir selon leur contenu :
- Code:
.spoiler {min-width:688px;}
Taille à adapter évidemment selon le code que tu as mis pour que ça fasse la taille que tu veux =)
Re: Modifier la balise spoiler
J'ai inséré tous ces codes, mais ça ne marche pas, du coup je les ai retirés.
Au pire, je peux faire avec.
Par contre, ça serait bien si on pouvait mettre "afficher " et "cacher" avec les balises spoilers...
Au pire, je peux faire avec.
Par contre, ça serait bien si on pouvait mettre "afficher " et "cacher" avec les balises spoilers...
Re: Modifier la balise spoiler
Bonjour Clemsi, c'est assez compliqué sur invision, j'ai essayé plusieurs solutions, la seule que je puisse retenir, c'est changer le texte par quelque-chose du genre "CLIQUEZ POUR AFFICHER OU CACHER LE MESSAGE:", vous pouvez bien sur modifier le texte.
Si cela vous intéresse, vous pouvez créer un JS en cochant sur les sujets :
Inconvénient, ou pas, lorsque le titre est modifié, ce texte ne s'affiche plus !
J'ai une autre solution pour avoir deux textes différents, un lorsque le spoiler est fermé et un autre lorsque le spoiler est ouvert, inconvénient : vous ne pourrez plus modifier le mot spoiler pour le remplacer par un autre comme par exemple les textes qui sont remplacés sur la page que vous nous donnez comme exemple ou il est écrit : DESCRIPTION DE LA SÉRIE ET INFORMATIONS DIVERSES:, SYNOPSIS:...
Enfin, une autre solution, avec un texte en dessous du spoiler, cela permettrait d'en avoir deux ouvert et fermé, inconvénient : ce n'est pas la phrase "afficher..." ou "fermer..." qui sera cliquable mais le mot spoiler donc un petit décalage au dessus :
Dites-moi si une de ces solutions vous conviendrait.
Bien à vous.
Si cela vous intéresse, vous pouvez créer un JS en cochant sur les sujets :
- Code:
$(function(){
$('dl.spoiler').each(function(){
$(this).html($(this).html().replace(/Spoiler/, 'Cliquez pour afficher ou cacher le message'));
});
});
Inconvénient, ou pas, lorsque le titre est modifié, ce texte ne s'affiche plus !
J'ai une autre solution pour avoir deux textes différents, un lorsque le spoiler est fermé et un autre lorsque le spoiler est ouvert, inconvénient : vous ne pourrez plus modifier le mot spoiler pour le remplacer par un autre comme par exemple les textes qui sont remplacés sur la page que vous nous donnez comme exemple ou il est écrit : DESCRIPTION DE LA SÉRIE ET INFORMATIONS DIVERSES:, SYNOPSIS:...
Enfin, une autre solution, avec un texte en dessous du spoiler, cela permettrait d'en avoir deux ouvert et fermé, inconvénient : ce n'est pas la phrase "afficher..." ou "fermer..." qui sera cliquable mais le mot spoiler donc un petit décalage au dessus :
Dites-moi si une de ces solutions vous conviendrait.
Bien à vous.
Re: Modifier la balise spoiler
Salut Jay,
Je préfère la troisième solution car on peut toujours modifier le titre du spoiler.
Mais sinon, c'est possible que le contenu du spoiler n'ait pas d'espace à droite, à gauche, et bas et en haut ?
Je préfère la troisième solution car on peut toujours modifier le titre du spoiler.
Mais sinon, c'est possible que le contenu du spoiler n'ait pas d'espace à droite, à gauche, et bas et en haut ?
Re: Modifier la balise spoiler
Re, oui, c'est possible, dans votre CSS, vous devez avoir ceci :
Supprimez-le et remplacez par :
J'ai légèrement modifié le texte par rapport au screen, j'ai supprimé les deux points et ajouté une petite flèche montrant ou il faut cliquer, dites-moi si cela vous convient.
J'ai aussi modifié les marges autour du texte à l'intérieur du spoiler, vous pouvez modifier les valeurs qui correspondent à padding:20px 2px 2px 2px, ne touchez pas aux 20px qui sont nécessaires pour afficher le texte en haut mais vous pouvez modifier les 2px qui correspondent respectivement aux côtés droit, bas et gauche.
Bien à vous.
- Code:
dl.spoiler {
background-image: url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat: repeat;
border: 1px solid #888;
margin: 1px;
padding: 8px;
}
Supprimez-le et remplacez par :
- Code:
dl.spoiler{
background-image:url(https://i.goopics.net/j2p2k.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat:no-repeat,repeat;
border: 1px solid #888;
}
.spoiler .hidden {
background-image:url(https://i.goopics.net/K9p9D.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat:no-repeat,repeat;
padding:20px 2px 2px 2px;
margin:-16px;
}
J'ai légèrement modifié le texte par rapport au screen, j'ai supprimé les deux points et ajouté une petite flèche montrant ou il faut cliquer, dites-moi si cela vous convient.
J'ai aussi modifié les marges autour du texte à l'intérieur du spoiler, vous pouvez modifier les valeurs qui correspondent à padding:20px 2px 2px 2px, ne touchez pas aux 20px qui sont nécessaires pour afficher le texte en haut mais vous pouvez modifier les 2px qui correspondent respectivement aux côtés droit, bas et gauche.
Bien à vous.
Re: Modifier la balise spoiler
Il faut mettre les codes que je vous ai donné, ils n'y sont pas la.
Re: Modifier la balise spoiler
Désolé, j'ai cru que je les avais mis la première fois.
C'est possible de mettre la flèche avec le "cliquez pour afficher/cacher le texte" à gauche, à la même place que le contenu.
Il y a un espace.
C'est possible de mettre la flèche avec le "cliquez pour afficher/cacher le texte" à gauche, à la même place que le contenu.
Il y a un espace.
Re: Modifier la balise spoiler
Oui :
Pensez à mettre le code...
- Code:
dl.spoiler{
background-image:url(https://i.goopics.net/PPLPa.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat:no-repeat,repeat;
border: 1px solid #888;
}
.spoiler .hidden {
background-image:url(https://i.goopics.net/Nngny.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat:no-repeat,repeat;
padding:20px 2px 2px 2px;
margin:-16px;
}
Pensez à mettre le code...
Re: Modifier la balise spoiler
Merci, c'est parfait !
Qu'est-ce que tu as changé ?
Qu'est-ce que tu as changé ?
Re: Modifier la balise spoiler
Bah j'ai fait en sorte que la flèche soit plus proche du bord, ça se voit non ? (c'est une image)
Re: Modifier la balise spoiler
Oui, ça se voit, mais je voulais savoir ce que tu as modifié dans le code.
Re: Modifier la balise spoiler
J'ai changé l'image enfin les images : https://i.goopics.net/PPLPa.png et https://i.goopics.net/Nngny.png
Re: Modifier la balise spoiler
Ah ok !
Et c'est possible de mettre "contenu" à la place de "texte" ?
Et c'est possible de mettre "contenu" à la place de "texte" ?
Re: Modifier la balise spoiler
Hahahaha bah réfléchissez bien à ce que vous souhaitez avoir car c'est assez long à chaque fois puis dites-moi demain ce que vous souhaitez exactement, je le ferai demain.
Bonne soirée.
Bonne soirée.
Re: Modifier la balise spoiler
Désolé.
"Cliquez pour afficher le contenu" et "Cliquez pour cacher le contenu", pour demain, alors.
Bonne soirée/nuit, Jay.
Edit : J'en profite, si tu peux résoudre un problème similaire.
http://meseries.forumactif.com/t168p330-saison-3-d-outlander
Descend tout en bas de la page, les deux derniers messages montrent une différence entre la citation sans le pseudo et une autre avec le pseudo.
Celle sans le pseudo (Citation:) a un saut de ligne en plus contrairement à celle avec le pseudo cité, c'est possible de l'enlever ?
"Cliquez pour afficher le contenu" et "Cliquez pour cacher le contenu", pour demain, alors.
Bonne soirée/nuit, Jay.
Edit : J'en profite, si tu peux résoudre un problème similaire.
http://meseries.forumactif.com/t168p330-saison-3-d-outlander
Descend tout en bas de la page, les deux derniers messages montrent une différence entre la citation sans le pseudo et une autre avec le pseudo.
Celle sans le pseudo (Citation:) a un saut de ligne en plus contrairement à celle avec le pseudo cité, c'est possible de l'enlever ?
Re: Modifier la balise spoiler
Voila, j'ai laissé la flèche, dites-moi si c'est bon pour vous :
Je ne vois pas de problème en rapport avec les citations au sujet de ce saut de ligne, le saut de ligne est déjà présent sur le texte de np-cr, il a simplement était repris.
- Code:
dl.spoiler{
background-image:url(https://i62.servimg.com/u/f62/18/95/70/55/1-1-ou10.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat:no-repeat,repeat;
border: 1px solid #888;
}
.spoiler .hidden {
background-image:url(https://i62.servimg.com/u/f62/18/95/70/55/1-1-fe10.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-repeat:no-repeat,repeat;
padding:20px 2px 2px 2px;
margin:-16px;
}
Je ne vois pas de problème en rapport avec les citations au sujet de ce saut de ligne, le saut de ligne est déjà présent sur le texte de np-cr, il a simplement était repris.
Re: Modifier la balise spoiler
Oui, c'est bon, c'est parfait !
Merci !
Sinon, pour les citations, regarde en dessous de la barre Citation avec les guillemets verts (le message de np-cr), quand tu compares avec le message de Lo et sa citation avec le pseudo précisé, tu peux remarquer qu'il y a une ligne de plus avant le texte cité.
Merci !
Sinon, pour les citations, regarde en dessous de la barre Citation avec les guillemets verts (le message de np-cr), quand tu compares avec le message de Lo et sa citation avec le pseudo précisé, tu peux remarquer qu'il y a une ligne de plus avant le texte cité.
Re: Modifier la balise spoiler
Il y a une légère différence mais pas une ligne ! Faites un screen pour expliquer.
Re: Modifier la balise spoiler
https://2img.net/image.noelshack.com/fichiers/2017/50/3/1513175944-citations.png
Dans la citation sans le pseudo précisé (le message de np-cr), il y a un petit espace en plus entre la barre "Citation:" et le début du texte cité, comparé avec la citation avec le pseudo précisé dans le message de Lo.
Oui, la différence est légère, mais j'aimerais que les deux citations soient pareilles.
Mais si on peut pas modifier ça, c'est pas grave.
Dans la citation sans le pseudo précisé (le message de np-cr), il y a un petit espace en plus entre la barre "Citation:" et le début du texte cité, comparé avec la citation avec le pseudo précisé dans le message de Lo.
Oui, la différence est légère, mais j'aimerais que les deux citations soient pareilles.
Mais si on peut pas modifier ça, c'est pas grave.
Re: Modifier la balise spoiler
Il faut modifier vos codes blockquote et blockquote cite dans votre CSS, les mettre comme ceci :
- Code:
blockquote {
background-image: url(https://i62.servimg.com/u/f62/18/95/70/55/barre-11.png),url(http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg);
background-position: 5px 7px;
background-repeat: no-repeat,repeat;
border: 1px solid #888;
border-radius: 10px 0 0 0;
color: #fff;
padding: 40px 5px 5px;
}
blockquote cite {
background-color: #707070;
background-image: url(http://i65.servimg.com/u/f65/11/95/30/70/citati11.png);
background-position: top right;
background-repeat: no-repeat;
border: 1px solid #888;
border-radius: 12px;
color: #000;
font-weight: 700;
margin-left: 2px;
margin-top: -32px;
width: 652px;
}
Re: Modifier la balise spoiler
Oui, ça enlève l'espace, mais ça pose un autre problème pour les citations citées :
Re: Modifier la balise spoiler
Donnez-moi un lien.
Re: Modifier la balise spoiler
Il faut que je remette les codes que tu m'as donné ?
Page 1 sur 2 • 1, 2
Sujets similaires
» Balise Spoiler
» Balise spoiler sectionnée
» couleur fond balise spoiler
» balise spoiler, c'est résolu, vraiment ,
» Problème avec l'affichage de la balise Spoiler.
» Balise spoiler sectionnée
» couleur fond balise spoiler
» balise spoiler, c'est résolu, vraiment ,
» Problème avec l'affichage de la balise Spoiler.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum