Changez le graphisme de vos sites préférés

Aujourd'hui, je vous propose de repeindre le web avec les couleurs de votre imagination. Vous avez vos petites habitudes, sur des sites que vous visitez quotidiennement, vous ne faîtes d'ailleurs peut-être plus attention à leur design, ou vous voudriez bien que tel ou tel site change son site suranné.

J'ai ce qu'il vous faut ! Grâce à l'extension Stylish pour Firefox, Chrome / chromium, Opera, et sûrement pour Safari et Internet explorer (même si utiliser Internet Explorer nuit gravement à Internet :) ).

Concrètement, ça sert à quoi ?

A avoir un site plus à votre goût. Changer les couleurs, l'agencement, les polices de vos sites favoris. Si ça vous tente d'avoir un nouveau Google, un nouveau Facebook ou même un nouveau Firefox, voici deux méthodes : la méthode simple et la méthode pour utilisateurs avancées (c'est-à-dire, pour ceux qui connaissent le CSS).

La méthode simple

Trouver des thèmes et les installer

Tout d'abord, téléchargez l'extension en fonction de votre navigateur (ce sera plus pratique). Ensuite, rendez vous sur userstyles.org pour trouver les templates à votre goût. Il en existe pour Google, Facebook, Diaspora* et même Firefox.

Une fois votre bonheur trouvé, cliquez sur le bouton Install with stylish :

Userscript
download

A partir de là, une fenêtre s'ouvre :

Userscript template
google

Vous avez la possibilité entre :

Une fois le nouveau style installé, vous n'avez plus qu'à aller sur la page concernée (ici Google).

Gérer les thèmes

Vous voilà avec un thème qui vous convient. Mais si vous souhaitez en changer, vous devez gérer les thèmes. Pour cela, 2 possibilités :

Attention de désactiver le thème que vous ne voulez plus, sinon, ils se superposeront (ça peut donner un style sympa quand même ceci-dit) ### Méthode pour utilisateurs avancés {#expert} Si vous maîtrisez le CSS, créez votre thème. Pour cela : - allez sur le site que vous voulez *customiser* - faîtes **ctrl + /** pour activer la *Toolbar* - **Créer un nouveau style** A partir de là, encore 3 choix : - **Pour cette url** : modifier le design seulement pour la page visitée. Si, par exemple, vous allez sur Google.fr et que vous cochez cette option, **seule** cette page sera modifiée. La page de résultats ne le sera pas - **Pour [*le nom du domaine*]** : toutes les pages du domaine seront modifiées - **Style vierge** : vous devez écrire le script en entier Une petite précision s'impose pour l'option n°3 : lorsque vous passez par une des deux premières étapes, **UserStyles** se charge de créer automatiquement les paramètres. Pour l'étape 3, **vous** devez les créer. Si je veux créer un style pour [Ubster](http://sanspseudofix.fr/ubster-de-la-musique-en-ligne/ "Ubster : de la musique en ligne"), en passant par l'option 2, le fichier ressemblera à ça : @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("www.ubster.com") { } Je n'aurais plus qu'à créer ma feuille de style à l'intérieur : @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("www.ubster.com") { body{ background : #333 !important; } } .attention **Note** : NE PAS oublier de rajouter '**!important**' à chaque ligne pour que les modifications soient effectives. J'ai dû décortiquer un script téléchargé pour le comprendre... :) .attention ### Bonus Je me suis amusé à refaire le design de [Diaspora\*](https://joindiaspora.com/ "Diaspora*, le réseau social décentralisé") : @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("diasp.eu"){ body{ background: #333 !important; /*28616A */ } @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; src: local('Lobster'), url(https://themes.googleusercontent.com/static/fonts/lobster/v5/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff'); } /***************************************************************************************** * * Header * *******************************************************************************************/ header{ background-image: none !important; background-color: #404039 !important; /* #e9e4ca */ font-family: Lobster !important; } .diaspora_header_logo{ display: none !important; } #user_menu .avatar{ border-radius: 11px !important; } #global_search form input{ background-color: #C5C5C5 !important; box-shadow: 0 0 0px #CCCCCC !important; border-radius: 3px 0px 0px 3px !important; } /***************************************************************************************** * * Corps * *******************************************************************************************/ .span-24{ width: 100% !important; } .container{ width: 100% !important; } /***************************************************************************************** * * Navigation (gauche) * *******************************************************************************************/ .span-5{ width: 16% !important; } #home_user_badge img{ height: 50px !important; width: 50px !important; position: relative !important; background: #fff !important; padding: 4px !important; border-radius: 25px !important; box-shadow: 0px 5px 5px #000 !important; } #home_user_badge h4{ font-size: 30px !important; font-family: Lobster !important; } #home_user_badge h4{ color: #eee !important; } ul.left_nav a.aspect_selector:hover:before, ul.left_nav a.home_selector:hover:before, ul.left_nav a.tag_selector:hover:before, ul.left_nav a.element_selector:hover:before{ content: url('http://diasp.eu/assets/favicon-a15200a371573542232c9546210c4e69.png') !important; position: relative !important; margin-left: 5px !important; margin-right: 5px !important; } .section .left_nav ul.sub_nav a.aspect_selector, .section .left_nav ul.sub_nav a.tag_selector{ color: #fff !important; } ul.left_nav a.aspect_selector:hover:before, ul.left_nav a.home_selector:hover:before, ul.left_nav a.tag_selector:hover:before, ul.left_nav a.element_selector:hover:before{ color: #333 !important; } /***************************************************************************************** * * Contenu Principal (milieu) * *******************************************************************************************/ .span-13{ width: 60% !important; } .question_mark img, .block_user img, .hide_post img{ background: #fff !important; border-radius: 4px !important; padding: 1px !important; border: 1px solid #000 !important; } #author_info h2{ color: #fff !important; font-family: Lobster !important; } .media .img img{ border-radius: 50px !important; } .stream_element .collapsible .expander{ background-color: #404040 !important; background-image: none !important; font-size: 20px !important; text-shadow: none !important; line-height: 34px !important; font-family: Lobster !important; color: #eee !important; } .stream_container{ border-left: 1px solid #505050 !important; } .comment.media{ background-color: #fff !important; border-bottom: none !important; box-shadow: 1px 1px 1px #000 !important; color: #333 !important; } .comment{ border-bottom: none !important; } .stream_element .collapsible p{ color: #ccc !important; } .collapsible.comment-content > p{ color: #000 !important; } .likes img{ background: none !important; padding: 0 !important; } .avatar.small{ padding: 4px !important; background: #fff !important; box-shadow: 1px 1px 1px #000 !important; } .stream_container h3, .post-content h3, .post-content h2, .post-content h1{ color: #eee !important; font-family: Lobster !important; } p{ color: #fff !important; /* d4cb94 */ } .diaspora_handle{ color: #ccc !important; } #profile ul#profile_information > li{ color: #fff !important; } /***************************************************************************************** * * Colonne droite * *******************************************************************************************/ #selected_aspect_contacts .avatar{ border-radius: 20px !important; } .rightBar .title h5{ color: #fff !important; margin-left: 3px !important; } .title img{ background: #fff !important; border-radius: 4px !important; padding: 1px !important; border: 1px solid #000 !important; } #back-to-top{ font-size: 35px !important; border-radius: 50px !important; background-color: #fff !important; color: #333 !important; } /***************************************************************************************** * * Single post * *******************************************************************************************/ article.newspaper header{ color: #fff !important; } } Ce script est pour [diasp.eu](https://diasp.eu), à vous de l'adapter à votre pod. ### Exemple Avant : [![Diaspora avant UserStyles](https://sanspseudofix.fr/images/posts/2013/03/diasp_avant-300x142.png)](https://sanspseudofix.fr/images/posts/2013/03/diasp_avant.png) Après : [![Diaspora après UserStyles](https://sanspseudofix.fr/images/posts/2013/03/diasp_apres-300x142.png)](https://sanspseudofix.fr/images/posts/2013/03/diasp_apres.png) diaspora*


Retour maison