logo Debian Debian Debian-France Debian-Facile Debian-fr.org Forum-Debian.fr Debian ? Communautés logo inclusivité

Debian-facile

Bienvenue sur Debian-Facile, site d'aide pour les nouveaux utilisateurs de Debian.

Vous n'êtes pas identifié(e).

#1 21-03-2017 08:56:53

Antidentity
Membre
Distrib. : See signature
Noyau : Linux amd64
(G)UI : KDE / Openbox
Inscription : 03-08-2016

Thème CSS du forum Debian-Facile - WIP

Bonjour,

(Je reposte dans la bonne catégorie smile )

Voici mon wip sur lequel j'ai travaillé hier et aujourd'hui:
1490045997.png
1490046054.png
1490046107.png
1490046134.png

Il s'agit du thème du forum que j'ai légèrement "tweaké" et que j'applique avec stylish, ce qui me permet d'avoir un thème sombre sans me connecter. Je sais qu'il existe déjà d'autres thèmes sombres existants (via le profil) où il m'aurait suffit de prendre le .css et de l'appliquer à stylish mais je voulais m'amuser d'une part à "chipoter" au css et d'autre part, je souhaitais un thème avec des couleurs légèrement plus chaudes, une police et taille de police différentes. Bon, les couleurs sont pas encore "top" et il reste quelques détails à modifier mais comme je le disais, c'est un "Work In Progress". Si vous êtes intéressés, je partagerai bien évidemment l'ajout de css modifié (bien que je n'ai testé que sur mon ordi, donc firefox avec stylish sous linux)

Bonne journée/soirée!

Dernière modification par Antidentity (21-03-2017 09:34:38)


Debian - KDE / Openbox / Windows10

Hors ligne

#2 21-03-2017 17:40:13

Maximilien LIX
Membre
Distrib. : Archlinux
(G)UI : GNOME
Inscription : 17-12-2013
Site Web

Re : Thème CSS du forum Debian-Facile - WIP

Vraiment sympa big_smile

Hors ligne

#3 21-03-2017 20:12:12

Antidentity
Membre
Distrib. : See signature
Noyau : Linux amd64
(G)UI : KDE / Openbox
Inscription : 03-08-2016

Re : Thème CSS du forum Debian-Facile - WIP

Pour ceux qui sont intéressés,voici le code css que j'applique avec stylish:
(le code est un peu brouillon et il serait nécessaire de l'optimiser)
Dans la partie du début, j'ai utilisé une police de mon système (Zegoe Light) que vous n'avez pas forcément d'installé sur votre système. J'ai essayé un @import et un @font-face mais stylish n'a pas l'air de d'importer ou charger des polices "online".


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("debian-facile.org") {
 
/*Petit Hack pour Antidentity
----------------------------------------------------------------*/

  #brdtitle:not(body):not(html),
  .tc2:not(body):not(html),
  .tc3:not(body):not(html)
  { display:none !important; height:0 !important; width:0 !important; overflow:hidden !important; }
 
  h2 { font-variant: small-caps !important; }

  .pun h2, .pun .hd h2, .pun .linksb .crumbs, .pun .postlinksb .crumbs, .pun .linkst .crumbs, .pun, .pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun textarea, .pun legend, .pun input[type=text], .pun textarea, #brdtitle #brddesc, .pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols, #punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink, .pun .postmsg p, .pun .postmsg li, #punhelp p samp {
  font-family: 'Zegoe Light - U', 'Nimbus Sans L', 'Droid Sans', 'Sawasdee', sans-serif !important;
  font-size: 105% !important;
  }
 
/*--------------------------------------------------------------*/
 
  html, .pun {
    background: #14171A; /* couleur fond de page */
  }
 
  body {
    padding: 0 !important;
    background-color: transparent !important;
  }


 
  .pun .blocktable .box {
    background: #14171A; /* intérieur boites liste forums */
    color: #4e5a66; /* couleur texte des auteurs des discussions */
  }
 
  .pun .blocktable .box, .pun .blockpost {
    border-width: 1px;
    border-color: #303030 black; /* bordures extérieures du tableau (Forum, Discussions,...) */
    outline: solid 1px black; /* bordures extérieures de l'extérieur */
  }
 
  .pun a, .pun a:link, .pun a:visited {
    color: #eb5368; /* couleur texte des liens des discussions */
  }
   
  .pun .blocktable th, .pun .blockpost h2 {
    background: #181818; /* couleur fond des titres du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    border-color: #0f1214; /* bordure inférieure du titre du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    color: #a3a3a3; /* couleur texte du titre du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    padding: 4px 8px 2px 236px !important;
  }
 
  /* ombre pour l'intérieur du tableau */
  tbody {
    box-shadow: inset 6px 8px 10px 0px #0c0e0f;
    -moz-box-shadow: inset 6px 8px 10px 0px #0c0e0f;
    -webkit-box-shadow: inset 6px 8px 10px 0px #0c0e0f;
  }
 
  thead > tr {
    outline: solid 1px #0f0f0f; /* bordure extérieure de la 1ère rangée du tableau */
  }
   
  .pun .blocktable td {
    border-bottom-style: dotted;
    border-color: #4e5a66; /* bordures intérieures du tableau (Forum, Discussions,...) */
  }  
   
  .pun .punwrap {
    padding: 0 !important;
    box-shadow: initial;
  }
 
 
/* -------------------------------------------------------*/
/* ------------------ CONTENU TOPICS -------------------- */
 
  .blockpost.rowodd.blockpost1, .blockpost.rowodd.blockpost {
    background: #16141a; /* couleur fond colonne gauche 1ère rangée et rangées impaires */
    color: #4e5a66; /* couleur texte colonne gauche 1ère rangée et rangées impaires */
  }
 
  .blockpost.roweven.blockpost {
    background: #181D20; /* couleur fond colonne gauche rangées paires */
    color: #4e5a66; /*  3b444d couleur texte colonne gauche rangées paires */
  }

 
 
  *.rowodd .postbody, *.rowodd .postfoot {
    background: #2b2833 !important; /* couleur fond des messages impaires */
    border-left: dotted 3px !important;
    border-left-color: #0b0a0d !important;
  }
  *.roweven .postbody, *.roweven .postfoot {
    background: #2c353b !important; /* couleur fond des messages paires */
    border-left: dotted 3px !important;
    border-left-color: #0f1214 !important;
   
  }
 
  *.rowodd .postmsg {
    color: #a9bacb; /* couleur du texte des messages impaires */
  }  
  *.roweven .postmsg {
    color: #bfc4bc; /* couleur du texte des messages paires */
  }

 
 
  *.rowodd *.code_user, *.rowodd *.code_root, *.rowodd *.geshicodebox { /* "boite de codes" et "boite commandes user & root" des lignes impaires */
    background: #3f2833 !important;
    color: #a9bacb;
    box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -moz-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -webkit-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
  }
  *.roweven *.code_user, *.roweven *.code_root, *.roweven *.geshicodebox {  /* "boite de codes" et "boite commandes user & root" des lignes paires */
    background: #40353b !important;
    color: #bfc4bc;
    box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -moz-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -webkit-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
  }
 
 
 
  *.rowodd hr { /* séparateur des messages impaires */
    border-top: solid 1px #303030 !important;
    outline: solid 1px black !important;
    background-color: #16141a !important;
    height: 8px !important;
  }
  *.roweven hr { /* séparateur des messages paires */
    border-top: solid 1px #303030 !important;
    outline: solid 1px black !important;
    background-color: #181D20 !important;
    height: 8px !important;
  }

 
  .quotebox { /* boite de citation */
    background: #0f0f0f !important;
  }
  *.quotebox, cite { /* boite de citation */
    border-color: #566579 !important;
    color: #566579 !important;
  }
  blockquote {
    padding: 0 0 5px 0 !important;
  }

 
 
/* -------------------------------------------------------*/
/* ----------- FORMULAIRE D'IDENTIFICATION -------------- */
  .pun .blockform .box, #adstats, #adintro, #postpreview, #posterror {
    border-color: #b9c5ce #d9e1e7;
    background: #14171a;
  }
  .pun .infldset, #adintro .inbox, #adstats .inbox {
    background: #282828;
    border-color: #dfe6ee;
  }
 
 

/* -------------------------------------------------------*/
/* -------------------- MENU -----------------------------*/
  #brdmenu a, #brdmenu a:link, #brdmenu a:visited {
    background-image: none !important;
  }
 
  #brdmenu ul {
    background-image: url("https://debian-facile.org/style/Kao/background.png") !important;
    background-repeat: repeat !important;
  }
 
  #brdmenu {
    background: #1d4f73;
    background-image: -moz-linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: -webkit-linear-gradient(top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: -o-linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: -ms-linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
  }
 
 
/* BOITE DE MESSAGE RAPIDE */  
  .pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2, #pundelete .blockform h2 {
    background-color: transparent !important;
    position: relative !important;
    }
 
 
 
 
}
 


Debian - KDE / Openbox / Windows10

Hors ligne

#4 27-03-2017 22:45:11

Antidentity
Membre
Distrib. : See signature
Noyau : Linux amd64
(G)UI : KDE / Openbox
Inscription : 03-08-2016

Re : Thème CSS du forum Debian-Facile - WIP

J'ai commencé à modifier les couleurs du wiki et j'ai encore légèrement modifié le menu principal. Mais il reste pas mal de boulot.
Puis je devrai regarder pour changer les couleurs des blocs de code. N'hésitez pas à faire des remarques si il y a des choses à changer (pour ceux qui auront le courage de tester of course wink )

1490651086.png

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("debian-facile.org") {
 
/*Petit Hack pour Antidentity
----------------------------------------------------------------*/

  #brdtitle:not(body):not(html),
  .tc2:not(body):not(html),
  .tc3:not(body):not(html)
  { display:none !important; height:0 !important; width:0 !important; overflow:hidden !important; }
 
  h2 { font-variant: small-caps !important; }

  .pun h2, .pun .hd h2, .pun .linksb .crumbs, .pun .postlinksb .crumbs, .pun .linkst .crumbs, .pun, .pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun textarea, .pun legend, .pun input[type=text], .pun textarea, #brdtitle #brddesc, .pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols, #punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink, .pun .postmsg p, .pun .postmsg li, #punhelp p samp {
  font-family: 'Zegoe Light - U', 'Nimbus Sans L', 'Droid Sans', 'Sawasdee', sans-serif !important;
  font-size: 105% !important;
  }
 
/*--------------------------------------------------------------*/
 
  html, .pun {
    background: #14171A; /* couleur fond de page */
  }
 
  body {
    padding: 0 !important;
    background-color: transparent !important;
  }


 
  .pun .blocktable .box {
    background: #14171A; /* intérieur boites liste forums */
    color: #4e5a66; /* couleur texte des auteurs des discussions */
  }
 
  .pun .blocktable .box, .pun .blockpost {
    border-width: 1px;
    border-color: #303030 black; /* bordures extérieures du tableau (Forum, Discussions,...) */
    outline: solid 1px black; /* bordures extérieures de l'extérieur */
  }
 
  .pun a, .pun a:link, .pun a:visited {
    color: #eb5368; /* couleur texte des liens des discussions */
  }
   
  .pun .blocktable th, .pun .blockpost h2 {
    background: #181818; /* couleur fond des titres du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    border-color: #0f1214; /* bordure inférieure du titre du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    color: #a3a3a3; /* couleur texte du titre du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    padding: 4px 8px 2px 236px !important;
  }
 
  /* ombre pour l'intérieur du tableau */
  tbody {
    box-shadow: inset 6px 8px 10px 0px #0c0e0f;
    -moz-box-shadow: inset 6px 8px 10px 0px #0c0e0f;
    -webkit-box-shadow: inset 6px 8px 10px 0px #0c0e0f;
  }
 
  thead > tr {
    outline: solid 1px #0f0f0f; /* bordure extérieure de la 1ère rangée du tableau */
  }
   
  .pun .blocktable td {
    border-bottom-style: dotted;
    border-color: #4e5a66; /* bordures intérieures du tableau (Forum, Discussions,...) */
  }  
   
  .pun .punwrap {
    padding: 0 !important;
    box-shadow: initial;
  }
 
 
/* -------------------------------------------------------*/
/* ------------------ CONTENU TOPICS -------------------- */
 
  .blockpost.rowodd.blockpost1, .blockpost.rowodd.blockpost {
    background: #16141a; /* couleur fond colonne gauche 1ère rangée et rangées impaires */
    color: #4e5a66; /* couleur texte colonne gauche 1ère rangée et rangées impaires */
  }
 
  .blockpost.roweven.blockpost {
    background: #181D20; /* couleur fond colonne gauche rangées paires */
    color: #4e5a66; /*  3b444d couleur texte colonne gauche rangées paires */
  }

 
 
  *.rowodd .postbody, *.rowodd .postfoot {
    background: #2b2833 !important; /* couleur fond des messages impaires */
    border-left: dotted 3px !important;
    border-left-color: #0b0a0d !important;
  }
  *.roweven .postbody, *.roweven .postfoot {
    background: #2c353b !important; /* couleur fond des messages paires */
    border-left: dotted 3px !important;
    border-left-color: #0f1214 !important;
   
  }
 
  *.rowodd .postmsg {
    color: #a9bacb; /* couleur du texte des messages impaires */
  }  
  *.roweven .postmsg {
    color: #bfc4bc; /* couleur du texte des messages paires */
  }

 
 
  *.rowodd *.code_user, *.rowodd *.code_root, *.rowodd *.geshicodebox { /* "boite de codes" et "boite commandes user & root" des lignes impaires */
    background: #3f2833 !important;
    color: #a9bacb;
    box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -moz-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -webkit-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
  }
  *.roweven *.code_user, *.roweven *.code_root, *.roweven *.geshicodebox {  /* "boite de codes" et "boite commandes user & root" des lignes paires */
    background: #40353b !important;
    color: #bfc4bc;
    box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -moz-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -webkit-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
  }
 
 
 
  *.rowodd hr { /* séparateur des messages impaires */
    border-top: solid 1px #303030 !important;
    outline: solid 1px black !important;
    background-color: #16141a !important;
    height: 8px !important;
  }
  *.roweven hr { /* séparateur des messages paires */
    border-top: solid 1px #303030 !important;
    outline: solid 1px black !important;
    background-color: #181D20 !important;
    height: 8px !important;
  }

 
  .quotebox { /* boite de citation */
    background: #0f0f0f !important;
  }
  *.quotebox, cite { /* boite de citation */
    border-color: #566579 !important;
    color: #566579 !important;
  }
  blockquote {
    padding: 0 0 5px 0 !important;
  }

 
 
/* -------------------------------------------------------*/
/* ----------- FORMULAIRE D'IDENTIFICATION -------------- */
  .pun .blockform .box, #adstats, #adintro, #postpreview, #posterror {
    border-color: #b9c5ce #d9e1e7;
    background: #14171a;
  }
  .pun .infldset, #adintro .inbox, #adstats .inbox {
    background: #282828;
    border-color: #dfe6ee;
  }
 
 

/* -------------------------------------------------------*/
/* -------------------- MENU -----------------------------*/
  #brdmenu a, #brdmenu a:link, #brdmenu a:visited {
    background-image: none !important;
    letter-spacing: 0;
    text-align: left !important;
    min-width: 20px;
  }
  #brdmenu a:hover {
    background: #13354d !important;
    letter-spacing: 3px;
    text-align: left !important;
    font-weight: bold;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
 
  #brdmenu ul {
    background-image: url("https://debian-facile.org/style/Kao/background.png") !important;
    background-repeat: repeat !important;
  }
 
  #brdmenu {
    background: #1d4f73;
    background-image: -moz-linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: -webkit-linear-gradient(top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: -o-linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
    background-image: -ms-linear-gradient( top, #1d4f73 70%, #173d59 95%, #102c40 100%);
  }
 
 
/* BOITE DE MESSAGE RAPIDE */  
  .pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2, #pundelete .blockform h2 {
    background-color: transparent !important;
    position: relative !important;
    }
 

 
  /* ---------------------------------------- div#wiki_container ---------------*/
/* ----------------------- WIKI --------------------------*/
  #dokuwiki__content {
    font: 120% 'Zegoe Light - U', 'Nimbus Sans L', 'Droid Sans', 'Sawasdee', sans-serif !important;
  }
 
  .dokuwiki div.page {
    background: #14171A;
    color: #4e5a66;
    border: 1px solid #303030;
    border-radius: 2px;
    padding: 1.556em 2em 2em;
    margin-bottom: .5em;
    overflow: hidden;
    word-wrap: break-word;
  }
 
  #dokuwiki__header .tools div {
    height: 32px;
    padding: 0px 0px;
    background: #181818; /* couleur fond des titres du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    border-color: #0f1214; /* bordure inférieure du titre du tableau (Forum, Discussions, Messages, Dernier Message,...) */
    color: #a3a3a3; /* couleur texte du titre du tableau (Forum, Discussions, Messages, Dernier Message,...) */
  }
 
  #dw__toc {
    margin: -1.556em -2em .5em 1.4em;
    width: 17em;
    border-left: 1px solid #8cacbb;
    background: #2b2833;
    color: #a9bacb !important;
  }
 
  /* couleurs des liens du menu */
  #dw__toc a {
    color: #eb5368;
  }
 
  #dw__toc a:hover {
    color: white;
  }
 
 
  pre, code, samp, kbd {
    font-family: Consolas,"Andale Mono WT","Andale Mono","Bitstream Vera Sans Mono","Nimbus Mono L",Monaco,"Courier New",monospace;
    font-size: 1em;
    direction: ltr;
    text-align: left;
    background-color: #3f2833;
    color: #a9bacb;
    box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -moz-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    -webkit-box-shadow: inset 0px 0px 5px 0px #0c0e0f !important;
    border-radius: 2px;
  }
 
  #dokuwiki__content li .li, #dokuwiki__aside li .li {
    color: white;
  }
  #dokuwiki__usertools {
    background-color: #181818 !important;
    color: white;
  }
  #dokuwiki__usertools a {
    color: #a3a3a3 !important;
  }
 
 
}


Debian - KDE / Openbox / Windows10

Hors ligne

#5 27-03-2017 23:48:39

kyodev
Banni(e)
Lieu : Lyon
Distrib. : Debian
Noyau : probablement stretch
(G)UI : variable selon l'humeur de naguam
Inscription : 18-08-2013

Re : Thème CSS du forum Debian-Facile - WIP

juste une petite remarque, d'ordre général:

les thèmes sombres manquent souvent de contraste entre le texte et le fond. ça peut aussi se produire avec un thème clair.

le contraste est le premier niveau de manque d'accessiblité, pour les mal-voyants, ou les vieux, ou autres.

[mode aéré]

Hors ligne

#6 29-03-2017 12:08:21

Antidentity
Membre
Distrib. : See signature
Noyau : Linux amd64
(G)UI : KDE / Openbox
Inscription : 03-08-2016

Re : Thème CSS du forum Debian-Facile - WIP

Ta remarque est pertinente, je me lancerai aussi dans un thème plus contrasté un peu plus tard. Je garde un contraste moins prononcé pour celui-ci, il est destiné pour les petits yeux fatigués par la clarté de l'écran le soir (surtout dans les environnements manquant de lumière). Par contre, je dois modifier les couleurs de police pour le wiki (là, il y a, effectivement, un trop gros problème de contraste insuffisant).

Debian - KDE / Openbox / Windows10

Hors ligne

#7 29-03-2017 13:21:36

kyodev
Banni(e)
Lieu : Lyon
Distrib. : Debian
Noyau : probablement stretch
(G)UI : variable selon l'humeur de naguam
Inscription : 18-08-2013

Re : Thème CSS du forum Debian-Facile - WIP

c'est pas simple le contraste... mais il y a un minimum.
je ne parle  des fonds clair ou sombre, c'est la différence entre le texte et son arrière plan.
le contraste est seulement plus facile avec un fond clair

[mode aéré]

Hors ligne

Pied de page des forums