# Canard PC & Canardpc.com > Canard PC - Le site web >  Améliorer la lisibilité du forum (avec un plugin Stylus)

## FUTOMAKI

_Manuel_ _"¿qué?"_
Tout cela fonctionne grâce au *plugin Stylus*

Une fois installé il vous suffit d'appliquer le style concocté par mes soins:

*Télécharger le style : Canard PC Forum - lisibilité enhanced*

_Notes_
Ce plugin est en éternel construction, prenez ce plugin comme une bêta ouverte.
Aussi j’essaie de faire au mieux avec mes compétences CSS, ce n'est pas mon cœur de métier mais je me débrouille avec ce que je sais.
Dans tous les cas, n'hésitez pas à partager vos avis/remarques/suggestions.

J'espère que ça vous plaira !

---

_Préambule_
Cela fait bientôt 8 ans (!) que je suis inscrit sur le forum CPC et c'est avec plaisir que je participe à toutes les conversations passionnées qui s'y passe.  ::wub:: 
Seulement voila, depuis un petit moment déjà mon petit œil d'ergonome web ne peut s'empêcher de tirer une larme devant la rusticité du forum.  ::cry:: 
C'est pourquoi j'ai relevé mes manches pour réaliser un petite maj de style qui se concentre sur l'amélioration de la lisibilité et d'une structure plus flexibles pour diverses résolution d'affichage de la page web.
Le tout sans nuire à l'ensemble des fonctionnalités existantes, évidemment.  ::): 

_ Au menu_
Lisibilité
changement de typographie (Open sans)ajustement du letter-spacing, line-heightajustement de la longueur de ligneajustement des couleurs foreground/backgroundajustement de l'affichage des signaturesajustement de l'affichage des options de post

Structure
optimisation d'affichage pour desktop full screen/half screenajustement des margin/paddingréduction de la distance entre les éléments de navigations les plus courants (paginations, btn divers)

_Aperçus_






journal des maj :
22/11/18 | Opération "nettoyage de novembre"
Une grosse MAJ qui met l'accent sur la renovation du style existant.

• revue du style de base de fond en comble pour une meilleure compatibilité avec les thèmes custom (c'est pour toi coin-coin)
• amélioration du style de la suprabar, du header, des contrôles utilisateurs, du fil d'Ariane de la liste de discussions et des résultats de recherche.
• ré-introduction des actions de discussions
• amélioration de la disposition de la pagination et des actions de discussions
• corrections mineures diverses et variées 

15/11/2018
• Correction de l'architecture de la feuille de style pour une meilleure compatibilité avec Firefox

14/11/2018
• "Pagination left was a mistake" La pagination retourne à sa position initiale
• Ajustements mineurs au header de résultats de recherche, header de topic, header de quoi de neuf

10/08/2017
• Thème plus compact qu'auparavant
• Ajustements de couleurs pour contrer la fatigue occulaire

24/05/2017 (tout vient à point) :
Barre de recherche => la barre de recherche s'affiche désormais normalement
Quoi de neuf ? => ajustmement pour affichage plus compact
Topics => ajustement pour affiche plus compact

26/03/2016 :
- modification : toplinks => background: none;

11/06/2015 :
- modification : body width: 80%; => body width: 90%;

----------


## Anonyme210226

J'aime beaucoup l'initiative, mais comme je navigue sur un portable (1366*768), la feuille de style aère un peu trop les posts et les rend moins lisibles. Est-ce vraiment nécessaire de conserver des marges à droite et à gauche ?

----------


## FUTOMAKI

_"Quelque part dans dans le radar de Southcross ...

"BIP, BIP, BIP !"

- Bon sang les mecs reveillez-vous !
- Quoi, qu'est-ce qui y'a Roger ?
- Y'a un retour sur le topic qu'on a posté !
- Tu veux dire qu'il a des gens que ça intéresse ?
- Ben... C'est vrai qu'on avait un peu perdu espoir, mais je vous l'avais dit rien n'est jamais perdu !
- Dingue."_

Alors Pancho primo, merci. C'est cool d'avoir un retour sur le boulot.  :;): 


Je vois quel est ton problème avec les marges. J'ai pris 3 screens pour comparer :
http://imgur.com/a/qrMZh#0


J'ai rajouté les marges pour réduire la longueur de lignes des posts.
Je m'explique, ça peut paraitre contre intuitif mais l’œil humain s'oriente plus facilement sur un bloc de texte dont la longueur n'excède pas environ 10 mots par ligne (il suffit de prendre un roman pour s'en rendre compte dans la majorité des cas). Nos yeux ont moins de chemin à parcourir ce qui réduit la fatigue visuelle. Aussi sur écran la fatigue de lecture est plus forte que sur papier à cause du balayage et de la luminosité.
Du coup sur un forum, avec une densité de contenu aussi forte il me semble important d'alléger la charge pour l’œil.

Alors tu contredira tout de suite en disant "ouais mais comme t'as fait la, je compte 20 mots par ligne, tu serais pas en train de bullshit tes principes par hasard ?"

C'est vrai, mais j'allais pas réduire le corps du site à 50% de la largeur totale de l'écran (comme sur le 4ème screen) ça devenait ridicule.

Du coup c'est pas tant le problème de lisibilité qui m'embête maintenant. C'est la hauteur des pages par rapport au style original qui me perturbe.  :tired: 

Je vais réduire les marges de 10%, tu devrais trouver ton bonheur.
https://userstyles.org/styles/114558...bilit-enhanced

Note : Perso j'utilise un écran en 1920*1080 et je cale toujours ma fenêtre sur une moitié de l'écran ce qui revient à utiliser le site sur du 910*1080

----------


## Apache

Yop !
J'utilise ton travail depuis 1 semaine (j'avais cliqué sur ta signature par curiosité depuis le topic Dirt Rally) et à titre perso je trouve ça vraiment très agréable à l'usage.
Dans l'ensemble ça donne un petit coup de frais et mes yeux lisent plus facilement cette police de caractère. Après c'est une affaire de goût mais je vais rester sur cette mise en forme.

J'utilise un écran secondaire (sauvé in extremis de la poubelle en changeant 3 condensateurs)  en portrait 1024 x 1280 qui me sert à lire de manière générale. Le body width à 90% est plus agréable, il pourrait même être à 100% mais c'est un cas particulier et sur mon écran principal 1920 x 1080 je préférais le 80%  ::P: 

Une petite capture de mon écran portrait :


Merci à toi.

----------


## Anonyme210226

Effectivement, avec le corps de texte plus large, c'est plus lisible sur mon écran de portable. Je suis tout à fait d'accord avec le fait qu'un texte doit être relativement étroit, le problème étant qu'avec des écrans aux caractéristique si différente, on aura un résultat satisfaisant sur l'un mais pas sur l'autre. Surtout que dans mon cas, la barre d'outils de Windows rogne encore la largeur de l'écran : elle est à droite, mais c'est très pratique pour le taf.
Une autre amélioration possible serait de diminuer la marge en bas de signature. Le texte est un poil trop aéré entre chaque post.

----------


## Anonyme210226

Petit souci : les élements des menus "Communauté", "Actions", etc dans le menu du haut sont quasiment illisibles ,la couleur de police est quasiment identique à celle du fond.

----------


## FUTOMAKI

Merci pour les retours. C'est moi qui suis plus très réactif. Je vais me pencher sur les problèmes et peut-être proposer différentes versions pour les marges. J'espère satisfaire plus de monde comme ça.

----------


## ATP

Comme beaucoup, j'ai découvert ton travail au travers de ta signature sur je ne sais quel topic. Je viens de l'installer et effectivement, le forum CPC est bien plus agréable à lire avec tes modifications.

Un grand merci, et bonne continuation.

----------


## Sodium

Je préfère l'actuel, mais bon, j'ai une allergie mortelle au flat design  :B):

----------


## FUTOMAKI

Up from the dead.
Oui, ce plugin n'est pas mort.




> Comme beaucoup, j'ai découvert ton travail au travers de ta signature sur je ne sais quel topic. Je viens de l'installer et effectivement, le forum CPC est bien plus agréable à lire avec tes modifications.
> 
> Un grand merci, et bonne continuation.


Merci, Dr00py, j'ai changé un micro truc du menu qui me faisait tiquer.

----------


## Sahnvour

Merci pour ton travail  :;): 
Est-ce que tu envisagerais un équivalent en dark, histoire qu'on puisse naviguer sur le forum passé 23h sans s'exploser les yeux ?  :B):

----------


## Elidjah

Merci beaucoup pour ce boulot, c'est vraiment extra sur ma tablette  sous Firefox.

----------


## Frypolar

> Merci pour ton travail 
> Est-ce que tu envisagerais un équivalent en dark, histoire qu'on puisse naviguer sur le forum passé 23h sans s'exploser les yeux ?


https://userstyles.org/styles/47391/...ng-alternative

Tu peux activer deux feuilles de style en même temps  :;):  J’utilise celle de Skiant et parfois _Midnight Surfing Alternative_, ça fonctionne très bien.

----------


## Sahnvour

Pas mal, j'avais pas de style général qui fonctionne à peu près partout ... Mais un spécifique sera toujours mieux  ::P:

----------


## FUTOMAKI

> Merci pour ton travail 
> Est-ce que tu envisagerais un équivalent en dark, histoire qu'on puisse naviguer sur le forum passé 23h sans s'exploser les yeux ?


Je vais avoir un peu de temps libre pour essayer une version #222222*TRUEDARK4NERD*
Je vous préviens quand ce sera dispo.

----------


## FUTOMAKI

Détérrage !
Pour quelques ajustements :

Barre de recherche => la barre de recherche s'affiche désormais normalement
Quoi de neuf ? => ajustmement pour affichage plus compact
Topics => ajustement pour affiche plus compact

Suite au Kickstarter réussi de Canard PC Je m'interroge sur l'intêret de continuer à mettre à jour mon thème stylish. En effet, il est prévu une refonte du forum (pour mobile) et j'imagine que les fondations du forum vont totalement changer et rendre mon petit mod stylish caduc.



Si quelqu'un à des infos la dessus…
Sinon je vais mener ma petite enquête.

----------


## FUTOMAKI

Nouvelle MAJ:

10/08/2017
• Thème plus compact qu'auparavant (mais toujours utilisable sur tablette)
• Ajustements de couleurs pour contrer la fatigue occulaire

----------


## Tankodesantniki

Qui a cassé le forum CPC?  :tired:

----------


## Tankodesantniki

Ah, c'est revenu! J'ai du cliquer su un truc, d'un coup j’avais tout en bleu avec le logo VBulletin en haut à gauche! En regardant mon profil, j'ai cliqué "style classique" et tout est re-bien. ^^ Pardon du HS ^^

----------


## tenshu

> Suite au Kickstarter réussi de Canard PC Je m'interroge sur l'intêret de continuer à mettre à jour mon thème stylish. En effet, il est prévu une refonte du forum (pour mobile) et j'imagine que les fondations du forum vont totalement changer et rendre mon petit mod stylish caduc.


Naif  :^_^: 

C'est une promesse vieille comme le forum !
Et tu sais que les promesses de campagne de kickstarter...

----------


## FUTOMAKI

Ca veux dire que tu veux une udpate, c'est ça ?  ::trollface::

----------


## Rouxbarbe

Je viens d'installer le plugin,  ::o:  le fofo fait tout léger dis donc, tout doux  ::wub:: 

Par contre l'emplacement des boutons à gauche me perturbe, faudra que je m'habitue...

----------


## Vroum

Stylish a l'air de plus être très net, il va falloir trouver une alternative.
https://robertheaton.com/2018/07/02/...ernet-history/
https://bugzilla.mozilla.org/show_bug.cgi?id=1472948
Edit : Stylus semble faire le même boulot.

----------


## FUTOMAKI

OOOOooaaaaaaaooohhhhh
Chier.
Bon ben migration imminente ! :D

----------


## Frypolar

Ça fait un moment en fait, au moins depuis les gros changements niveau extension dans Firefox. Normalement t’as rien à migrer, Stylus est un fork de Stylish avant qu’il ne soit repris par des personnes mal intentionnées. Par contre tu peux changer le titre du topic  :;):

----------


## DespendoFR

Et merde ! Je viens de tomber sur la news également. Fait chier, je m'y étais habitué.

----------


## FUTOMAKI

Okay, le thème CPC fonctionne toujours très bien avec le plugin Stylus installé à la place de Stylish.
Voila, vous pouvez toujours profiter d'un forum un peu plus reposant pour les yeux.  ::):

----------


## BaDy

Quand je rentre je vais tester ça !

----------


## Coin-coin le Canapin

Chalut !
Beau boulot  ::): 

Quelques trucs me chagrinaient alors j'ai fait des modif, libre à toi de les inclure :

La police Open Sans, chez moi, apparaît floue. J'ai remplacé par Roboto qui semble déjà chargée par le site et qui s'affiche mieux :


Et pour le reste des modifs, en vrac :
J'ai compacté la zone au dessus de la liste des sujets, avec le bouton de création de sujet, le titre du forum, la pagination et la barre d'outils, afin que ça prenne moins de place en hauteur.
J'ai amélioré l'affichage des cellules "Réponses / Affichages" et "Dernier message par".
J'ai réaligné les infos sous les titres des sujets (pagination, auteur, date, icône de pièce jointe) et j'ai remis la pagination sur la droite.

Avant


Après


Si jamais tu veux ajouter tout ou partie :


```
* {
    font-family: "Roboto", sans-serif !important;
}
.body_wrapper {
	display: flex;
	flex-wrap: wrap;
}
.body_wrapper > * {
	width: 100%;
}
#pagetitle {
    order: -1;
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
}
#pagetitle .description {
    margin-left: 10px;
}
.author {
	display: flex;
	align-items: center;
	margin-top: 4px;
}
.threadbit .pagination {
	margin-top: 0;
	margin-left: 5px !important;
}
.threadbit .sticky, .threadbit .nonsticky {
	display: flex;
	align-items: stretch;
}
.threadbit .threadstats {
    background: white;
}
.threadbit .threadstats, .threadbit .threadlastpost {
	font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-evenly;
    padding-left: 10px;
}
.threadbit .threadlastpost {
	flex: 1;
	height: auto;
	padding: 0 10px;
}
.threadbit .threaddetails {
	margin-left: 5px;
}
#breadcrumb {
	order: -2;
}
.pagination_bottom {
	margin-top: 0 !important;
}
.below_postlist .pagination_bottom .pagination {
	margin-bottom: 0;
}
#below_postlist {
	margin-bottom: 10px;
}
.above_threadlist {
	height: auto;
    width: auto;
    display: flex;
    align-items: center;
}
.above_threadlist .newcontent_textcontrol {
	position: static;
}
#newthreadlink_top {
	position: static;
}
.above_threadlist .threadpagenav {
    display: flex;
    width: auto !important;
    margin-left: 10px;
    position: static;
    margin-top: 0 !important;
}
.toolsmenu {
	margin-left: auto;
    margin-top: 10px;
}
@media (min-width: 1300px) {
	.toolsmenu {
		width: auto;
	}
} 
/*#footer, .vbform, #navbar, #qr_defaultcontainer {
    width: 100%;
}*/
#newreplylink_top, #newreplylink_bottom {
	display: inline;
	white-space: nowrap;
	margin-top: 0;
	position: static;
}
#above_postlist, #below_postlist {
	height: auto;
    width: auto;
	margin-top: 5px;	
    align-items: center;
    display: flex;
}
.pagination_top {
	margin-top: 0 !important;
}
.pagination_top .pagination {
	top: 0;
	margin-left: 5px !important;
}
/* top bar */
#blackband {
	height: auto;
}
#blackband_subdiv {
	height: auto;
}
#blackband_subdiv a, .barre_verticalus {
	margin-top: 0;
	padding: 5px 0;
}
/* header menu submenu color */
#navtabs .popupmenu ul, #navtabs .popupmenu ul li a {
	background: #333;
}
/* compact header */
.above_body {
	display: flex;
    align-items: stretch;
    padding-top: 0;
}
.above_body .navbar {
	height: auto;
    flex: 1;
    margin-top: 0;
}
.above_body .navtabs > li > ul {
	height: calc(100% - 26px);
    display: flex;
    align-items: center;
}
.above_body .navbar_advanced_search > li {
	top: 13px;
    position: relative;
}
```

Et du code pour rendre le header compact :
Avant/après :




```

/* compact header */
.above_body {
	display: flex;
	align-items: stretch;
	padding-top: 0;
}
.above_body .navbar {
	height: auto;
	flex: 1;
	margin-top: 0;
}
.above_body .navtabs > li > ul {
	height: calc(100% - 26px);
	display: flex;
	align-items: center;
}
.above_body .navbar_advanced_search > li {
	top: 13px;
	position: relative;
}
.ad_global_header {
	display: none;
}
```


C'est valide jusqu'à une résolution de 1300px comprise.  ::):

----------


## Stelarc

Pour un profane comment fait-on pour ajouter ce que t'as fait ?

----------


## Coin-coin le Canapin

Attends, je corrige quelques bugs et je te dis ça  ::o:

----------


## FUTOMAKI

Ah oui, je me disais aussi  ::P: 



@Stelarc: Lis le premier post  ::):

----------


## Coin-coin le Canapin

Va dans "manage" dans le plugin Stylus (ici dans chrome) :


Ensuite tu cliques sur "Write new style" à gauche, tu copicolle le code CSS dedans. Ensuite tu cliques sur le "+" à côté de "Applies to Everything" en dessous de la fenêtre de rédaction et tu mets "URLs on the domain" : "forum.canardpc.com".
Tu donnes un nom au style dans le champ en haut à gauche (ici "cpc+") et tu cliques sur "Save".

Ça devrait appliquer mes styles par dessus ceux de Futomaki.

Si vous trouvez des bugs, hésitez po, que je les corrige.

----------


## FUTOMAKI

Maj du style : 

4/11/2018
• "Pagination left was a mistake" La pagination retourne à sa position initiale
• Ajustements mineurs au header de résultats de recherche, header de topic, header de quoi de neuf

---

L'idée c'est de reculer pour mieux sauter.
Je fais des rollback de changements qui nuisait a l'usage du forum (la disparation du bouton "répondre à la discussion" notamment).

Voila, peut-être une update plus conséquente sous peu.

----------


## Frypolar

> Va dans les options avancées du plugin Stylish


*WARING*

N’utilisez pas Stylish, prenez Stylus (Chrome/Vivaldi, Opera et Firefox). Le pourquoi et le comment.

----------


## Coin-coin le Canapin

J'ai remplacé  ::): 

Ton lien "pourquoi" marche pas au fait.

----------


## Frypolar

Corrigé, merci  :;):

----------


## Stelarc

Merci vous êtes des bons !

Par contre j'ai un bug.

----------


## FUTOMAKI

Tu te sers de quel navigateur internet Stelarc ?
Avec quelle résolution ?

Pour t'aider efficacement j'ai besoin de ces infos  ::):

----------


## Stelarc

Firefox 63.0.1 en 1080p.

----------


## Coin-coin le Canapin

Futomaki, j'avais un bug d'icônes sur un autre site, j'ai vu que ça venait de ton thème Stylus qui était partiellement appliqué sur tous les sites sans distinction :



Le premier bout de code est appliqué partout, au lieu d'être uniquement sur forum.canardpc.com.

----------


## FUTOMAKI

@Stelarc : Je n'arrive pas à reproduire le problème. Est-ce que tu as ajouté le code fourni par Coin-coin ?
@Coin-coin : j'ai corrigé

15/11/2018
• Correction de l'architecture de la feuille de style pour une meilleure compatibilité avec Firefox

----------


## Stelarc

> @Stelarc : Je n'arrive pas à reproduire le problème. Est-ce que tu as ajouté le code fourni par Coin-coin ?


Oui, sans je n'ai pas ça.

----------


## FUTOMAKI

Hum bah alors c'est à Coin-coin qu'il faut s'adresser  ::): 
Personnellement je ne m'en sers pas tout de suite.

----------


## Coin-coin le Canapin

J'regarde ça demain  ::o:

----------


## Coin-coin le Canapin

Faut ajouter ça :


```
.ad_global_header {
	display: none;
}
```

----------


## Stelarc

En effet ça roule, merci pour le sav. ::ninja::

----------


## Coin-coin le Canapin

Futumaki,
J'ai créé un thème sombre compatible avec ton thème, mais je me suis rendu compte que dans ton code css y a plein de !important qui pourraient être évités (et qui rendent pénible la création de thèmes compatibles  ::trollface::  )
C'est un truc que tu pourrais modifier ou pas ?

----------


## FUTOMAKI

Je suis en train de retaper ma feuille de style pour obtenir quelque chose de beaucoup plus facile à maintenir, ainsi que de ré-agencer les éléments de UI :
- la suprabar
- le header
- la barre de contrôle
- les listes de topic ("standard" et "quoi de neuf")
- les boutons
- le bug de feuille de style global dons tu parles plus haut

Concernant les !important, c'est pour le moment l'unique solution que j'ai trouvé pour contourner les définitions du style original du forum, pour les couleurs notamment mais aussi pour modifier les positions et parfois les marges.
Est-ce que tu pourrais me fournir une liste des éléments !important conflictuels avec la création de thème ? Histoire de savoir ce qui coince.

----------


## Coin-coin le Canapin

Tu as du utiliser des !important parce que tes sélecteurs ne sont pas assez précis et se font overrider par les sélecteurs du thème de canardpc.
Du coup suffit juste de remplacer les sélecteurs :


```
.posthead {
    background: #c5c5c5 !important;
    border: 10px #888 !important;
    padding: 6px 0px !important;
    margin: 0 !important;
}
```

Remplacer par


```
.postbit .posthead, .postbitlegacy .posthead, .eventbit .eventhead {
    background: #c5c5c5;
    border: 10px #888;
    padding: 6px 0px;
    margin: 0;
}
```




```
.userinfo, userinfo_extra {
    width: 120px !important;
    background: inherit !important;
    padding: 00px 10px !important;
}
```

Remplacer par


```
.postbitlegacy .userinfo {
    width: 120px;
    background: inherit;
    padding: 00px 10px;
}
```




```
.postbody {
    margin-left: 0px !important;
    background: #eee !important;
    border: none !important;
}
```

Remplacer par


```
.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
    margin-left: 0px;
    background: #eee;
    border: none;
}
```




```
.signature {
    border-top: 1px solid #ddd !important;
    font-size: 9px !important;
}
```

Pas besoin des !important ici

Ça devrait le faire comme ça  ::):

----------


## Coin-coin le Canapin

Deux ch'tits problèmes sur ton thème :
L'encart des infos d'utilisateur sur les pages de profil : http://forum.canardpc.com/members/60...oin-le-Canapin


Le fond blanc sur les lignes dans Réponses / Affichages :

----------


## FUTOMAKI

C'est cool de me faire des retours, j'ai corrigé le problème de "threadstats" (réponses/affichages).
Je n'ai pas du tout personnalisé la partie utilisateur, le soucis doit provenir d'un effet de vague avec une autre déclaration. Je vais corriger ça.

----------


## Coin-coin le Canapin

Et pour la police "open sans" qui est floue chez moi, elle n'est floue que quand elle est en gras. Comment ça se fait ? Est-ce qu'il faudrait charger spécifiquement le fichier de police open sans gras ?

----------


## FUTOMAKI

22/11/18 | Opération "nettoyage de novembre"

Une grosse MAJ qui met l'accent sur la renovation du style existant.

• revue du style de base de fond en comble pour une meilleure compatibilité avec les thèmes custom (c'est pour toi coin-coin)
• amélioration du style de la suprabar, du header, des contrôles utilisateurs, du fil d'Ariane de la liste de discussions et des résultats de recherche.
• ré-introduction des actions de discussions
• amélioration de la disposition de la pagination et des actions de discussions
• corrections mineures diverses et variées

/!\ La rénovation n'est pas encore exhaustive et il va surement trainer des choses par-ci par la.

A venir dans la prochaine MAJ:
• meilleure gestion des polices d'écritures

---

@ Coin-coin, la police open sans bold n'est pas chargé dans le style, le problème de police floue provient surement du rendu bold simulé par le navigateur.

----------


## Coin-coin le Canapin

```
.threadlisthead, .searchlisthead, .forumhead, .searchlisthead span, h2.searchlisthead span.mainsearchstats {
    background: #666 !important;
    font-weight: normal;
    font-size: 9px;
}
```

Possible de virer le !important ici ?

Sinon j'aime bien ton thème (je l'utilise, donc), y a qques trucs que je trouve pas top :


Les textes translucides qui deviennent opaques quand on passe le curseur dessus (en bleu sur le screen) : ça donne l'impression qu'il y a une interactivité directe sur le texte alors qu'en fait non.
Et puis c'est écrit trop petit.

Et en rouge, c'est tout décalé par rapport à la première ligne, et c'est écrit trop petit.
Y a plusieurs trucs que tu as mis en tout petit, c'est pas toujours lisible, surtout qu'on a des écrans avec des grandes résolutions maintenant,.

----------


## Stelarc

Chez moi c'est cassé et le bouton répondre à la discussion ne fonctionne pas. FF 63.0.3

https://screenshots.firefox.com/7xQt...m.canardpc.com

----------


## Rouxbarbe

Pareil ici sur Chrome, les lignes du suivi des abonnements sont super hautes comme sur ton screenshot Stelarc

----------


## FUTOMAKI

> Possible de virer le !important ici ?Et en rouge, c'est tout décalé par rapport à la première ligneLes lignes du suivi des abonnements sont super hautes


Hopla, corrigé




> Les textes translucides qui deviennent opaques quand on passe le curseur dessus (en bleu sur le screen) : ça donne l'impression qu'il y a une interactivité directe sur le texte alors qu'en fait non.


Alors si tu parles bien seulement du fil d'ariane en haut du site, il y a bien une interaction directe lorsque tu clic dessus. Donc la je comprend pas ou tu veux en venir.
Au regard de l'importance relativement faible de cet élément (la profondeur de nav n'est pas très importante) j'ai choisi de le mettre en retrait pour dégager le reste de l'interface.




> Et puis c'est écrit trop petit.


J'ai réduit la taille des infos "meta" (nb de discussions, nb de messages) et statiques (intitulés de colonnes) pour la même raison que le fil d'ariane.
Ce ne sont pas des infos prioritaires.

En revance l'élément que je voudrais mettre plus en avant, et dont je ne me suis pas encore penché dessus, c'est le contenu "dernier messages".
Ca viendra mais faut pas oublié que j'ai un emploi du temps limité  ::): 




> le bouton répondre à la discussion ne fonctionne pas. FF 63.0.3


Alors non, le bouton "répondre à la discussion" fonctionne très bien. C'est son usage qui est abscon.
Ce bouton permet d'ajouter une selection de posts à ta réponse d'un coup pour pouvoir multi-quote les messages plus facilement.

Il serait avisé de changer l'intitulé de ce bouton pour le rendre plus facile à comprendre, mais ça je ne peux pas le faire (si un admin en à le pouvoir ce serait cool).

----------


## Coin-coin le Canapin

Pour restyler les éléments de canardpc je reprends exactement les mêmes sélecteurs que ceux utilisés dans le css par défaut et qu'on peut voir dans les outils de dev de chrome.
Genre pour modifier le footer des posts, je sélectionne l'élément :


Là je vois les sélecteurs utilisés dans le thème par défaut :


```
.postbit .postfoot .textcontrols, .postbitlegacy .postfoot .textcontrols, .eventbit .eventfoot .eventcontrols
```

Je réutilise exactement cette série de sélecteurs pour personnaliser le footer des posts : je suis à peu près certain que ça va rien péter, qu'il n'y aura pas besoin de !important et que ça va fonctionner partout.
Si jamais tu procèdes pas comme ça (vu que certains de tes sélecteurs étaient overridés par le css de canard pc) je te conseille de le faire  ::):

----------


## FUTOMAKI

> Si jamais tu procèdes pas comme ça (vu que certains de tes sélecteurs étaient overridés par le css de canard pc) je te conseille de le faire


Ouaip, je me suis mis à faire comme ça et y'a beaucoup moins de conflits. Merci  ::):

----------


## Stelarc

> Alors non, le bouton "répondre à la discussion" fonctionne très bien. C'est son usage qui est abscon.
> Ce bouton permet d'ajouter une selection de posts à ta réponse d'un coup pour pouvoir multi-quote les messages plus facilement.


Plus précisément c'est le bouton en haut de la page qui déconne, la zone d'action du clic n'est pas alignée, t'as genre 99% du bouton qui n'est pas cliquable sauf une petite ligne d'un pixel de large. Je ne sais pas si c'est clair. ::sad::

----------


## FUTOMAKI

...
Ah oui c'est clair la maintenant.

Il m'embête ce bouton.
Pour cette raison déjà.
Et puis aussi parce que c'est naturellement très rare de cliquer sur cette action en haut de la page.

En gros voila le scénario:
- tu scoll pour séléctionner tes messages
- tu arrives en bas de page
- et la tu clic sur le bouton

La seule raison de laisser le bouton en haut c'est si ta séléction de message s'étale sur plusieurs page.
Ce qui est un cas particulièrement rare quand même.

Donc bon je pense que le bouton "répondre à la discussion" du haut de page va bientôt re-disparaitre dans les limbes.
Et hop, problème reglé. C'est pas comme-ci quelqu'un c'était plaint de son absence depuis 2 ans.

----------


## Stelarc

Je t'avoue que je ne l'utilise jamais. ::lol::

----------


## Coin-coin le Canapin

> Donc bon je pense que le bouton "répondre à la discussion" du haut de page va bientôt re-disparaitre dans les limbes.


Tu peux lui mettre un z-index de 1 pour régler le souci  ::): 

edit : pour open sans floue, je trouve que même la police "sans serif" rend mieux (je suis sous chrome) :

----------


## Anonyme210226

Avec le passage du forum en https, et le fait que les navigateurs hurlent toutes sirènes dehors dès qu'ils voient du contenu chargé en http dedans, j'ai remarqué que la police Open Sans était chargée dans la feuille de style via son adresse en http, ce que Firefox n'aime pas et bloque par défaut. Ca se corrige facilement dans la feuille de style.

----------


## ATP

Satellite Reign est un super jeu, je suis étonné qu'aucun Canard ne veuille cultiver sa culture vidéo-ludique : foncez sur ce titre, c'est du bonheur pour les amateurs du genre.

----------


## znokiss

> Satellite Reign est un super jeu, je suis étonné qu'aucun Canard ne veuille cultiver sa culture vidéo-ludique : foncez sur ce titre, c'est du bonheur pour les amateurs du genre.


Je veux bien, mais quel rapport avec la lisibilité du forum ?

----------

