BBCODE personnaliser l'apparence des boutons

ajout de BBcode /modifications / suppressions
Répondre
Avatar du membre
Yunie
Messages : 26
Enregistré le : 13 avr. 2019 20:16

BBCODE personnaliser l'apparence des boutons

Message par Yunie » 06 mai 2019 10:35

BBCODE personnaliser l'apparence des boutons il y a deux manières d'ajouter une image au bbcode
  1. si vous avez l'extention Advanced BBCode Box
    1. Créer une image GIF de 20x20 px et renommez là du nom de celui-ci (pour cet exemple spoiler.gif) puis téléversez là dans le dossier www/ext/vse/abbc3/images/icons
    2. Utilisation du BBCode :aparte: attention il ne faut ni majuscules ni numéros dans le titre spoiler sinon cela ne fonctionnera pas

      Code : Tout sélectionner

      [spoiler={TEXT1}]{TEXT2}[/spoiler]
    3. Code html de remplacement :

      Code : Tout sélectionner

      <div style="margin:20px; margin-top:5px"><div class="quotetitle">{TEXT1} : <input type="button" value="Afficher" style="color:red;font-size:10px;margin:0px;padding:0px 5px;" 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 = 'Masquer'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT2}</div></div></div>
    4. Ligne d’aide

      Code : Tout sélectionner

      [spoiler=texte visible]texte caché[/spoiler]
  2. si vous n'avez pas cette extension
    1. Créer une image GIF de 20x20 px et renommez là du nom de celui-ci (pour cet exemple spoiler.gif) puis téléversez là dans le dossier www/styles/votre style/theme/images/
    2. Utilisation du BBCode

      Code : Tout sélectionner

      [bspoiler={TEXT1}]{TEXT2}[/bspoiler]
      
    3. Code html de remplacement :

      Code : Tout sélectionner

      <div  class="bbcode-bspoiler" style="margin:20px; margin-top:5px">
      	<div class="quotetitle"><strong>{TEXT1} :</strong> 
      		<input type="button" value="Afficher" style="color:red;font-size:10px;margin:0px;padding:0px 5px;" 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 = 'Masquer'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" />
      	</div>
      	<div class="quotecontent">
      		<div style="display: none;">{TEXT2}</div>
      	</div>
      </div>
      
    4. Ligne d’aide

      Code : Tout sélectionner

      [bspoiler=texte visible]texte caché[/bspoiler]
      1. Feuille de style perso : utilisation des icons fontawesome.com

        Code : Tout sélectionner

        .button.bbcode-bspoiler {
        	font-size: 0;
        }
        
        .button.bbcode-bspoiler:before {
        	content: 'f13d'; 
        	font-family: FontAwesome;
        	font-style: normal;
        	font-weight: normal;
        	font-size: 14px;
        	line-height: 1.3em;
        	font-variant: normal;
        	text-rendering: auto;
        	padding: 0 2px;
        }
        
      2. Feuille de style perso : utilisation d'icône personnel

        Code : Tout sélectionner

        .button.bbcode-bspoiler {
        	font-size: 0;
        }
        
        .button.bbcode-bspoiler:before {
        	content: url(bspoiler.jpg);
        	/*font-family: FontAwesome;*/
        	font-style: normal;
        	font-weight: normal;
        	font-size: 14px;
        	line-height: 1.3em;
        	font-variant: normal;
        	text-rendering: auto;
        	padding: 0 2px;
        }
        

Répondre