Trop de blanc, un thème sombre SVP

[christiandunord]

Bonjour,

Serait-il possible de pouvoir disposer d'une option "thème sombre" ?

Le nouveau code flingue les yeux, notamment le soir. Et de toute façon il y a trop d'espace vide en blanc, générateur de surconsommation inutile et de fatigue oculaire.

En espérant que d'autres membres seront de mon avis pour "pousser" au développement de cette fonctionnalité.

 

EDIT du 18 janvier 2021 : Ce sujet, initialement une requête, a évolué en une succession de tutoriels pour celles et ceux qui souhaitent un affichage personnalisé du forum.
Ci-dessous les liens directs vers les aides à la personnalisation :

- Utiliser un mode sombre pour sa navigation internet

- Modifier l'affichage du forum en javascript

- Modifier l'affichage du forum en CSS

- Installer un thème personnalisé pour le forum

- Installer un thème sombre pour le forum

- Faire disparaitre le logo Caradisiac lors du scroll

- Afficher un bouton de retour en haut de page

 

 

Modifié 14 avril 2021 par christiandunord
Barrage des liens qui ne sont plus utiles

[patrick51520]

oui, ce blanc agresse, et la place "libre" est une difficulté supplémentaire pour lire  et regarder les photos sur un espace réduit désormais à 2/3 de la surface utile . en plus l'objectif de cette mise e ne place m'echappe un peu..

quant a la recupération des " Favoris " , ce serait vraiment tres tres tres tres utile a tous .

[Superastuce]

Je plussoie, quelle plaie ce fond blanc.

On dirait que c'est la mode de dégrader les sites ou programmes qui marchent bien: après Eurosport.fr et Firefox dont les dernières mises à jour sont toutes les deux à 1 étoiles sur le playstore, voici Cara qui réinvente la roue alors que tout le monde passe en thème sombre.😖

Le fond blanc est franchement pénible, de même que les espaces inutilement grands entre chaque post, du coup on visualise seulement 2 ou 3 réponses à l'écran et il faut scroller, scroller ...

 

J'avais quitté définitivement un autre forum suite à une refonte totale de ce type, là ça me donne envie d'y venir le moins souvent possible ...

[christiandunord]

Oui je suis aussi d'accord avec vous, les grands espaces latéraux n'arrangent rien.

A la décharge des développeurs, ils ont écrit leur code pour les mobiles en priorité, ce qui fait que plus l'écran est petit, moins les espaces latéraux sont grands, voire disparaissent.

Ceci étant, c'est quand même plus sympa d'utiliser un moniteur pour voir les photos.

 

Pour en revenir au thème sombre, à minima ils pourraient redéfinir les couleurs de fonds 'background-color' du bandeau supérieur et de la page comme je l'ai fait en 2 clics avec les options développeurs de mon navigateur.

[RustyJ]

C'est une horreur, ça clinque, et c'est vraiment degueu sur un ordi, car l'espace utilisé du forum est pensé avec les pieds ou d'un mec qui fait du 32 ou d'un qui fait du 54.

Mais quelle horreur, rassurez moi, c'est un gars du site qui a fait ça, pas une entreprise payée pour !!

Modifié 5 novembre 2020 par RustyJ

[christiandunord]

C'est évidemment un entreprise qui a été payée pour refondre les 4 sites du groupe La Centrale.

Et clairement, il y a eu des économies de faites puisque tous les sites sont construits sur le même code, et avec cette même prédominance de BLANC...

C'est comme si on faisait du ski en pleine journée sans lunettes de soleil. 😵 😡

 

 

[christiandunord]

OK en attendant qu'ils se bougent pour proposer un thème sombre, vu que je compte pas me flinguer les yeux avec tout ce blanc, je vous propose une solution alternative :
Utiliser l'extension Dark Reader disponible pour Chrome, Edge, Firefox et Safari.

Voilà ce que ça donne avec un écran 16/9 :

 

Qu'en pensez vous ?

 

[Darwi]

Une autre solution est l'utilisation de l'extension TamperMonkey qui permet de modifier le code du site. Avec le code ci-dessous vous aurez le fond en gris clair et en plus la largeur à 1500px à la place de 1200px.

 

// ==UserScript==
// @name         Forum Auto largeur + fond
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://forum-auto.caradisiac.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    document.body.setAttribute("style", "background-color: LightGrey;");

    var divHeader = document.body.getElementsByClassName("header-cara");
    divHeader[0].setAttribute('style', 'background-color: LightGrey;');

    var divMainAdjust = document.body.getElementsByClassName("main adAdjust");
    divMainAdjust[0].setAttribute('style', 'max-width: 1500px;');

    var classIpsLayoutContainer = document.body.getElementsByClassName("ipsLayout_container");
    for(var i = 0; i < classIpsLayoutContainer.length; i++){
        classIpsLayoutContainer[i].setAttribute('style', 'max-width: 1500px;');
    }

})();

 

Pour un résultat qui ressemble à ceci :

 

 

 

Je n'ai testé que sous Firefox, mais ça devrait marcher avec Chrome.

Modifié 8 novembre 2020 par Darwi

[christiandunord]

Sympa ton script, je ne connaissez pas.
C'est vrai qu'il y a plus de possibilités de réglages que l'extension que je suggère, notamment les 'medias queries' pour écrans larges qui semblent avoir été oubliées par les dév de La Centrale.
Après, c'est bien que tu ais dégrossi car même s'il n'y a rien de sorcier, c'est un peu plus technique qu'une extension 'clic and run' comme Dark Reader.

[christiandunord]

Contrairement aux filtres de lumière, comme l'utilisation de l'éclairage nocturne de Windows 10, qui jaunissent les photos et appliquent le filtre à tout ce qu'affiche l'ordinateur, un thème sombre permet de conserver intact l'affichage des photos, sans les jaunir ou les griser, et ne s'applique qu'au seul site internet concerné.
Provisoirement, l'utilisation d'une extension "thème sombre" pour navigateur offre le même résultat et constitue donc une alternative qui n'a rien à voir avec un filtre de lumière.

 

[jazznet2004]

+1 un thème sombre... car là c'est une punition

de même en amélioration bonne a prendre... avoir tous les sous section affiché dans la section.

aller chercher les info dans chaque sous section est une plaie...

 

Dernier point mais pas des moindre......... enlever les email des notifications.... putain recevoir 36mails cela rempli les boites pour rien et ne pas avoir les notif sur le forum fait perdre un temps de fou. 

[Mimi57]

Le 08/11/2020 à 08:33, christiandunord a dit :

OK en attendant qu'ils se bougent pour proposer un thème sombre, vu que je compte pas me flinguer les yeux avec tout ce blanc, je vous propose une solution alternative :
Utiliser l'extension Dark Reader disponible pour Chrome, Edge, Firefox et Safari.

Voilà ce que ça donne avec un écran 16/9 :

 

Qu'en pensez vous ?

 

j'en pense que c'est aussi merdique!!!!!!!!!

mais c'est la tendance, quand quelque chose fonctionne correctement, y'a toujours un petzouille pour pour dire ah faudrait changer ça!!

Bref si ça me casse trop les couilles j'irai faire autre chose que consulter le forum

[christiandunord]

 => aussi merdique # fonctionne correctement
Merci pour cet avis, aussi cohérent que constructif 😄

[christiandunord]

Bonnes nouvelles, je cite WildOne :

"On va tâcher de réduire le blanc dans les contours dans un premier temps. Le thème sombre est à l'étude mais pas dans l'immédiat." 

[jazznet2004]

Si c’est bien fait, les thème c’est pas long long à faire. 
après tout dépend du temps qu’ils ont là dessus 

[25asa]

Le 08/11/2020 à 15:11, Darwi a dit :

Une autre solution est l'utilisation de l'extension TamperMonkey qui permet de modifier le code du site. Avec le code ci-dessous vous aurez le fond en gris clair et en plus la largeur à 1500px à la place de 1200px.

 

// ==UserScript==
// @name         Forum Auto largeur + fond
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://forum-auto.caradisiac.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    document.body.setAttribute("style", "background-color: LightGrey;");

    var divHeader = document.body.getElementsByClassName("header-cara");
    divHeader[0].setAttribute('style', 'background-color: LightGrey;');

    var divMainAdjust = document.body.getElementsByClassName("main adAdjust");
    divMainAdjust[0].setAttribute('style', 'max-width: 1500px;');

    var classIpsLayoutContainer = document.body.getElementsByClassName("ipsLayout_container");
    for(var i = 0; i < classIpsLayoutContainer.length; i++){
        classIpsLayoutContainer[i].setAttribute('style', 'max-width: 1500px;');
    }

})();

 

Pour un résultat qui ressemble à ceci :

 

 

 

Je n'ai testé que sous Firefox, mais ça devrait marcher avec Chrome.

Hey !

 

Mille merci pour ton script !! 

 

Testé et approuvé !

 

je me permets de l'ajouter à mes tutos sur la section bmw

[philX]

Le 08/11/2020 à 08:33, christiandunord a dit :

OK en attendant qu'ils se bougent pour proposer un thème sombre, vu que je compte pas me flinguer les yeux avec tout ce blanc, je vous propose une solution alternative :
Utiliser l'extension Dark Reader disponible pour Chrome, Edge, Firefox et Safari.

Voilà ce que ça donne avec un écran 16/9 :

 

Qu'en pensez vous ?

 

 

Désolé de te décevoir, mais je préfère nettement le blanc (ou une couleur claire) ... 

 

.

 

[christiandunord]

il y a 4 minutes, philX a dit :

 

Désolé de te décevoir, mais je préfère nettement le blanc (ou une couleur claire) ... 

 

.

 

Rien d'anormal, t'inquiète moi aussi j'aime les thèmes clair... quand ils ne n’explosent pas les yeux 😀

Par contre le soir, en lumière électrique, je trouve plus confortable un thème sombre.

Une affaire de goût quoi 😉

 

[philX]

Il y a 4 heures, christiandunord a dit :

Rien d'anormal, t'inquiète moi aussi j'aime les thèmes clair... quand ils ne n’explosent pas les yeux 😀

Par contre le soir, en lumière électrique, je trouve plus confortable un thème sombre.

Une affaire de goût quoi 😉

 

Le Forum Autodiva est sur fond noir et je n'y vais pas avec plaisir.

Concernant Caradisiac, je pense qu'il devrait être possible de donner à chacun le choix de sa couleur de fond.

[christiandunord]

Il y a 9 heures, philX a dit :

Le Forum Autodiva est sur fond noir et je n'y vais pas avec plaisir.

Concernant Caradisiac, je pense qu'il devrait être possible de donner à chacun le choix de sa couleur de fond.

On est d'accord, c'est ce que je propose dans mon premier post ; une option permettant de basculer entre thème sombre et thème clair, comme sur les messageries protonmail ou tutanota

 

[philX]

Je pensais à plus de choix de couleurs ... 

[bob bimon]

Le 08/11/2020 à 15:11, Darwi a dit :

Une autre solution est l'utilisation de l'extension TamperMonkey qui permet de modifier le code du site. Avec le code ci-dessous vous aurez le fond en gris clair et en plus la largeur à 1500px à la place de 1200px.

Merci Darwi !

On respire avec cette nouvelle largeur !

Et on peut pas agrandir plus que 1500 pixels ?

Modifié 22 novembre 2020 par bob bimon

[Darwi]

il y a 7 minutes, bob bimon a dit :

Et on peut pas agrandir plus que 1500 pixels ?

 

Tout a fait, il suffit de changer les deux 1500 dans le script, par la valeur voulu.

 

J'ai mis 1500px car comme ça, les messages font environ 120 caractères de large et ça correspond à une longueur de ligne confortable pour moi

[bob bimon]

Aaahhhh, de l'esssspppppaaaaaccccceeeee, enfin ! !

Merci merci merci !

Ca devrait être une REGLE DE BASE de définition de la page, on est pas tous sur un smartphone !

 

Et je vais moins devoir scroller !

 

Modifié 22 novembre 2020 par bob bimon

[bob bimon]

Et on peut masquer des cadres avec ton éditeur, comme les "contributeurs populaires" qui me polluent à droite ?

[Darwi]

il y a 16 minutes, bob bimon a dit :

Et on peut masquer des cadres avec ton éditeur, comme les "contributeurs populaires" qui me polluent à droite ?

 

Tout a fait on peut modifier absolument tout l'affichage. Par exemple pour enlever les "Contributeurs populaires"

document.getElementById('elTopContributors_content').remove();
document.getElementById('elTopContributors').remove();

Par contre cela laisser affiché le texte "Contributeurs populaires". Pour supprimer ce texte il faut faire quelque chose de plus compliqué (sinon on supprime le titre du premier élément de la colonne de droite sur toutes les pages)

Modifié 22 novembre 2020 par Darwi

[bob bimon]

Très bien !

C'est déjà ça de moins qui pollue !

 

Et pour virer les sujets populaires ?

Modifié 22 novembre 2020 par bob bimon

[Darwi]

Dans ce cas en un peu plus violent à mettre à la place du code précédent

 

   document.getElementById('ipsLayout_sidebar').remove();

 

Ça supprime la colonne de droite compétemment sur l'ensemble du forum.

[christiandunord]

Le 22/11/2020 à 08:39, philX a dit :

Je pensais à plus de choix de couleurs ... 

Ce n'est pas ce qui est planifié et je doute que cela le soit un jour, par contre il est possible de choisir son thème et donc ses propres couleurs de fond avec une extension pour navigateur.

 

Voilà par exemple ce que ça donne en nuances de bleu-gris :

 

Pour cela j'ai utilisé l'extension CustomCSS Injector pour Firefox (EDIT : Il en existe aussi une flopée pour Chrome, tel 'User CSS'  voir plus loin une extension polyvalente)
Avantages : extension très simple à utiliser, ultra-légère, ne demandant que 2 permissions, et sans injection de JavaScript inutile.

 

Voici le petit code CSS à copier-coller et insérer dans l'extension pour modifier le forum en couleurs, mais aussi en largeur de contenu et sans colonne de droite :

/* Optimisation écrans larges */
.main, #ipsLayout_body {max-width:1800px;}
/* Affichage sans widgets */
#ipsLayout_sidebar.ipsLayout_sidebarright {display:none}
/* Thème clair */
.header-cara, body, #conteneurStation, #ipsLayout_body, #ipsLayout_header nav::after, .footer-cara {background-color:#dbdfe1;}
.ipsBox, .ipsDataItem {background-color:#fbfcfd;}

Tous les paramètres sont modifiables.

Puis, sélectionner 'Apply to domain' et renseigner 'https://forum-auto.caradisiac.com' dans 'WhiteList domains' comme suit :

 

Enfin, pour modifier les couleurs, il suffit d'aller sur www.color-hex.com et choisir ses propres couleurs pour remplacer dans le code : le bleu-gris moyen #dbdfe1 et le bleu-gris clair #fbfcfd 😀

 

Exemple avec des couleurs rose-mauve moyen #f3daff et clair #fdf9ff

 

En résumé :
1/ J'installe mon extension en 1 clic
2/ Je copie-colle le code et renseigne le domaine
3/ Je sauvegarde... Voilà, c'est prêt !

 

Au besoin, je choisis tranquillement de nouvelles couleurs pour mon thème.

 

Modifié 3 décembre 2020 par christiandunord
Mise à jour du code et lien vers le tuto de l'extension privilégiée

[popo2010]

il y a 58 minutes, Darwi a dit :

Dans ce cas en un peu plus violent à mettre à la place du code précédent

 

   document.getElementById('ipsLayout_sidebar').remove();

 

Ça supprime la colonne de droite compétemment sur l'ensemble du forum.

 

Salut Darwi,

 

Merci beaucoup pour l'astuce que Bob Bimon a eu la gentillesse de me partager !

 

J'ai ajouté aussi la commande violente , et effectivement, c'est violent, il ne reste plus que les sujets, le nb de votes et le nb de votes . Mais au moins on y voit clair.

 

Merci à toi et à Bob !

 

[philX]

il y a une heure, christiandunord a dit :

Ce n'est pas ce qui est planifié et je doute que cela le soit un jour, par contre il est possible de choisir son thème et donc ses propres couleurs de fond avec une extension pour navigateur.

Voilà par exemple ce que ça donne en nuances de bleu-gris :

Pour cela j'ai utilisé l'extension CustomCSS Injector pour Firefox (Il en existe aussi une flopée pour Chrome, tel 'User CSS')
Avantages : extension très simple à utiliser, ultra-légère, ne demandant que 2 permissions, et sans injection de javascript.

 

Voici le petit code css à insérer pour modifier le forum en couleurs mais aussi en largeur de contenu, et sans colonne de droite :

@media only screen and (min-width:992px) {
.main {max-width:1500px;}
.header-cara, body, #ipsLayout_body, .ipsLayout_container, .footer-cara {background-color:#dbdfe1;}
.ipsBox {background-color:#fbfcfd;}
#ipsLayout_sidebar.ipsLayout_sidebarright {display:none}
}

Sélectionner 'Apply to domain' et mettre l'url du forum dans 'WhiteList domains' :

Enfin, pour modifier les couleurs, il suffit d'aller sur www.color-hex.com et choisir ses couleurs pour remplacer dans le code #dbdfe1 et #fbfcfd 😀

 

 

C'est gentil. Merci ... 

Mais je ne me sens pas capable de gérer les problèmes éventuels ... 

Donc je vais attendre que le Forum évolue ... 

 

 

[bob bimon]

Il y a 9 heures, popo2010 a dit :

Dans ce cas en un peu plus violent à mettre à la place du code précédent

 

   document.getElementById('ipsLayout_sidebar').remove();

Yes !

C'est ce que j'appelle de la pleine page !!

Merci !

[patrick51520]

c'est quand un peu dommage , voire difficilement acceptable , que l'on soit obligé de passer par de tels bidouillages , que beaucoup se sentent incapables d'effectuer, pour bénéficier du minimum de confort visuel qu'on trouve presque partout ailleurs .

c'est comme si en achetant une voiture neuve , vous deviez installer vous meme un pare-brise a la bonne taille et les roues adequates ....

[WildOne]

Le 21/11/2020 à 18:01, philX a dit :

 

Désolé de te décevoir, mais je préfère nettement le blanc (ou une couleur claire) ... 

 

.

 

 

Le 23/11/2020 à 07:56, patrick51520 a dit :

c'est quand un peu dommage , voire difficilement acceptable , que l'on soit obligé de passer par de tels bidouillages , que beaucoup se sentent incapables d'effectuer, pour bénéficier du minimum de confort visuel qu'on trouve presque partout ailleurs .

c'est comme si en achetant une voiture neuve , vous deviez installer vous meme un pare-brise a la bonne taille et les roues adequates ....

Des news : comme déjà dit, c'est pas simple de faire évoluer rapidement une charte graphique, on ne peut pas pousser une modif en prod sans que :

- on ait fait plusieurs modifs

- que ce soit validé

- intégré

- charté

 

Quand on fait une modif, faut modifier toutes les maquettes et les docs internes, donc ça prend un peu de temps.

Mais.... Oui, j'ai vu les maquettes, on s'oriente vers un fond un peu grisé pour les bordures et les inter messages, sincèrement ça ne pête plus les yeux

 

Bon va falloir encore un peu de patience.

L'idée du thème sombre est retenue mais pour plus tard (voir si c'est faisable de maintenir deux thèmes à la fois, pas encore sûr)

Car on veut déjà faire les modifs de base, ajouter des fonctionnalités sur mobile (pour naviguer) qui devraient arriver en janvier, et ensuite voir si on fait un thème sombre.

ça ne sert à rien de bosser sur un thème si on repéte le design du forum, le thème va être pété et tout à refaire.

[patrick51520]

il y a 3 minutes, WildOne a dit :

 

Des news : comme déjà dit, c'est pas simple de faire évoluer rapidement une charte graphique, on ne peut pas pousser une modif en prod sans que :

- on ait fait plusieurs modifs

- que ce soit validé

- intégré

- charté

 

Quand on fait une modif, faut modifier toutes les maquettes et les docs internes, donc ça prend un peu de temps.

Mais.... Oui, j'ai vu les maquettes, on s'oriente vers un fond un peu grisé pour les bordures et les inter messages, sincèrement ça ne pête plus les yeux

 

Bon va falloir encore un peu de patience.

L'idée du thème sombre est retenue mais pour plus tard (voir si c'est faisable de maintenir deux thèmes à la fois, pas encore sûr)

Car on veut déjà faire les modifs de base, ajouter des fonctionnalités sur mobile (pour naviguer) qui devraient arriver en janvier, et ensuite voir si on fait un thème sombre.

ça ne sert à rien de bosser sur un thème si on repéte le design du forum, le thème va être pété et tout à refaire.

 

merci beaucoup d'y penser et de se pencher  sur le sujet !

merci !