[PHPBB2] Afficher plusieurs tailles de police dans les sujets

Rappel du premier message :

 ,

ce tutoriel est idéal pour les forums ayant des membres avec un handicap visuel.

Aperçu imagé:




En fait actuellement la taille de police est attribuée par le P.A ou par la C.S.S.

Je vais vous donné la possibilité d'ajouter des boutons qui seront visibles par tous .

Dans un premier temps, il va vous falloir créer les images (boutons) avec la valeur
que vous voulez donner à vos membres  .

Un peu comme ceux du forum:








Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherchez ceci:

Code:


<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>


Remplacez par ceci:

Code:


<td valign="top" nowrap="nowrap" class="post-options">
<div class="M14_px">
<span class="M14_18px"title="Afficher le texte avec une taille de 18px">
<img src="LE LIEN DE L IMAGE EN 18PX"/>
</span>
<span class="M14_16px"title="Afficher le texte avec une taille de 16px">
<img src="LE LIEN DE L IMAGE EN 16PX"/>
</span>
<span class="M14_14px"title="Afficher le texte avec une taille de 14px">
 <img src="LE LIEN DE L IMAGE EN 14PX"/>
</span>
  </div>
    {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>


Pensez à enregistrer puis à valider en cliquant respectivement sur    puis
Explications du code html:

Code:


<span class="M14_14px"title="Afficher le texte avec une taille de 14px">
 <img src="LE LIEN DE L IMAGE EN 14PX"/>
</span>


Code:

<span class="M14_14px"

La class

Code:

M14_14px

va être en relation avec le javascript donné plus bas

Code:


title="Afficher le texte avec une taille de 14px">


Le texte qui s'affichera au survol du bouton

Code:


<img src="LE LIEN DE L IMAGE EN 14PX"/>


L'image du bouton qui affichera le texte du taille de 14px

Peut être remplacé par du texte, le code sera alors comme ceci:

Code:


<span class="M14_14px"title="Afficher le texte avec une taille de 14px">Votre texte en 14px</span>


Il faudra alors déposer en plus dans la C.S.S une couleur et une taille définie  .



Voilà pour le côté html  .

Passons à la feuille de style pour placer le groupe de boutons.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:


.M14_px
{
float:left;/*on place le groupe a gauche*/
margin-left:50px;/*on le decale de 50px de la gauche*/
width:150px;/*la largeur du groupe*/
}


Si vous avez choisit l'option sans image la C.S.S sera comme ceci:

Code:


.M14_px
{
float:left;/*on place le groupe a gauche*/
color: VOTRE COULEUR;/*la couleur de police*/
font-size:VOTRE TAILLE DE POLICE px ; /*la taille de police*/
margin-left:50px;/*on le decale de 50px de la gauche*/
width:150px;/*la largeur du groupe*/
}


Pensez à valider les modifications en cliquant sur le bouton  

C'est tout  

---

Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite comme :Augmenter la taille de police
Cocher Sur les sujets:

Collez ceci:

Code:


$(document).ready(function()
{
$(".M14_14px").click(function()
{$( ".postbody" ).css({fontSize:"14px"});
});
$(".M14_16px").click(function()
{$( ".postbody" ).css({fontSize:"16px"});
});
$(".M14_18px").click(function()
{$( ".postbody" ).css({fontSize:"18px"});
})
});




Pensez a cliquer sur le bouton 

Explications du javascript:

Chaque bouton sera représenté par ce javascript:

Code:


$(".M14_14px").click(function()
{$( ".postbody" ).css({fontSize:"14px"});
})


On retrouve la class mentionnée plus haut:

Code:

$(".M14_14px")

puis au clic

Code:


.click(function()


sur les messages

Code:


{$( ".postbody" )


on puisse avoir une taille spécifique:

Code:


.css({fontSize:"14px"});


Merci beaucoup !

Merci beaucoup Philippe !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci Milouze,
Qui voit bien, va loin...

Merci beaucoup !

Merci ;)