Skins au choix

Choisissez une skin

News Archives
Contact

Présentation

Fermer Marketinge

Fermer Nos fiches

Fermer Outils

Fermer Plugin, fork, script

Fermer Plugins

Fermer Sécurité

Téléchargement
apps/viewmag.pngTuto - Taille des polices
SiteLabo.jpg
  • ark.png Téléchargements:
  • kate.png Dans le guppy "CSS"
 
En général, le tuto de Pascal est une bonne base de départ. Dans l'application, on peut rencontrer des difficultés.
 
Personnellement, j'ai préféré commencer par
    1. placer le script dans inc/js,
    2. puis les images dans img/ avec son code dans une boîte libre.
    3. Ensuite seulement, je me suis attaqué à la modification de la skin. Comme les proportions sont délicates à fixer, cela m'a permis de pouvoir juger du résultat à mesure que je réalisais des tests.
 
D'abord, il faut modifier le style.css de la skin. Les tailles de polices doivent être exprimées en em et non plus en pixels. Mais cela ne concerne que les fonts, pas les autres éléments mesurés en pixels.
Après avoir placé en tête du fichier une valeur de référence : 

html {
font-size: 85%;
}
 
Le plus délicat est de trouver les bonnes correspondances des tailles de font pour passer la mesure de pixels à em.
 
On peut commencer sur la base de 1em pour 12px. Les em peuvent se mesurer avec des nombres décimaux: 0,9em, 1,3em. Mais cela dépend des skins et il vaut estimer le résultat de l'ensemble des modifications. Cela peut donner des textes trop envahissants ou miniatures et il faut alors recommencer.

 
Avant  Après
html { /* document */
font-size: 12px Arial, Helvetica, sans-serif; color: #4283B9;
background: inherit;
}

body { /* corps du document */
margin: 0; background-image : url(fond.png);
font: 12px Arial, Helvetica, sans-serif; color: #4283B9;
background: url(img/bg.png) #bfc6cc repeat-x left top;
}
html { /* document */
font-size: 85% Arial, Helvetica, sans-serif; color: #4283B9;
background: inherit;
}

body { /* corps du document */
margin: 0; background-image : url(fond.png);
font: 0.9em Arial, Helvetica, sans-serif; color: #4283B9;
background: url(img/bg.png) #bfc6cc repeat-x left top;
}
error.png Dans l'éditeur de votre GuppY

  • si vous ne donnez pas de mesure définie, ce sont les tailles indiquées dans le style.css de la skin qui seront appliquées
  • si vous donnez des valeurs fixes en "px" ou avec le système "small, medium, large, etc...",  le visiteur ne pourra pas faire varier la taille des polices en cliquant sur les boutons, comme on peut le tester sur les textes en noir dans la colonne de gauche ci-dessous
  • si vous donnez des valeurs adaptatives "em", vous améliorez l'accessibilité de votre Guppy, car le visiteur pourra faire varier la taille des polices en cliquant sur les boutons, comme on peut le tester sur le texte en bleu de la colonne de droite

Avant en px ou large, small... Après en em
Titre: Dans l'éditeur GuppY

Texte:
On peut commencer sur la base de 1em pour 12px. Les em peuvent se mesurer avec des nombres décimaux: 0,9em, 1,3em. Mais cela dépend des skins et il vaut estimer le résultat de l'ensemble des modifications. Cela peut donner des textes trop envahissants ou miniatures et il faut alors recommencer.
Titre: Dans l'éditeur GuppY

Texte: 
On peut commencer sur la base de 1em pour 12px. Les em peuvent se mesurer avec des nombres décimaux: 1em, 1,3em. Mais cela dépend des skins et il vaut estimer le résultat de l'ensemble des modifications. Cela peut donner des textes trop envahissants ou miniatures et il faut alors recommencer.
mode source mode source
<td>Titre: <span style="font-size: large; ">Dans l'éditeur GuppY</span><br />
<br />
Texte: <br /> <span style="font-size: small; ">On peut commencer sur la base de 1em pour 12px. Les em peuvent se mesurer avec des nombres décimaux: 0,9em, 1,3em. Mais cela dépend des skins et il vaut estimer le résultat de l'ensemble des modifications. Cela peut donner des textes trop envahissants ou miniatures et il faut alors recommencer.</span></td>
<td>Titre: <span style="font-size: 1.5em; ">Dans l'éditeur GuppY</span><br /> <br /> Texte: <br /><span style="font-size: 1.1em; ">On peut commencer sur la base de 1em pour 12px. Les em peuvent se mesurer avec des nombres décimaux: 1em, 1,3em. Mais cela dépend des skins et il vaut estimer le résultat de l'ensemble des modifications. Cela peut donner des textes trop envahissants ou miniatures et il faut alors recommencer.</span></td>
Augmenter la taille   initial.png   diminuer.png

  •  Modifier FCKeditor

Tout cela est bien joli, mais pour éditer le texte avec des mesures adaptatives en em, il faut que FCKeditor, votre éditeur wysiwyg du Guppy vous propose les tailles en em. Or, de série, il est configuré pour proposer des tailles de police avec le système small, medium, large etc...
Il convient donc de modifier également la configuration de FCKeditor pour remplacer le choix des tailles de polices par les valeurs adaptatives en em.

Explications: Ouvrir dans un éditeur de code le fichier
admin/editors/fckeditor_config/guppy_fckconfig.js
vers la ligne 207, vous trouvez:
FCKConfig.FontSizes        = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;
Que vous aller remplacer par:
FCKConfig.FontSizes        = '0.6em;1em;1.1em;1.3em;1.5em;;2em;3em' ;

Enregistrez, remettez en ligne et miracle, dans l'éditeur au niveau de la taille de police les em s'affichent à la place des small, medium et consorts.

Maintenant vous savez comment ça se fait, mais si vous hésitez à vous lancer dans le changement du code, voilà ci-dessous le lien vers le téléchargement du fichier déjà modifié juste pour vous. C'est un fork: veillez à sauvegarder l'original auparavant. Et ce sera à recommencer chaque fois qu'un patch de GuppY modifiera ce fichier.


Téléchargement du fichier de config gestplug.gif



Code à insérer dans une boite latérale ou là où vous voulez



Le code de Pascal est à utiliser pour l'intégrer dans la skin.


En tant que membres en cure de GuppyRelooking vous pouvez demander un accès bac à sable ici

Pour nos patients il y a aussi  musicstore.png


Rédacteur Le_Babelleir
Date de création : 02/06/2010 @ 09:54
Dernière modification : 18/08/2010 @ 01:05
Catégorie :
Page lue 754 fois


Imprimer l'article Imprimer l'article



Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !


D'autres plugins
  • JCC - Box

  • TruPlayer

  • NavBar

  • GestPlug

  • Google Map

  • Contact

  • Slide Show

  • CopList


couleur.gif Taille des polices
Augmenter la taille   initial.png   diminuer.png

Pétition
Connexion...
 Liste des membres Membres : 350

Votre pseudo :

Mot de passe :

[ Mot de passe perdu ? ]


Membre en ligne :  Membre en ligne :
Anonymes en ligne :  Anonymes en ligne : 2
Création d'avatars

Haut Bas