Geekzone trop blanc ? passez du côté obscur de la zone (ou reglez vos écrans :p )

Faites péter vos screenshots + link vers les modifs. On va piocher.
:]

De mon côté le script d’@Haza me suffit pour juste mieux séparer les messages.

1 « J'aime »

Pareil c’est juste la séparation des post qui me gênait. A chaque nouvelle version, ça a gueulé sur les couleurs :smiley:

Ah ah, j’ai testé ton CSS, Je ne savais qu’on pouvait faire ce genre de délire :smiley:

C’est pas très flat tout ça mais on va DEBATTRE :smiley:

C’est quel partie du script qui fait ça?

Osef que ca soit flat, c’est lisible, c’est quand meme un peu l’essentiel :slight_smile:

.topic-body {
background-color:#f6f6f6;
border-radius: 5px;
border: 1px solid #ececec;
margin: 10px;
box-shadow: 6px 6px 6px -4px rgba(57, 57, 57, 0.4);
}

J’ai juste viré le fond en lui donnant la même couleur que le corps du forum (la sobriété est importante) : un blanc cassé qui ne fait pas mal aux yeux tout en restant lisible quelque soit l’éclairage de l’écran et la lumière extérieure.

Après y a deux écoles pour les messages : plus clairs ou plus foncés que le reste. Choisis ton camp camarade mais il est bien évident qu’ils doivent être plus clairs, ne serait-ce que pour marquer le contraste avec leur contenu (citation, image, vidéo…).

Et @Funkylolo qui en profite pour dévaster le topic… :laughing:

2 « J'aime »

Pour ma part, je préfère les messages sur fond blanc (ton screen donc) que l’inverse :

Ouais faut que je trouve les marques en Markdown (lolilol) pour le formatage du code :wink:

Clique sur J’aime si tu veux retrouver l’ancien style.

Sans rire, il faut que je tente le coup de refaire un style à partir de l’ancien style. Geekzone c’est un forum de vieux et les vieux ça n’aime pas le changement !

2 « J'aime »

Merci Haza et Glasofruix.
C’est tout de même étonnant comment 3 lignes de code peuvent tout changer :slight_smile:
La version de base, c’était juste pas possible pour moi (mélange entre illisibilité et l’impression de se retrouver sur une page de commentaires).

2 « J'aime »

Oui ce qui est le plus gênant c’est l’absence de séparation et le manque de contraste.

Merci @Haza :blush:

T’as regardé s’il n’y aurait pas des thèmes tout fait pour Discourse?

Tu peux share le code amasokin stp?

Alors super gros disclaimer : je ne bite pas grand chose au css, du coup j’ai fait quelques modifs à la mano mais pour le reste j’ai utilisé un addon Chrome WYSIWYG (Stylebot) qui sort probablement un code tout pourri, donc si y’en a qui veulent peut-être nettoyer le code avant que tu le reprennes tel quel ça serait peut-être mieux.

Et j’ai juste pris le code d’@Haza (super merci) et changé les couleurs, hein.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic);

#main-outlet {
background-color: rgb(25, 25, 25);
}

#topic-progress {
color: #575757;
}

.post-menu-area {
margin-bottom: 0;
}

.quote .title {
background-color: #0d0d0d ;
border-left: 3px solid #303030 ;
border-right: 3px solid #303030;
border-top: 1px solid #303030;
}

.reply-to-tab {
background-color: #404040;
border-radius: 5px;
color: #f2f2f2 ;
padding: 0.35em;
}

.topic-avatar {
border-top: none;
}

.topic-body {
border: 1px solid #303030;
border-radius: 5px;
box-shadow: 6px 6px 6px -4px rgba(00, 00, 00, 0.4);
margin: 10px;
}

a p span {
color: #c2c2c2;
}

a.badge.badge-notification.new-posts {
background-color: #4d4d4d;
}

a.fancy-title {
color: #cfcfcf;
}

a.mention {
background-color: #404040;
color: #f2f2f2 ;
}

a.title {
color: #b5b5b5;
}

a.topic-link {
color: #b3b3b3;
}

blockquote {
background-color: #0d0d0d;
border-bottom: 1px solid #303030;
border-left: 3px solid #303030;
border-right: 3px solid #303030;
}

body {
background-color: rgb(15, 15, 15);
}

button.ember-view.btn.no-text {
background-color: #0f0f0f;
}

div.ember-view.menu-panel.drop-down {
background-color: #1f1f1f;
}

div.ember-view.processed.open.show-preview {
background-color: #242424;
}

div.grippie {
background-color: #000000;
}

div.topic-body {
background-color: #121212;
color: #adadad;
}

div.wmd-preview.cooked {
background-color: #1c1c1c;
color: #f7f7f7;
}

header.ember-view.d-header.clearfix {
background-color: #0f0f0f;
color: #ffffff;
}

html {
font-family: "Open Sans", Helvetica,Arial,sans-serif;
}

li.ember-view {
background-color: #0f0f0f;
}

li.ember-view.read {
background-color: #1f1f1f;
}

li.read.last.heading {
background-color: #1f1f1f;
}

section.avatars.clearfix {
background-color: #0f0f0f;
}

section.ember-view.information {
background-color: #0f0f0f;
}

section.links {
background-color: #0f0f0f;
}

span.badge-category.clear-badge {
color: #707070;
}

span.badge.badge-notification.clicks {
background-color: #424242;
}

textarea.ember-view.ember-text-area.wmd-input {
background-color: #1c1c1c;
color: #f7f7f7;
}

ul.clearfix {
background-color: #0f0f0f;
}
1 « J'aime »

Impec, merci!

Roh merci, c’était mon plus gros problème, en plus de m’éclatez la rétine j’arrivais pas a me faire à la scission entre deux postes !

Merci !

Petite update

Faut encore travailler les avatars plus quelques p’tits trucs mais ça avance doucement. Le code pour ceux qui veulent tester :

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic);
@-moz-document domain("forum.geekzone.fr"){    
body {
background-color: #F4F4F2;
}

/*html {
font-family: "Open Sans", Helvetica,Arial,sans-serif;
}*/

#main-outlet {
background-color: #F4F4F2;
}

.topic-body {
background-color:white;
border-radius: 5px;
border: 1px solid #ececec;
margin: 2px;
box-shadow: 4px 4px 4px -4px rgba(57, 57, 57, 0.4);
}

.post-menu-area {
margin-bottom: 0;
}

.cooked p {
color: #000;
}

.quote .title {
border-left: 3px solid #ddd !important;
border-right: 3px solid #ddd;
border-top: 1px solid #ddd;
background-color: #f6f6f6 !important;
}

blockquote {
background-color: #f6f6f6; 
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 1px solid #ddd;
}

.topic-avatar {
border-top: none;
}

a.mention {
background-color: #ECF5F8;
}

.reply-to-tab {
background-color: #ECF5F8;
padding: 0.35em;
border-radius: 5px;
color: #555 !important;
}
}