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;} } |
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.
Au détour du recherche sur le CSS, voilà que je tombe sur cet article qui m’a bien fait rire. Pas l’article en lui même mais surtout les commentaires.
Le lapsus sur la “pince anglaise” n’aide en rien à garder son sérieux.
Je me mets à la place de l’auteur qui doit “fumer du crâne”. En effet, la conclusion frappante des commentaires à cet article qui, je le rappelle, avait pour objet de montrer comment changer le design d’un site qui peut être intéressant par son contenu mais dont le contenant est un affront à la beauté (ce qui reste une affaire de goût). La conclusion est qu’il existe une myriade de plugins qui permettent la personnalisation graphique d’un site d’un tiers.
Pour répondre à kontre concernant l’activation ou désactivation d’une feuille de style. Je ne sais pas trop pour les autres navigateurs, même si j’imagine que la méthode ne doit pas être très différente, sur Firefox il faut activer les outils webmestres (appuie sur la touceh F12) puis choisir l’onglet Editeur de styles. La suite je vous fait confiance, vous trouverez.
En tout cas bon article et bonne continuation !