Faites péter vos screenshots + link vers les modifs. On va piocher.
:]
Pareil c’est juste la séparation des post qui me gênait. A chaque nouvelle version, ça a gueulé sur les couleurs
Ah ah, j’ai testé ton CSS, Je ne savais qu’on pouvait faire ce genre de délire
C’est pas très flat tout ça mais on va DEBATTRE
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
.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…
Ouais faut que je trouve les marques en Markdown (lolilol) pour le formatage du code
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 !
Merci Haza et Glasofruix.
C’est tout de même étonnant comment 3 lignes de code peuvent tout changer
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).
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;
}
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;
}
}