Membres connectés récemment
[PHPBB2] Afficher plusieurs tailles de police dans les sujets
+19
Ptite_Perle
50Thierry
Louaque
Jackymi
photoclic
dragon594
mariok
Sacha
Girly
damieng59
patriciadpt30
crazy95
pierre31250
Aenigma
bildil62
fascicularia
Teten85
fleur78
Milouze14
23 participants
Page 2 sur 2 • Partagez
Page 2 sur 2 • 1, 2
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:
Explications du code html:
Peut être remplacé par du texte, le code sera alors comme ceci:
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
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:
Explications du javascript:
Chaque bouton sera représenté par ce javascript:
,
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>
- 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>
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"
- Code:
M14_14px
- Code:
title="Afficher le texte avec une taille de 14px">
- Code:
<img src="LE LIEN DE L IMAGE EN 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>
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*/
}
- 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*/
}
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"});
})
});
Explications du javascript:
Chaque bouton sera représenté par ce javascript:
- Code:
$(".M14_14px").click(function()
{$( ".postbody" ).css({fontSize:"14px"});
})
- Code:
$(".M14_14px")
- Code:
.click(function()
- Code:
{$( ".postbody" )
- Code:
.css({fontSize:"14px"});
- InvitéInvité
Merci beaucoup Philippe !
- InvitéInvité
Merci beaucoup !
Page 2 sur 2 • 1, 2
Sujets similaires
» [PHPBB2]Afficher le nombre LIKES dans la liste des sujets
» [PHPBB2] Afficher l'auteur du sujet dans la liste des sujets
» [PHPBB2] Afficher la description du forum dans la liste des sujets
» [PHPBB2] Afficher les forums de la catégorie dans la liste des sujets
» [PHPBB2] Afficher une infobulle dans les cellules des forums et la liste des sujets
» [PHPBB2] Afficher l'auteur du sujet dans la liste des sujets
» [PHPBB2] Afficher la description du forum dans la liste des sujets
» [PHPBB2] Afficher les forums de la catégorie dans la liste des sujets
» [PHPBB2] Afficher une infobulle dans les cellules des forums et la liste des sujets
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 2 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum