Comment corriger les petites contrariétés sur le web avec stylish [firefox et chrome]

Les concepteurs Web ont un travail presque impossible. Ils doivent venir avec un design qui plaît tout le monde. Quand on parle d`un service comme Gmail, utilisé par des millions de personnes partout dans le monde, vous pouvez vraiment laisser tomber la partie « presque » - il est tout simplement impossible. Même si une nouvelle conception est très apprécié par la plupart des gens, il y aura toujours des utilisateurs qui n`aiment vraiment pas le nouveau look.

Parfois, il y a assez de ces utilisateurs pour forcer une entreprise à revenir en arrière, comme Google a récemment fait avec les boutons d`icône Gmail. Mais s`il y a quelque chose que vous vraiment la haine, et la société ne change pas en arrière? Êtes-vous coincé avec elle pour toujours? Merci aux styles de l`utilisateur, vous pouvez fixer vous-même ces problèmes.

Présentation élégante

Élégant est une fois pour Firefox et Chrome add-on gratuit disponible, et il vous permet de faire quelque chose d`assez magique - appliquer vos propres styles à des éléments de page Web. Même si vous n`êtes pas un développeur web et vous ne l`avez jamais écrit un peu de CSS dans votre vie, ce qui est beaucoup plus facile qu`il n`y paraît. Vous pouvez utiliser élégant pour transformer des sites Web complètement (comme je vous montrerai dans la section suivante), mais plus important encore, vous pouvez utiliser élégant pour corriger les petites contrariétés en quelques minutes.

Par exemple, j`ai eu un problème avec la taille de la police par défaut dans Gmail. L`interface est très bien - je ne voulais pas zoomer (Ctrl +) avec mon navigateur, car cela augmenterait la taille de tous les éléments d`interface et être vraiment laid. Je voulais juste un moyen de faire un peu la police des messages plus.

Avec un design élégant, il était très simple, et je vais vous montrer comment. Mais avant de voir comment créer vos propres styles utilisateur, nous allons parler de tirer parti du travail d`autres personnes.

UserStyles.org

Si quelque chose devient sur vos nerfs, il est tout à fait possible que vous n`êtes pas seul. UserStyles.org est un site Web qui permet aux utilisateurs de partager des 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ées par MakeUseOf commentateur RandyN en réponse à notre histoire de la boutons icône Gmail. Ce style vous permet de garder les icônes, mais ajouter des étiquettes de texte - quelque chose Google ne vous laissera pas faire.

UserStyles.org est grande, mais il est pas parfait. Certains des modèles essaient de faire trop (changer l`apparence d`un site Web entièrement), et certains sont pour les anciennes versions de sites Web et sont maintenant cassés. Si vous essayez de réparer quelque chose de petit et ne peut pas trouver sur UserStyles.org, peut-être votre meilleur plan d`action est de le faire vous-même.

Créer votre propre style simple utilisateur

Video: [TUTO] Comment personnaliser son Mozilla firefox (complet)

Pour créer votre propre style utilisateur, vous devez d`abord savoir quel élément de la page que vous essayez de changer, et ce changement que vous voulez faire. Alors, pour commencer, faites un clic droit tout ce que vous voulez changer, et choisir Inspecter l`élément. Vous devriez voir quelque chose comme ceci:

Firefox obscurcit 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 groupe de classes CSS, avec un ID (la partie qui commence par #). Ceci est le sélecteur qui affecte le style de cet élément. Au bas de l`écran, il y a une barre de navigation qui vous permet de «traverse l`arbre DOM« , Ou des mots plus simples, monter et descendre dans la hiérarchie des éléments menant à l`élément que vous avez choisi.

Le nom du jeu est ici pour sélectionner l`élément que vous souhaitez le style et faire le choix pas si étroite qu`il n`affectera pas tout ce que vous voulez modifier, ni si vaste qu`il serait gâcher d`autres choses.

Je clique sur un élément supérieur, div.gs, juste parce que j`aime son nom (semble comme quelque chose qui ne changera pas trop tôt, mais c`est une estimation complète de ma part). Elle affecte l`ensemble de la zone de message. Une fois que la zone que vous souhaitez le style est sélectionné, cliquez sur le Style bouton dans le coin inférieur droit, pour ouvrir la Règles vitre:

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à, vous pouvez faire vos propres modifications temporaires et de voir leur impact sur la page en temps réel, sans la recharger. Mais que devez-vous changer? Clique le Propriétés bouton et décocher «Seuls les styles utilisateur« :

Ici vous pouvez voir la liste complète des tout règles CSS. Vous pouvez faire défiler la liste jusqu`à ce que vous trouviez une règle qui est logique pour ce dont vous avez besoin (taille de la police dans notre cas), et même cliquez sur le point d`interrogation à côté d`ouvrir une page d`explication. Alors, maintenant, nous savons que nous voulons modifier la propriété de taille de la police pour tous les éléments div qui ont une classe de «gs»(Écrit en abrégé div.gs).

La seule question qui reste est ce que nous voulons sa valeur soit. Pour cela, nous revenons à la sous-fenêtre Règles et commencer à jouer:

40 pixels peuvent être un peu fou, mais vous avez l`idée générale. Jouez avec cela, et ne hésitez pas à ajouter d`autres propriétés, jusqu`à ce que vous obtenez le look que vous alliez pour. Veillez à ne pas fermer la page, parce que vos changements ne pas sauvé partout.

Enregistrement de votre nouveau style

Une fois que vous avez cette partie du site à regarder comme vous le voulez, il est temps de l`enregistrer. Clique le Élégant icône dans la barre add-on, et sélectionnez «Ecrire un nouveau style». Élégant voudrait alors de savoir sur quelles pages il devrait 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 sur. De toute évidence, je pris un nom et quelques balises pour le style. Mais la vraie substance qui se passe dans le code: ligne 3 était déjà là - élégant, il a mis en place pour qu`il sache sur quelles pages le style applique. Mais la ligne 5-7 sont les miens. Nous allons les analyser:

Ligne 5: div.gs { - cette partie, vous devriez reconnaître. Ceci est l`élément que nous avons décidé de style. Les moyens de renfort d`ouverture, nous allons maintenant écrire des règles CSS.

Ligne 6: Font-size: 20px important- - c`est la règle que nous voulons changer (taille de la police), suivie par sa nouvelle définition (20 pixels), puis par une déclaration, ce qui signifie que Firefox obéirait cette règle même si un élément « plus » à « important! » texte tente 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 admirez 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 de garder ce tutoriel court dans les limites d`un seul poste, j`ai dû faire un certain nombre de sauts et des sauts. Si vous confus le long du chemin, s`il vous plaît accepter mes excuses. CSS est difficile au début, mais il est pas si compliqué une fois que vous obtenez le coup de lui - et la personnalisation de sites reste sur place l`une des meilleures façons d`apprendre.

Si vous confus par quoi que ce soit, s`il vous plaît me demander ci-dessous et je ferai de mon mieux pour vous aider.