CPC Light - Feuille de style Stylish (Beta 0.8.2 [26/06/2012])

[Skiant]

Salut les canards,

Il y a quelques temps, j'avais envie de rendre les forums CPC un peu plus clean au niveau visuel, histoire de mettre l'accent sur le texte des posts, et diminuer la quantité d'infos qui nous sont jetées à la tête. Je me suis donc attelé à la création d'une feuille de style Stylish pour modifier légèrement la skin par défaut du forum (mais en gardant les smileys lapins).
J'ai volontairement masqué des infos que j'ai estimé accessoire, vous pourrez en récupérer certaines au survol de la souris.

Maintenant, je voudrais en faire profiter des canards intéressés, mais comme le titre l'indique, c'est de la beta, ce qui veut dire qu'il y a encore probablement des vues que je n'ai pas encore touchées. La liste des forums est encore en chantiers, par exemple.
Il y a aussi certains problèmes connus qui ne sont pas encore résolus parce que je cherche encore une solution élégante pour les résoudre. Ce boulot étant jusque là majoritairement destiné à mon usage personnel (quelques cobayes ont bien voulu tester en avant-première), la progression est totalement aléatoire. Je peux parfois ne pas y toucher pendant deux mois, puis passer deux semaines à bosser dessus chaque soir.


[ - EDIT 14/06/2012 - Opera ajouté à la liste de navigateurs compatibles grâce au tuto par IrishCarBomb - ]

Aperçu







Installation

Google Chrome (ou Chromium)

1. Installez Stylish.
2. Dans ses options, créez une nouvelle règle appellée "CPC Light" ou "Youpie Banane".
3. Cliquez sur "Préciser" et mettez "URL commençant par - http://forum.canardpc.com"
4. Dans la grande zone de texte, entrez la ligne suivante:
   

   @import url('http://cpc.skiant.net/cpc_light.css');

5. Sauvez, rafraîchissez, vous devriez être parés.

Firefox

1. Installez Stylish.
2. En étant sur le forum CPC, cliquez sur l'icône Stylish dans la barre de status, créez une nouvelle règle pour 'forum.canardpc.com'.
3. Dans la grande zone de texte, effacez tout et entrez la ligne suivante:
   

   @import url('http://cpc.skiant.net/cpc_light_firefox.css');

4. Sauvez, rafraîchissez, vous devriez être bugés.

Opera

Pour Opera :

- Installez l'extension Include CSS.
- Mettez-vous sur la page principale du forum.
- Cliquez le bouton de l'extension fraichement installée.
- Cliquez sur Link Style.
- Donnez un nom à votre lien.
- Ajoutez l'url du CSS de Skiant : http://cpc.skiant.net/cpc_light.css
- Cliquez sur Add.
- Rechargez la page.
- Enjoyez.

Pour pouvez le désactiver/activer selon votre bon vouloir. Il suffit juste de cliquer sur le bouton de l'extension et de switcher la ligne du CSS précédemment ajouté sur ON/OFF.

edit : test concluant sur Opera 12 toubotouneuf.

Problèmes connus

• Pagination problématique pour les gros topics.

[Charmide]

J'ai commencé à l'utiliser sous Chrome, j'aime bien le style général épuré, bravo pour le boulot donc

Les deux trucs qui me dérangent le plus pour l'instant, pour faire mon devoir de betaeux (Larousse 2027).

• L'absence de bouton pour aller au premier post non lu.
• Sur l'écran de sous-forum, les titres se catégories se font tristement marcher dessus par les icônes suivantes.

[Skiant]

Je suis teubé. J'ai mis le lien vers l'ancienne localisation du script (misc.skiant.net) alors que je l'ai déménagé vers cpc.skiant.net.
J'ai corrigé le premier post, et je t'encourage à changer la règle Stylish afin d'importer la feuille de style du bon endroit.


Sinon, il y a une lumière en vue pour les utilisateurs de Firefox, le dev de Stylish ayant été assez aimable que pour répondre sans s’énerver à mon bug report hargneux en suggérant une solution de rechange pour l'auto-update. Je vous tiens au jus très vite.

[Charmide]

C'est déjà mieux

[Skiant]

Voilà, l'update salvateur pour les utilisateurs de Firefox : J'ai créé une copie de mon fichier, qui contient la règle de restriction pour le domaine. Autrement dit, vous pouvez désormais utiliser un @import et profiter des updates automatiques!

[alliocha]

pas mal! Un peu à l'étroit mais tu es déjà au courant

[Skiant]

pas mal! Un peu à l'étroit mais tu es déjà au courant

Le texte limité en largeur l'est à dessein, parce que l'oeil a du mal à récupérer le début de la nouvelle ligne si la précédente est trop longue. Les colonnes étroites permettent à l'oeil de scanner le texte plus vite et plus confortablement, c'est pour ça que les journaux, prévus pour être lus dans les transports, utilisent des colonnes si étroites.

Je voudrais, à terme, installer une sorte de "responsive design" limité. Limité, parce que je ne veux pas complètement transformer le forum, mais en tout cas permettre d'avoir une typo légèrement plus grande et plus d'espacement quand l'écran a de la marge.
Ça bénéficiera aussi aux portables où de grandes résolutions sont "coincées" dans des diagonales modestes.

[alliocha]

J'entends bien, mais c'est juste l'espace perdu avec le width fixe et margin auto qui me chagrine un peu

Sinon cacher les les boutons d'abo et les stats (messages/topics) sur les catégories du forum et ne les afficher qu'en hover ça serait sympa, histoire de virer des infos inutiles (de mon point de vu )

EDIT: OTAN pour moi, en regardant la 1ère capture j'ai vu que c'était le cas, mais ça ne fonctionne pas sur Firefox

[Skiant]

Bonne nouvelle pour les possesseurs d'écrans de bourgeois :
Désormais, si la fenêtre de votre navigateur dépasse 1400px de large, vous aurez droit à quelques modifications, qui incluent une colonne centrale plus large, et une taille de police légèrement augmentée sur les messages.
Je garde une largeur bloquée sur les messages néanmoins, toujours pour rendre le scan du texte plus rapide.

Pour les bugs de Firefox, il faudra encore que je me penche dessus correctement, mais j'vais résoudre ça.

[Teto]

Heu, sinon je tiens à dire que je n'utilise pas la feuille de style (la normale me convient très bien) mais que cela ne m'empêche pas de dire bravo pour l'initiative.

[IrishCarBomb]

Pour Opera :

- Installez l'extension Include CSS.
- Mettez-vous sur la page principale du forum.
- Cliquez le bouton de l'extension fraichement installée.
- Cliquez sur Link Style.
- Donnez un nom à votre lien.
- Ajoutez l'url du CSS de Skiant : http://cpc.skiant.net/cpc_light.css
- Cliquez sur Add.
- Rechargez la page.
- Enjoyez.

Pour pouvez le désactiver/activer selon votre bon vouloir. Il suffit juste de cliquer sur le bouton de l'extension et de switcher la ligne du CSS précédemment ajouté sur ON/OFF.

edit : test concluant sur Opera 12 toubotouneuf.

[Skiant]

Pour Opera :

- Installez l'extension Include CSS.
- Mettez-vous sur la page principale du forum.
- Cliquez le bouton de l'extension fraichement installée.
- Cliquez sur Link Style.
- Donnez un nom à votre lien.
- Ajoutez l'url du CSS de Skiant : http://cpc.skiant.net/cpc_light.css
- Cliquez sur Add.
- Rechargez la page.
- Enjoyez.

Pour pouvez le désactiver/activer selon votre bon vouloir. Il suffit juste de cliquer sur le bouton de l'extension et de switcher la ligne du CSS précédemment ajouté sur ON/OFF.

edit : test concluant sur Opera 12 toubotouneuf.

Yabon ça, merci pour l'info !
J'me permets de faire le citer ta méthode sur l'OP.

Maintenant 'va falloir que j'ajoute les préfixes -o- sur mes règles CSS3 expérimentales pour être sûr

[alliocha]

Tu as User CSS pour Safari aussi: http://code.grid.in.th

Et pour les préfixes Opéra, tu veux dire -webkit- non?

[Skiant]

Pas de troll entre browsers sur ce topic, tous les navigateurs naissent libres et égaux ici.
Sauf IE.

[IrishCarBomb]

Et Opera qui poukave les autres.

[Skiant]

Suffit, j'ai dit

[Skiant]

Micro MAJ en 0.8.1 pour ajouter le préfixe Opera aux règles CSS3 de transitions, et tenter de corriger quelques soucis sous Firefox (mais apparemment un système de cache interne à Stylish Firefox a l'air de retarder l'affichage de mes modifs, rage).

[olih]

Je vais tester ça.
Tu peux modifier les tailles des bouton/icone ou autre ?
J'avoue que j'adorerai que le bouton pour aller au dernier message non lu soit plus gros.

[Skiant]

Pas con, j'galère un peu aussi avec ces boutons.
Ce qui est sûr, c'est que je peux augmenter la surface réactive, même si le visuel du bouton restera tout petit, ce qui voudra dire une plus grande tolérance au clicks "à côté".

[olih]

Pas con, j'galère un peu aussi avec ces boutons.
Ce qui est sûr, c'est que je peux augmenter la surface réactive, même si le visuel du bouton restera tout petit, ce qui voudra dire une plus grande tolérance au clicks "à côté".

Peut être changer directement l'image ?

---------- Post added at 13h58 ---------- Previous post was at 13h50 ----------

En fait j'ai du mal avec la "pastellisation" des couleurs. Je trouve qu'on voit moins bien la séparation entre les messages.
Ça ne me gène pas sur le "modifier/répondre /répondre avec modif/citer" mais plus sur le nom du posteur qui est une information importante, et la barre contenant la date (et le numéro du message mais ça c'est pas grave).
Remarque je ne sais pas pour toi mais l'avatar me permet de souvent de savoir qui a écrit avant même de voir le nom.

[Skiant]

Peut être changer directement l'image ?

Cela voudrait dire charger d'autres images que celle du site, ce qui n'est pas vraiment une option à mon avis, et contraire à ce que je cherche à faire.
Augmenter la zone réactive sera tout aussi efficace.

En fait j'ai du mal avec la "pastellisation" des couleurs. Je trouve qu'on voit moins bien la séparation entre les messages.
Ça ne me gène pas sur le "modifier/répondre /répondre avec modif/citer" mais plus sur le nom du posteur qui est une information importante, et la barre contenant la date (et le numéro du message mais ça c'est pas grave).
Remarque je ne sais pas pour toi mais l'avatar me permet de souvent de savoir qui a écrit avant même de voir le nom.

J'ai fait des choix délibérés quand j'ai commencé à bosser sur cette feuille de style, et mon point de départ est de mettre en avant les messages.
C'est pour ça que les avatars et les boutons associés à chaque message sont transparents (opacité 30%). Ils passent totalement opaques au survol de la souris pour reprendre de la force visuelle lorsque tu souhaites réellement t'en servir.
La couleur du nom de l'auteur n'a pas changé, par contre, mais j'ai atténué les contrastes entre d'autres éléments, ce qui donne globalement une impression d'avoir un site moins flashy.

Pour la barre de séparation entre les messages, je trouve qu'elle contraste assez bien comme ça. Moins que l'originale, mais assez.
Par contre, tu viens de me faire remarquer que le nom de l'auteur est vraiment collé à la barre de séparation des messages, et ça c'est pas bien. Je corrigerai en même temps que la zone réactive du bouton "dernier message non lu".

[Frypolar]

Au début j’étais vraiment dubitatif, je voyais pas l’intérêt. Après avoir essayé l’intérêt est tout trouvé, ça bute. Merci bien. Il y a juste un soucis si on veut réduire en largeur la fenêtre pour l’adapter à la largeur de la zone utile, ça compresse le tout et réduit encore la largeur. Et on ne voit plus l’icône des topics lockés ou dans lesquels on a posté mais c’est du détail. Ah et le petit liseré vertical de couleur pour les forums c’est parfait.

[Yuccaman]

Il y a juste un soucis si on veut réduire en largeur la fenêtre pour l’adapter à la largeur de la zone utile, ça compresse le tout et réduit encore la largeur.

Ça fonctionne très bien avec Opera mais la largeur reste fixe et si on réduit en deçà de la largeur définie ca masque une partie.

[Frypolar]

En fait ça se voit surtout sur la liste des topics, le nom du dernier participant et le lien du dernier post passent sous le nombre de réponses/vues au lieu d’être à côté et ça augmente la hauteur de chaque topic. Mais c’est un détail.

[Skiant]

En fait ça se voit surtout sur la liste des topics, le nom du dernier participant et le lien du dernier post passent sous le nombre de réponses/vues au lieu d’être à côté et ça augmente la hauteur de chaque topic. Mais c’est un détail.

Firefox?

C'est possible que mes règles de largeur ne soient pas totalement respectées, l'ordre de chargement des CSS est différent dans Firefox par rapport à Chrome (et apparemment Opera vu que les Opera Users n'ont pas l'air de rencontrer de soucis).

D'ailleurs, quand vous indiquez un souci avec ma feuille de style, pensez à mentionner votre browser, que je puisse éventuellement vous rire au nez avant de chercher d'où vient l'erreur.

---------- Post added at 22h46 ---------- Previous post was at 22h24 ----------

Micro-update en 0.8.2 pour augmenter la surface réactive du bouton "aller au dernier post non lu" () et aussi l'espacement du pseudal par rapport à la barre d'intro du post.

---------- Post added at 22h48 ---------- Previous post was at 22h46 ----------

Ça fonctionne très bien avec Opera mais la largeur reste fixe et si on réduit en deçà de la largeur définie ca masque une partie.

J'ai déjà tenté de faire quelques systèmes chelous pour adapter le forum aux petites résolutions aussi, mais j'ai encore rien eu de concluant.
Promis, j'y travaille.

[Frypolar]

Alors je suis sous Opera 12 et j’ai fait deux petits screens :


Réduction de la largeur de la fenêtre :



Mais c’est pas grave, c’était juste pour pouvoir afficher le forum et un truc style Mumble à côté comme je suis un salaud de pauvre sans double écran.

[Skiant]

Ah mais t'es pas sur la skin CPC Dark, ceci explique cela.
Les règles sont peut-être différentes entre les deux, ce qui rend mon code non-opérationnel.

[Frypolar]

C’est ça, je viens de changer et je n’ai plus ce soucis.

[Skiant]

Pour info à ceux qui auraient ma feuille de style activée, le layout pour les écrans > 1200 pixels est actuellement "cassé" à cause de la pub qui habille le forum en ce moment.
J'ai fait une investigation rapide et je n'ai pas trouvé de solution pour le problème.

Je vous tiens au courant.

[Skiant]

Up !

Suite à un changement d'hébergement, le sous-domaine cpc.skiant.net est temporairement désactivé. J'ai lancé la procédure pour le réactiver, elle peut prendre jusqu'à 24h.
En attendant, vous pouvez changer l'url en remplaçant "cpc.skiant.net/" par "skiant.net/cpc/".

Désolé pour la gêne occasionnée !