Comment réparer les petits désagréments sur le Web avec Elegant [Firefox & Chrome]

Les concepteurs de sites Web ont un travail presque impossible. Ils doivent proposer un design qui plaise à tout le monde. Quand on parle d'un service comme Gmail, utilisé par d'innombrables millions de personnes partout dans le monde, vous pouvez vraiment laisser tomber la partie 'presque' - c'est tout simplement impossible. Même si une refonte est appréciée par la plupart des gens, il y aura toujours des utilisateurs qui n'aimeront vraiment pas le nouveau look.

Parfois, il y a suffisamment de ces utilisateurs pour forcer une entreprise à faire marche arrière, comme Google l'a récemment fait avec les boutons d'icône Gmail. Mais que se passe-t-il s'il y a quelque chose que vous vraiment déteste, et l'entreprise ne le change pas en arrière? Êtes-vous coincé avec ça pour toujours? Grâce aux styles utilisateur, vous pouvez résoudre vous-même ces problèmes.

Présentation élégante

Élégant est un module complémentaire gratuit disponible à la fois pour Firefox et Chrome , et cela vous permet de faire quelque chose d'assez magique : appliquer vos propres styles aux éléments de la page Web. Même si vous n'êtes pas un développeur Web et que vous n'avez jamais écrit un peu de CSS de votre vie, c'est beaucoup plus facile qu'il n'y paraît. Vous pouvez utiliser Elegant pour transformer complètement les sites Web (comme je vous le montrerai dans la section suivante), mais plus important encore, vous pouvez utiliser Elegant pour corriger les petits désagréments en quelques minutes.

Par exemple, j'ai eu un problème avec la taille de police par défaut dans Gmail. L'interface était bien - je ne voulais pas zoomer (Ctrl +) avec mon navigateur, car cela augmenterait la taille de tous les éléments de l'interface et serait vraiment moche. Je voulais juste un moyen d'agrandir légèrement la police du message.

Avec Stylish, c'était vraiment simple, et je vais vous montrer comment. Mais avant d'envisager de créer vos propres styles d'utilisateurs, parlons de l'exploitation du travail des autres.

UserStyles.org

Si quelque chose vous énerve, il est tout à fait possible que vous ne soyez pas seul. UserStyles.org est un site Web qui permet aux utilisateurs de partager les styles qu'ils ont créés. Ci-dessus, vous pouvez voir un style ( Ajouter des étiquettes aux icônes de la barre d'outils ) recommandé par RandyN, commentateur de MakeUseOf, en réponse à notre article sur les boutons d'icônes Gmail. Ce style vous permet de conserver les icônes, mais d'ajouter des étiquettes de texte - quelque chose que Google ne vous laissera pas faire.

UserStyles.org est génial, mais il n'est pas parfait. Certaines conceptions essaient d'en faire trop (changer complètement l'apparence d'un site Web), et certaines sont destinées aux anciennes versions de sites Web et sont maintenant cassées. Si vous essayez de réparer quelque chose de petit et que vous ne le trouvez pas sur UserStyles.org, votre meilleure solution est peut-être de le faire vous-même.

Créer votre propre style d'utilisateur simple

Pour créer votre propre style d'utilisateur, vous devez d'abord savoir quel élément de la page vous essayez de modifier, puis quel changement vous souhaitez apporter. Donc, pour commencer, faites un clic droit sur ce que vous voulez changer et choisissez Inspecter l'élément . Vous devriez voir quelque chose comme ceci :

Firefox assombrit le reste de la page et dessine un cadre très clair autour de l'élément que vous avez sélectionné. Au-dessus de cet élément, le texte qui dit div#2d6.ii.gt.adP.adO , est un ensemble de classes CSS, avec un identifiant (la partie qui commence par #). C'est le sélecteur qui affecte le style de cet élément. En bas de l'écran se trouve une barre de navigation qui vous permet de ' parcourir l'arbre DOM ', ou en termes plus simples, monte et descend dans la hiérarchie des éléments menant à l'élément que vous avez choisi.

Le nom du jeu ici est de choisir l'élément que vous souhaitez styliser et de rendre la sélection pas si étroite qu'elle n'affectera pas tout ce que vous voulez affecter, ni si large qu'elle gâcherait d'autres choses.

J'ai cliqué un élément plus haut, div.gs , juste parce que j'aime son nom (on dirait quelque chose qui ne changera pas trop tôt, mais c'est une supposition complète de ma part). Il affecte toute la zone de message. Une fois la zone que vous souhaitez styliser est sélectionnée, cliquez sur le bouton Style bouton dans le coin inférieur droit, pour ouvrir le Règles pain:

Je sais, ça fait peur au début. Mais c'est là que vous voyez les différentes règles CSS qui affectent l'élément que vous avez sélectionné, et c'est là que vous pouvez faire vos propres modifications temporaires et voir leur impact sur la page en temps réel, sans la recharger. Mais que faut-il changer ? Clique le Propriétés bouton et décochez Uniquement les styles utilisateur :

Ici vous pouvez voir une liste complète des tous Règles CSS. Vous pouvez faire défiler la liste jusqu'à ce que vous trouviez une règle qui convienne à vos besoins (taille de police dans notre cas), et même cliquer sur le point d'interrogation à côté pour ouvrir une page d'explication. Donc, maintenant nous savons que nous voulons ajuster la propriété font-size pour tous les éléments div qui ont une classe de ' gs ' (écrit en sténographie comme div.gs ).

La seule question qui reste est de savoir quelle sera sa valeur. Pour cela, revenons au volet Règles et commençons à jouer :

40 pixels est peut-être un peu fou, mais vous voyez l'idée générale. Jouez avec cela et n'hésitez pas à ajouter d'autres propriétés, jusqu'à ce que vous obteniez le look que vous recherchiez. Assurez-vous de ne pas fermer la page, car vos modifications sont ne pas enregistré n'importe où.

Enregistrer votre nouveau style

Une fois que cette partie du site ressemble à ce que vous voulez, il est temps de la sauvegarder. Clique le Élégant dans la barre des modules complémentaires et sélectionnez Écrire un nouveau style . Élégant voudrait alors savoir sur quelles pages il doit appliquer le nouveau style - dans notre cas, choisissez la deuxième option, mail.google.com . Ensuite, vous verrez cette boîte de dialogue :

Je l'ai déjà rempli. Évidemment, j'ai choisi un nom et quelques balises pour le style. Mais le vrai truc se passe dans le code : la ligne 3 était déjà là – Stylish l'a mis en place pour qu'il sache sur quelles pages le style s'applique. Mais les lignes 5-7 sont à moi. Analysons-les :

Ligne 5 : div.gs { – cette partie que vous devriez reconnaître. C'est l'élément que nous avons décidé de styliser. L'accolade ouvrante signifie que nous allons maintenant écrire quelques règles CSS. Ligne 6 : taille de police : 20px !important; – c'est la règle que nous souhaitons changer (font-size), suivie de sa nouvelle définition (20 pixels), puis d'une déclaration !important, ce qui signifie que Firefox obéirait à cette règle même si un élément plus proche du texte essaie de définir la taille de la police à quelque chose de différent. Ligne 7 : } – fermeture de la définition de style.

Ensuite, cliquez sur Aperçu et émerveillez-vous devant votre travail :

Et enfin, une fois que vous voyez que cela fonctionne, cliquez sur Sauvegarder.

Ce n'est pas un guide complet

Je suis bien conscient que pour garder ce court tutoriel dans les limites d'un seul message, j'ai dû faire un certain nombre de sauts et de sauts. Si vous avez été confus en cours de route, veuillez accepter mes excuses. CSS est délicat au début, mais ce n'est pas si compliqué une fois que vous avez pris le coup - et la personnalisation des sites Web localement reste l'un des meilleurs moyens d'apprendre.

Si quelque chose vous a dérouté, veuillez me demander ci-dessous et je ferai de mon mieux pour vous aider.

le fichier est ouvert dans le système ne peut pas supprimer

Partager Partager Tweeter E-mail 5 astuces pour booster vos machines Linux VirtualBox

Vous en avez assez des mauvaises performances offertes par les machines virtuelles ? Voici ce que vous devez faire pour améliorer les performances de votre VirtualBox.

Lire la suite Rubriques connexes

Navigateurs
Développement web
Outils pour les webmasters
Mozilla Firefox
Google Chrome
Création de sites web

A propos de l'auteur Erez Zukerman(288 articles publiés) Plus de Erez Zukerman

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner