Img de fond pour balise spoiler

Ce forum aborde toutes les questions qu'un codeur ou webmaster pourrait se poser, et n'ayant aucun rapport direct avec phpBB.
Tout ce qui peut concerner la récupération des sessions de phpBB sur votre site, doit se faire dans cette section.

Modérateur : Équipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com
Répondre
Auteur
ACooper
Posteur néophyte
Posteur néophyte
Messages : 4
Enregistré le : 21 juin 2021 à 12:11

Img de fond pour balise spoiler

Message par ACooper »

Bonjour, j'ai rapidement recherché mais je n'ai pas trouvé de chose proche.
Je cherche à transformer ma balise spoiler lui donner une image de fond sur laquelle le texte s'afficherait :

Code : Tout sélectionner

[Spoiler]{TEXT}[/Spoiler]

Code : Tout sélectionner

<dl class="codebox"><dt> <a href="javascript: void(0);" onClick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = 'Fermer le parchemin'; } else { spoiler.style.display = 'none'; this.innerHTML = 'Afficher le parchemin'; };">Afficher le parchemin</a></dt><dd style="display: none;">{TEXT}</dd></dl>
Je bloque sur l'ajout d'une img en background qui s'afficherait avec le texte une fois que l'on clique
un peu comme cela
Image

si quelqu'un à une idée car je rame totalement :-)
Merci
Avatar du membre
On Stage
Roi des posts
Roi des posts
Messages : 981
Enregistré le : 19 mars 2018 à 16:04
Contact :

Img de fond pour balise spoiler

Message par On Stage »

Salut
Sans doute en t'inspirant de ce code : https://www.phpbb-fr.com/customise/db/b ... _spoiler2/
En y intégrant un background-image
phpBB version: 3.3.4
php version: 8.0.7

Mes traductions d'extensions
Auteur
ACooper
Posteur néophyte
Posteur néophyte
Messages : 4
Enregistré le : 21 juin 2021 à 12:11

Img de fond pour balise spoiler

Message par ACooper »

On Stage a écrit :
21 juin 2021 à 14:47
Salut
Sans doute en t'inspirant de ce code : https://www.phpbb-fr.com/customise/db/b ... _spoiler2/
En y intégrant un background-image
Je vais essayer ça, ce qui me donne un

Code : Tout sélectionner

<div style="margin:20px; margin-top:5px"> <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" /></div><div class="quotecontent">
<div style="background-image: url(monimage); background-size: 100% 100%; border: 1px solid black; color: black; padding:15px 15px;;">{TEXT}</div></div>



Et je galère parce que la balise est ouverte dès le départ ?
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27074
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Img de fond pour balise spoiler

Message par cabot »

ACooper a écrit :
22 juin 2021 à 09:46
Et je galère parce que la balise est ouverte dès le départ
Il manque un display: none; sur le style de la balise qui contient le background.
Auteur
ACooper
Posteur néophyte
Posteur néophyte
Messages : 4
Enregistré le : 21 juin 2021 à 12:11

Img de fond pour balise spoiler

Message par ACooper »

Ca marche niquel merci !
Par contre, quand je sélectionne le texte et que je clique sur la balise bbcode, cela supprime le texte selectionné pour n'afficher que le bbcode en []
Est ce que cela se règle dans l'ajout du bbcode ou ailleurs ?
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27074
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Img de fond pour balise spoiler

Message par cabot »

Aucun idée, il faudrait voir ça en live.
Auteur
ACooper
Posteur néophyte
Posteur néophyte
Messages : 4
Enregistré le : 21 juin 2021 à 12:11

Img de fond pour balise spoiler

Message par ACooper »

C'est reglé mais ce n'est pas tout à fait comme je voudrais

Ca me donne un code html comme ceci

Code : Tout sélectionner

<div style="margin:10px; margin-top:1px">
<div class="quotetitle"><input class="button2 btnlite" type="button" value="Dérouler le parchemin" style="text-align:left;width:150px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Fermer le parchemin'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Dérouler le parchemin'; }" /></div>

<div class="quotecontent"><div style="display: none; background-image: url(url de mon image); display: none; background-size: cover; border: 2px solid black; color: black; padding:35px 25px;font-family: Papyrus; font-size: 14px;font-weight: bold;">{TEXT}</div></div>
Mais je souhaiterais transformer le cadre indiquant derouler ou fermer le parchemin en image de parchemin avec le texte du coup
Image
Avatar du membre
Steph
Administrateur
Administrateur
Messages : 20896
Enregistré le : 29 déc. 2008 à 15:48
Localisation : Alsace / Bas-Rhin / France
Contact :

Img de fond pour balise spoiler

Message par Steph »

Salut,

Pour obtenir un support plus efficace, merci de préciser l'URL de votre forum, et de nous mettre à disposition un compte sur votre forum.
Répondre

Retourner vers « Coding, Webmastering et Sécurité informatique »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité