Fils RSS pour les
Articles
Commentaires

Petite modif du plugin ‘iG-Syntax Hiliter’ (encore)


Marc Charlet 20 septembre 2006 par Marc Charlet

Dernière1 de ma série2 sur le plugin iG-Syntax Hiliter

Symptômes

La barre grisée et le cadre d'affichage sont trop larges pour l'affichage dans IE3et renvoient la 'sidebar' vers les profondeurs de la page.

Solution

Une simple petite modif de la feuille de style permet de diminuer la largeur de ces deux éléments et rend ainsi l'affichage conforme dans IE.

Dans le fichier /www/wordpress/wp-content/plugins/ig_syntax_hilite/css/syntax_hilite_css.css
(vers la ligne 7) modifier ceci:

PLAIN TEXT
  1. /* change this line to set the width of code box */
  2. .syntax_hilite { width:500px; }
  3. /* change this line to set the width of code box in a list */
  4. li .syntax_hilite { width:460px; }
  5. .igBar, li .igBar {
  6.     background-color:#D6D3CE; font-family:courier,arial,verdana;
  7.     border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE;
  8.     border-right:1px solid #424142;
  9. }
  10. /* change this line to set the width of plain text bar above code box */
  11. .igBar { width:511px; }
  12. /* change this line to set the width of plain text bar above code box in a list */
  13. li .igBar { width:471px; }

en enlevant 10px à toutes les largeurs pour obtenir ceci:

PLAIN TEXT
  1. /* change this line to set the width of code box */
  2. .syntax_hilite { width:480px; }
  3. /* change this line to set the width of code box in a list */
  4. li .syntax_hilite { width:440px; }
  5. .igBar, li .igBar {
  6.     background-color:#D6D3CE; font-family:courier,arial,verdana;
  7.     border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE;
  8.     border-right:1px solid #424142;
  9. }
  10. /* change this line to set the width of plain text bar above code box */
  11. .igBar { width:491px; }
  12. /* change this line to set the width of plain text bar above code box in a list */
  13. li .igBar { width:451px; }

Autre symptôme

Mon Firefox a du mal a afficher des numéros de ligne à 3 positions4 (et plus?)

Solution

Augmenter la distance au bord (padding left) également dans le css:

PLAIN TEXT
  1. .syntax_hilite, li .syntax_hilite {
  2.     padding:3px 3px 10px 8px; border:1px solid #303130; background-color:#FEFEFE;
  3.     font-size:13px; font-family:'Courier New',Courier,monospace;
  4.     /* comment the line below to remove scrolling in code boxes */
  5.     overflow:auto; white-space:nowrap;
  6. }

8px devient 18px por donner ceci:

PLAIN TEXT
  1. .syntax_hilite, li .syntax_hilite {
  2.     padding:3px 3px 10px 18px; border:1px solid #303130; background-color:#FEFEFE;
  3.     font-size:13px; font-family:'Courier New',Courier,monospace;
  4.     /* comment the line below to remove scrolling in code boxes */
  5.     overflow:auto; white-space:nowrap;
  6. }

  1. du moins je l'espère [retour]
  2. voir ici et ici [retour]
  3. probablement encore un coup du 'box model' [retour]
  4. il 'mange' le premier chiffre significatif [retour]

Tags: , , , , , ,

Publié dans Rubrique-à-brac, Wordpress |

Les commentaires sont fermés.