Style CSS du blog pour les créatures nocturnes
Ceci est un post invité de cactus posté sous licence creative common 3.0 unported.
Comme tout bon codeur, je travaille la nuit ou alors la journée mais seulement avec les volets fermés.
Et si y’a bien un défaut avec ce blog, c’est qu’il arrache la rétine à la pince anglaise !
Du coup, de mes petits doigts agiles et gracieux je me suis bricolé un petit CSS maison pour ne plus pleurer chaque fois que j’ai besoin de relire un des articles, en rendant le site ténébreux plus qu’un gothique un soir sans lune !
Comme vous pouvez le constater, la différence est flagrante :
S&M : comparaison entre sans et avec thème
Pour l’appliquer, j’utilise l’extension Stylish de mon navigateur (l’addon est disponible pour tous les navigateurs populaires).
Voici donc le style :
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("sametmax.com") { body { background: none !important; background-color: black !important; color: white !important; } code, pre, blockquote { background-color : #101010 !important; color : white !important; } #slogan { color: white !important; } a { color: grey !important; } #header ul li { color: white !important; background-color: #101010 !important; } ul.nav li:hover a { background-color: #202020 !important; } #header ul { background-color: black !important; } * { text-shadow: none !important; } }
Pour pousser un peu plus loin il y a le problème de la coloration syntaxique. En effet, le style est codé directement dans les balises html, qui ne sont pas modifiées par le CSS, et la coloration syntaxique foire parfois. Du coup pour ceux qui veulent se montrer tatillons, il faut utiliser un petit script (à intégrer par exemple à GreaseMonkey) pour modifier la coloration syntaxique.
Voilà le script :
// ==UserScript== // @name Sam&Max - Litlle Color Fix // @namespace sametmax.com // @description Fix a color bug for code coloring on sametmax.com with Stylish "Darker" theme // @include http://sametmax.com/* // @version 1 var spans = document.getElementsByTagName("span"); console.info(spans.length + " spans trouvés by GreaseMonkey/Sam&Max - Little Color Fix"); var white = 0; for (var i=0; i < spans.length; i++) { if (spans[i].style.color == "black" || spans[i].style.color == "#000000" || spans[i].style.color == "rgb(0, 0, 0)") { spans[i].style.color = "white"; white++; } if (spans[i].style.color == "#000000") { spans[i].style.color = "blue"; } } console.info(white + " spans colorisés by GreaseMonkey/Sam&Max - Little Color Fix"); // ==/UserScript==
Enfin, pour ceux qui se plaignent qu’il y ait du cul dans les articles de SM, un petit Stylish pour enlever les images :
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("sametmax.com") { .wp-caption, .wp-post-image {visibility: hidden !important;} }
Articles similaires:
- Téléchargez le blog en entier pour le lire hors ligne
- Template de demande d’aide en informatique
- Quelques changements sur le blog
- Changement du cache du blog
- Le blog rejoint le planet Python FR
On adooooore les bitcoins :
Qu’est ce qu’une pince anglaise ? Je connais la clé, la crème, les petites… mais pas la pince.
Sinon, il y a poche. Un excellent soft : http://www.inthepoche.com/
Au moins, tu modifies le thème une bonne fois pour toute.
Hé comment pourquoi chez lui il sort sur fond blanc, et chez moi sur fond azuré ?
Qui d’ailleurs est très bien…
@François : ce sont des pinces qui conduisent à gauche.
@roro: Chez moi aussi le fond n’est pas blanc, j’ai encore mes rétines. Et j’utilise redshift (sous Linux) ou flux (sous Windows) de toutes manières.
À une époque il y avait un menu dans les navigateurs où on pouvait choisir la feuille CSS active du site en cours. Ça existe toujours ce truc, je ne le retrouve plus ?
* fier *
@kontre: Redshift ne suffit pas face à l’éclatante clarté de la prose de Sam&Max à trois heure du mat’ …
Et cette feature existe toujours, mais WordPress ne semble pas l’intégrer du coup on se retrouve à devoir bidouiller de notre côté.
Salut S&M,
je vais jouer a mario en attendant que ce soit fixé:
quand je saute avec la touche haut, la page scroll … .
Y a moyen de faire en sorte que je puisse gamer correctement avec un script on focus , par ce que là c’est plus possible.
fanboy a devs.
PS : j’ai cherché une seconde, et pour tout vrai acharné noctambule, un truc qui pique aux yeux comme ça devrait suffire http://korn19.ch/coding/css-negative.php :)
@utopman: j’ai pas trouvé. En même tant j’ai pas trop cherché. C’est plus un easter egg qu’un vrai jeu.