Accueil > Développement web > Modification du style de pages publique avec Stylish
319 visites

Modification du style de pages publique avec Stylish

mercredi 28 octobre 2015

Version imprimable de cet article Version imprimable

Présentation

Le plugin Stylish pour Firefox permet d’appliquer à tout site ou page internet/intranet un style CSS personnalisé.

Chaque style "personnalisé" concernera un domaine, une url ...

Il ne peut modifier la structure des pages, mais en corrigeant ou améliorant le style CSS du site, il modifiera son apparence et donc sa lisibilité.

Le style déclaré avec le plugin Stylish viendra donc surcharger le style de la page.

Ce qui permet aisément de rendre plus lisible certains sites.

1) Installation du plugin et de ses extensions

Dans le menu Outils - Modules complémentaires (CTRL-MAJ-A), chercher et installer depuis le catalogue :

  • Stylish
  • Stylish-Custom
  • Stylish Tools

Le dernier, Stylish Sync, est moins important, puisqu’il utilise le moteur de synchronisation Mozilla Sync pour synchroniser les styles "personnels" (à appliquer à certains sites ou page) entre différents ordinateurs.

2) Déclaration d’un site

En cliquant sur la petite icône de Stylish , puis "Créer un nouveau style" et :

  • pour cette URL - et donc pour une unique page
  • si le site est atteint par nom et nom par IP, Stylish proposera différents domaines. Par exemple, pour www.tomshardware.fr, Stylish propose :
  • style vierge

Cela commencera la création d’un style, valide pour

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("tomshardware.fr") {
}

Il ne restera plus qu’à déclarer des règles CSS.

3) Création du style

On pourra s’aider des plugins Firebug et éventuellement Colorzilla.

Afin de surcharger correctement les différents héritages de style et d’être sûr que le style "personnel" a la priorité sur le style "officiel" pour un élément, il est préférable d’être le plus complet possible dans la déclaration des règles.

Malheureusement, les style déclarés dans la page par attribut html style="" sur un élément ponctuel ne peuvent être surchargés.
Cela dit, les propriétés max-width/height et min-width/height peuvent permettre de surcharger l’attribut width/height.

Prenons le cas du forum Tom’s Hardware, www.tomshardware.fr/forum

Comme on peut le voir, le style n’est défini que dans des feuilles CSS, que l’on pourra surcharger.
On pourra donc surcharger les tailles fixes d’objet pour les rendre adaptables et ainsi profiter de toute la largeur de l’écran.

En parcourant l’arborescence de la page avec Firebug, et les règles CSS associées à chaque élément, on peut aisément arriver à déterminer des règles CSS :

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("tomshardware.fr") {
 .page, .frmTopic {
   width:auto;
   max-width:auto;
 }
 .blocLatestArticlesInner .blocLatestArticlesContent .latestArticlesCarousel.js .carousel-wrap {
   width:1400px;
 }
 #subBody.bgFooterBody .tguContent.line {
   height:1800px;
 }
 #subBody.bgFooterBody #mainSection.page.frmTopic .tguContent.line {
   height:2200px;
 }
 pre.html.bb-code {
   background-color: lightblue;
 }
}

les tailles fixes sont adaptées à un écran particulier, et sont malheureusement indispensables en raison de la structure particulière des pages.

Ce qui donne :

On peut remarquer que lorsqu’un style "personnalisé" est appliqué par Stylish à une page, la couleur de l’icône change

EDIT 10/06/2016 : ajout de la couleur de background "lightblue" au code préformaté, ce qui donne :

l’espace vide à droite est la colonne Activité récente / post rapide / Experts récents / Derniers dossiers / Proposez votre astuce, que l’on ne voit pas car le post est très bas dans la page.
(voir topic d’origine)

4) Gestion des styles

Si un style est déclaré pour une page, l’icône sera colorisée. En cliquant sur l’icône, on pourra voir le style associé à la page, et si besoin le désactiver.

Les styles peuvent ensuite être gérés dans le menu des modules de Firefox

5) Importation de styles

Dans la page de gestion des modules, sous la rubrique "Styles utilisateurs" il y a un bouton "Install from URLs" permettant de télécharger des styles.
En absence de style, le bouton est en bas, sinon en haut.

Il suffit alors d’indiquer l’URL du fichier CSS

Et enfin de donner un nom au style importé.

Il est aussi possible d’installer directement des styles depuis https://userstyles.org, site qui aurait justement bien besoin de stylish, ne serait-ce que pour pouvoir profiter de la largeur d’écran...
ça tombe bien, justement il y en a
Une boîte de recherche permet de trouver des styles pour certains sites.

Puis dans la page du style, il suffit de cliquer sur le bouton vert "Install with Stylish"

Et de confirmer l’installation.

Style CSS Tom's Hardware pour Stylish -  Cascading Style Sheet - 727 octets
Style CSS Tom’s Hardware pour Stylish

Style CSS Papilles et pupilles pour Stylish -  Cascading Style Sheet - 3.4 ko
Style CSS Papilles et pupilles pour Stylish
structure de la page extrêmement complexe, rendant la conception d’un CSS "de correction" difficile.

Répondre à cet article

Total 118936 visites depuis 2107 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail