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

-Astuce des Forums Milouze14&Compagnie- Astuce postée par: Réponse automatique: Merci de cliquer ici pour voir le message Pour toute information,merci de contacter un Membre du Staff

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


Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide 
https://www.milouze14.com/f108-entraide-tous-supports

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 !

Merci beaucoup Philippe !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

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

Merci beaucoup !

Merci ;)