Modifier la balise spoiler

3 participants

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier la balise spoiler

Message par Clemsi Jeu 7 Déc 2017 - 12:04

Détails techniques

Version du forum : Invision
Poste 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
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Sam 9 Déc 2017 - 1:15

:up:
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Dim 10 Déc 2017 - 17:17

:up:
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par IzumiRK Lun 11 Déc 2017 - 0:54

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;}
mais il est possible que ça influence d'autres parties (comme le titre) ou que ça décale aussi votre texte vers le haut, après il faut changer les chiffres selon le besoin. Typiquement quand on ne met pas la même distance partout ça fonctionne dans l'ordre "haut droite bas gauche", par exemple :
Code:
padding : 3px 2px 3px 2px;
(3px avec le haut et le bas, 2px avec la droite et la gauche)
IzumiRK

IzumiRK
****

Messages : 206
Inscrit(e) le : 25/02/2015

http://indare.forumactif.com/
IzumiRK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Lun 11 Déc 2017 - 9:14

J'ai essayé ces codes, mais ça réduit aussi la largeur du cadre des spoilers, si tu vois ce que je veux dire. Confused
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par IzumiRK Lun 11 Déc 2017 - 11:12

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 : Modifier la balise spoiler MCibDwx
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 =)
IzumiRK

IzumiRK
****

Messages : 206
Inscrit(e) le : 25/02/2015

http://indare.forumactif.com/
IzumiRK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Lun 11 Déc 2017 - 11:42

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... Smile
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 12:50

:up:
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 18:01

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 :

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:...

Modifier la balise spoiler NnOwP

Modifier la balise spoiler Kg8Ep




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 :

Modifier la balise spoiler Xo7xp

Modifier la balise spoiler WvAXY

Dites-moi si une de ces solutions vous conviendrait.

Bien à vous.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 18:09

Salut Jay,

Je préfère la troisième solution car on peut toujours modifier le titre du spoiler. Smile

Mais sinon, c'est possible que le contenu du spoiler n'ait pas d'espace à droite, à gauche, et bas et en haut ?
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 21:37

Re, oui, c'est possible, dans votre CSS, vous devez avoir ceci :

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.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 21:55

Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 22:05

Il faut mettre les codes que je vous ai donné, ils n'y sont pas la. scratch
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 22:27

Désolé, j'ai cru que je les avais mis la première fois. Very Happy
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.
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 22:35

Oui :

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... Siffleur drunken Assomé Mr. Green
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 22:39

Merci, c'est parfait !

Qu'est-ce que tu as changé ?
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 22:41

Bah j'ai fait en sorte que la flèche soit plus proche du bord, ça se voit non ? (c'est une image)
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 22:44

Oui, ça se voit, mais je voulais savoir ce que tu as modifié dans le code. Smile
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 22:47

J'ai changé l'image enfin les images : https://i.goopics.net/PPLPa.png et https://i.goopics.net/Nngny.png
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 22:49

Ah ok !
Et c'est possible de mettre "contenu" à la place de "texte" ? Embarassed
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mar 12 Déc 2017 - 22:52

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.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mar 12 Déc 2017 - 22:56

Désolé. Embarassed
"Cliquez pour afficher le contenu" et "Cliquez pour cacher le contenu", pour demain, alors.

Bonne soirée/nuit, Jay. Smile

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 ?
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mer 13 Déc 2017 - 5:46

Voila, j'ai laissé la flèche, dites-moi si c'est bon pour vous :

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.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mer 13 Déc 2017 - 11:35

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é.
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Mer 13 Déc 2017 - 15:11

Il y a une légère différence mais pas une ligne ! Faites un screen pour expliquer.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Mer 13 Déc 2017 - 15:41

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.
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Jeu 14 Déc 2017 - 11:02

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;
}
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Jeu 14 Déc 2017 - 12:48

Oui, ça enlève l'espace, mais ça pose un autre problème pour les citations citées :

Modifier la balise spoiler 1513252006-citations
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par ◦Jay◦ Jeu 14 Déc 2017 - 18:07

Donnez-moi un lien.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la balise spoiler

Message par Clemsi Jeu 14 Déc 2017 - 19:05

Il faut que je remette les codes que tu m'as donné ?
Clemsi

Clemsi
*****

Masculin
Messages : 576
Inscrit(e) le : 08/07/2016

https://www.forumactif.com/
Clemsi a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum