[PHPBB2] Afficher plusieurs tailles de police dans les sujets

 ,

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"});


Super idée merci Philippe

Merci Philippe

Merci Philippe. Superbe tutoriel qui servira à de nombreux forums qui ont des membres ayant un handicap visuel.

Un grand Merci Philippe 

Bonjour, Philippe et tous. J'utilise un système plus général mais ceci a l'air très intéressant.
Merci

 Laurent ,

J'utilise un système plus général

C'est à dire mon ami ?

J'ai adopté le tien.
ZZ10 m'en avait fait un pour le forum dans sa totalité.

 ah ok , c'est aussi un sacré bonhomme aussi  .

Sur les scripts, on pouvait lui demander presque n'importe quoi,
il avait toujours une solution  .

Tu me fais honneur Laurent d vyfhueuuj 

Bonjour, merci, quand vous dites plusieurs police, c'est à dire?

 Pierre,

Bonjour, merci, quand vous dites plusieurs police, c'est à dire?

Si tu cliques sur un des boutons , la taille augmentera    .

:fuifduidi: Philippe et merci.

je comprend comment fonctionne t lien je clic dessus mais il y a rien ?

crazy95 ,
ce sont des anciens liens qui n'ont pas été mis à jour.
Je l'ai refais au jour le jour .
Tu dois pouvoir cliquer dessus .
Si tu as un soucis avec cette astuce, direction l'entraide

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !