thèmes stylus {Silver, Aqua, Gold}

[WarLocG]

J'ai pas fini avec mais pour les impatients voila déjà de quoi faire mumuse avec votre nouveau thème.

Les mises à jours du thème viendront au fil du temps. Je ne poste pas d'images tant qu'il n'est pas finalisé.

Etat actuel: beta
Thème actuel: Gold

Code:

Code: [Sélectionner]

/*
 * par WarLocG(c) pour kali-linux.fr
 * dernière révision: juin 2019
 *
 * thème dark : code actuel: Gold (inclus les progress bar et codes couleurs des autres thèmes)
 */

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

/* format valide ... mais ca prend pas. Je le commente */
/*@document url(https://www.kali-linux.fr/forum/) {*/
/* format hack CSS */
@-moz-document url-prefix("https://www.kali-linux.fr/forum/"){
   
  /* carte couleur par thème (en cours...)
   
    Note: #aabbcc peut s'écrire #abc
   
    ------------------------------------------------------------------------------------------------
    | variable             |     magma |      aqua |    silver |      gold |      dusk |      dawn |
    ================================================================================================
    | bg-01                |   #------ |   #4ca68a |   #d2d2d2 |   #ecd17f |   #------ |   #------ |
    | bg-01-font           |   #------ |   #2f1e1e |   #353535 |   #2c2c2c |   #------ |   #------ |
    | bg-02                |   #------ |   #4c8f87 |   #c5c5c5 |   #ebc75e |   #------ |   #------ |
    | default-font         |   #------ |   #6fce9c |   #c3c3c3 |   #e6c355 |   #------ |   #------ |
    | alt-default-font     |   #------ |   #2c4a43 |   #666666 |   #6e5946 |   #------ |   #------ |
    | default-link         |   #------ |   #4cc473 |   #999999 |   #8e735b |   #------ |   #------ |
    | default-link-hover   |   #------ |   #abebc9 |   #b0b0b0 |   #fae6aa |   #------ |   #------ |
    | thread-user-link     |   #------ |   #4c9382 |   #9a9a9a |   #9b7250 |   #------ |   #------ |
    | bg-03                |   #------ |   #2f1e1e |   #353535 |   #2c2c2c |   #------ |   #------ |
    | bg-04                |   #------ |   #3e2d2d |   #3f3f3f |   #453135 |   #------ |   #------ |
    | button-active        |   #------ |   #66c451 |   #d2d2d2 |   #906e6b |   #------ |   #------ |
    | button-active-font   |   #------ |   #553322 |   #222222 |   #553333 |   #------ |   #------ |
    | button-standard      |   #------ |   #72c96b |   #969696 |   #b58a4a |   #------ |   #------ |
    | button-standard-font |   #------ |   #553322 |   #222222 |   #553333 |   #------ |   #------ |
    | button-hover         |   #------ |   #92dead |   #bcbcbc |   #d9a64f |   #------ |   #------ |
    | button-hover-font    |   #------ |   #553322 |   #222222 |   #553333 |   #------ |   #------ |
    | bg-05                |   #------ |   #44302c |   #434343 |   #483236 |   #------ |   #------ |
    | bg-06                |   #------ |   #3d2825 |   #3c3c3c |   #3d2f32 |   #------ |   #------ |
    | bg-07                |   #------ |   #539cab |   #9c9c9c |   #f8ac3c |   #------ |   #------ |
    | bg-07-font           |   #------ |   #ffffff |   #ffffff |   #ffffff |   #------ |   #------ |
    | highlight            |   #------ |   #ddeeff |   #ffffff |   #ffff88 |   #------ |   #------ |
    ------------------------------------------------------------------------------------------------
   
  */
   
  /* Variables couleurs (pour plus de facilité, juste modifier ici) */
  :root{
    --bg-01: #ecd17f;               /* début du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
    --bg-01-font: #2c2c2c;          /* police des catégories */
    --bg-02: #ebc75e;               /* fin du dégradé en fond (un peu plus foncé) + bouton submit */
     
    --default-font: #e6c355;        /* police par défaut */
    --alt-default-font: #6e5946;    /* police par défault 2 - liens + pied de page */
     
    --default-link: #8e735b;        /* liens par défaut */
    --default-link-hover: #fae6aa;  /* liens lors d'un passage de la souris */
     
    --thread-user-link: #9b7250;    /* liens des rubriques et des utilisateurs */
     
    --bg-03: #2c2c2c;               /* fond du forum - le gros morceau (partie sombre) */
    --bg-04: #453135;               /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
     
    --button-active: #906e6b;       /* boutons capsules - lorsqu'actif */
    --button-active-font: #533;     /* police des boutons capsules - lorsqu'actif */
     
    --button-standard: #b58a4a;     /* boutons capsules affichés - ni actif ni en hover */
    --button-standard-font: #533;   /* police des boutons capsules - ni actif ni en hover */
     
    --button-hover: #d9a64f;        /* boutons capsules - lorsqu'on passe la souris au dessus */
    --button-hover-font: #533;      /* police des boutons capsules - lorsqu'on passe la souris au dessus */
     
    --bg-05: #483236;               /* les rubriques - intervalles claires ('windowbg') */
    --bg-06: #3d2f32;               /* les rubriques - intervalles moyennes ('windowbg2') */
     
    --bg-07: #f8ac3c;               /* rubriques dans le centre de statistiques */
    --bg-07-font: #fff;             /* font des rubriques du cantre de statistiques */
     
    --highlight: #ff8;              /* les emphases dans la recherche */
     
     
    /* barres de progression par style */
     
    /*
     * Synthaxe:
     * linear-gradient (direction, couleur [pourcent%],couleur [pourcent%] ... );                       gradient linéaire
     * repeating-linear-gradient (direction, couleur [pourcent%], couleur [poucent%] ... );             gradient linéaire se répétant
     * radial-gradient (couleur [pourcent%], couleur [pourcent%] ... );                                 gradient circulaire
     */
     
    /* magma */
    --magma: linear-gradient(to bottom, hsl(50,100%,80%), hsl(20,100%,55%) 30%, hsl(20,100%,55%) 50%, hsl(20,100%,55%), hsl(50,100%,80%));
     
    /* aqua */
    --aqua: linear-gradient(to bottom, rgba(100,255,180,0.2), rgba(100,255,180,0.4) 30%, rgba(100,255,180,0.4) 50%, rgba(100,255,180,0.4), rgba(100,255,180,0.2));
     
    /* silver */
    --silver: repeating-linear-gradient(to bottom, #c6c6c6,#e6e6e6 60%);
     
    /* gold */
    --gold: repeating-linear-gradient(to bottom, #d0d040,#fff0b0 80%);
     
    /* dusk */
    --dusk: linear-gradient(to bottom, hsla(250,100%,80%,0.9), hsl(40,100%,50%) 55%, hsl(40,100%,80%), hsla(0,50%,20%,0.8));
     
    /* dawn */
    --dawn: linear-gradient(to bottom,hsla(340,50%,40%,0.9),hsla(10,50%,60%,0.9) 60%, hsla(10,50%,80%,0.9));
     
    /* Style des progress bar - changer ici */
    --progress-visual-style: var(--gold);         /* <- exemple var(--silver), changez juste le nom après les -- */
     
     
    /* Le dropmenu (comme ca pas de difficiles :p)*/
    /* light == 0% ->  noir, light == 100% -> blanc */     
    --light: 90;                                     /* <- selectionnez 0 ou 100 selon que vous voulez fond sombre ou clair, le % ne se met pas ici */
    --max: 100; /* ne pas modifier */
    /* style 1 */
    --style-1: linear-gradient(to right, hsla(0,0%,var(--light)%, 0.8), transparent);
    /* style 2 */
    --style-2: linear-gradient(to bottom, hsla(0,0%,100%,0.8), hsla(0,0%,0%,0.6));
    /* style 3 et 4 */
    --style-3-4: linear-gradient(to bottom, hsla(0,0%,var(--light)%,0.7), hsla(0,0%,var(--light)%,0.2));
     
    --dropmenu-hi-text: hsla(0, 0%, calc((var(--max) - var(--light)) *1%), 1);
     
    /* style de la dropmenu - changer ici */
    --dropmenu-hi-style: var(--style-3-4);          /* <- exemple var(--style-3-4), choix entre style-1, style-2 et style-3-4 */
     
    /* La fucking image nouveau */
    /* aqua -> rotate-hue(170deg) */
    /* silver -> grayscale(100%) */
    /* gold -> invert(100%) hue-rotate(205deg) contrast(180%) brightness(2.2) grayscale(50%) */
    /* autres couleurs -> hue-rotate(valeur en deg) */
    --img-filter: invert(100%) hue-rotate(205deg) contrast(180%) brightness(2.2) grayscale(50%);
     
  }
 
   
  /********************************************************************************************************************************************************
                                                                      Partie Métier
   ********************************************************************************************************************************************************/

 
  /* liens */
 
  a:link, a:visited{
    color: var(--default-link);
  }
 
  a:hover{
    color: var(--default-link-hover);
    text-decoration: none;
  }
   
  /* bouton capsule dans le dropmenu */
   
  .dropmenu li a.active{background: none;}
  .dropmenu li a.active span.firstlevel{
    color: var(--button-active-font);
    background: var(--button-active);
    padding: 0px 2px;
    border-radius: 5px;
  }
   
  /* menu */
  .dropmenu li
  .dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel{
    color: var(--button-hover-font);
    background: var(--button-hover);
    padding: 0px 2px;
    border-radius: 5px;     
  }
 
  /* sous-menu - fond */
  .dropmenu li:hover a.firstlevel{background-image: none;}
  .dropmenu li ul{background-image: none;}
  .dropmenu li ul li a{color: var(--button-hover-font);}
 
  .dropmenu + li{padding-bottom: 10px;}
  .dropmenu li:hover ul
  {
    opacity: 0.3;
    transition: opacity .1s ease;
    margin-top: 10px;
    margin-left: -30px;
    padding: 5px;
    border-radius: 1em;
    background: var(--button-standard);
  }
  .dropmenu li:hover ul:hover, .dropmenu li ul:hover
  {
    opacity: 1;
    transition-delay: 0s;
    border: 1px solid rgba(255,255,255,0.4);
  }
  /* fleche tooltip */
  .dropmenu li:hover ul::after
  {
    content: " ";
    position: absolute;
    margin-left: -8px;
    border-width: 8px;
    bottom: 100%;
    left: 18%;
    border-style: solid;
    border-color: transparent transparent var(--button-standard) transparent;
  }
 
  .dropmenu li:hover ul li{color: var(--button-hover-font); border:none;}
   
  /* menu - selection */
  .dropmenu li ul li a:hover{
    color: var(--dropmenu-hi-text);
    background: var(--dropmenu-hi-style);
    border-radius: 5px;
  }
   
  /* buttonlist - */
  .buttonlist ul li a.active{background: none;}
  .buttonlist ul li a.active span{
     background: var(--button-active);
     color: var(--button-active-font);
     padding:8px;
     border-radius: 1em;
  }
  .buttonlist ul li a{background: none;}
  .buttonlist ul li a span{
    background: var(--button-standard);
    color: var(--button-standard-font);
    padding: 8px;
    border-radius: 1em;
  }
  .buttonlist ul li a:hover{background: none;}
  .buttonlist ul li a:hover span{
    background: var(--button-hover);
    color: var(--button-hover-font);
    padding: 8px;
    border-radius: 1em;
  }
   
  /* liens dans les rubriques et threads + utilisateurs */
  .poster h4,
  .poster h4 a,
  .table_list tbody.content td.info a.subject{color: var(--thread-user-link);}
 
  /* liens du footer (vers credits, SMF, etc..) */
  a.new_win:link, a.new_win:visited, span.smalltext{
    color: var(--alt-default-font);
    text-decoration: none;
  }
 
  /* liens dans les signatures */
  a.bbc_link:link, a.bbc_link:visited{
    text-decoration: none;
    border: none;
  }
 
  /* quote et code */
 
  div.quoteheader div.topslice_quote,
  div.quoteheader div a,
  div.codeheader{
    color: var(--default-font);
    text-decoration: none;
  }
  blockquote.bbc_standard_quote,
  blockquote.bbc_alternate_quote
  {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    color: var(--default-font);
  }
  pre code.bbc_code{
    background-color: rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.5);
    font-size: 1em;
    color: var(--default-font);
    text-shadow: 0px 0px 1px #aaa;
  }
 
  /*
   ** sections et elements du forum **
   */
 
  div#header{
    padding-left: 20px;
    background: var(--bg-04);
    border-radius: 1em;
  }
 
  div#header div.frame{   
    background: var(--bg-04); 
    border-radius: 1em;
  }
 
  div.navigate_section, div.navigate_section ul{
    height: auto;
  }
 
  div#content_section{
    padding-left: 20px;
    background: var(--bg-03);
    border-radius: 1em;
  }
 
  div#content_section div.frame{
    background: var(--bg-03);   
    border-radius: 1em;
    padding-bottom: 5px;
    margin: 5px 0px 5px 0px;
  }
 
  div#footer_section,
  div#footer_section div.frame{
    background: none;
    padding: 0px 0px 0px;
  }
 
  body{
    color: var(--default-font);
    background-image: repeating-linear-gradient(var(--bg-01), var(--bg-02) 30%, var(--bg-02));
    background-repeat: repeat-x;
  }
 
  /* si vous preferez garder les petites bordures blanches entre les sections, commentez le border-collapse */
  table {
    border: none;
    /* border-collapse: collapse; */
  }
 
  /* intitules de sections */
 
  div.cat_bar{
    border: 1px solid var(--bg-03);
  }
   
  div.cat_bar,
  h3.catbg,
  h4.catbg,
  tr.catbg th
  {
    color: var(--bg-01-font);
    background: var(--bg-01) !important;
    border-bottom: 1px solid var(--bg-03);
  }
   
  .table_list tbody.header td a,
  h3.catbg .floatleft a,
  .modblock_left h3.catbg a,
  .modblock_right h3.catbg a,
  h4.catbg .floatright a,
  tr.catbg th a{color: var(--bg-01-font) !important;}
   
  .table_list tbody.header td a:hover,
  h3.catbg .floatleft a:hover,
  .modblock_left h3.catbg a:hover,
  .modblock_right h3.catbg a:hover,
  h4.catbg .floatright a:hover,
  tr.catbg th a:hover{color: var(--alt-defaut-font);}
 
  /* contenus */
   
  table.table_grid td {border: 1px solid var(--bg-03);}
   
  .windowbg span.topslice,
  .windowbg span.topslice span,
  .windowbg span.botslice span,
  .windowbg2 span.topslice,
  .windowbg2 span.topslice span,
  .windowbg2 span.botslice span{
    display: none;
  }
   
  .windowbg,
  .windowbg2,
  #preview_body,
  tr.windowbg2.whos_viewing td{
    background-color: var(--bg-03);
    margin-bottom: 1px;
  }
   
  /* couleurs des rubriques et threads normales */
   
  .windowbg .post_wrapper,
  tr.windowbg td,
  tr.windowbg2 td.icon.windowbg,
  tr.windowbg2 td.stats.windowbg,
  tr td.icon1.windowbg,
  tr td.icon2.windowbg,
  tr td.stats.windowbg,
  tr td.windowbg
  {
    color: var(--default-font);
    background-color: var(--bg-05);
    padding: 10px 0px 5px 5px;
    border-radius: 1em;
  }
   
  .windowbg2 .post_wrapper,
  tr.windowbg2 td,
  tr td.subject.windowbg2,
  tr td.lastpost.windowbg2,
  tr td.windowbg2
  {
    color: var(--default-font);
    background-color: var(--bg-06);
    padding: 10px 0px 5px 5px;
    border-radius: 1em;
  }
   
  /* couleurs des rubriques épinglées */
   
  tr td.icon1.stickybg,
  tr td.icon2.stickybg,
  tr td.stats.stickybg
  {
    color: var(--default-font);
    background-color: var(--bg-05);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.3));
    border-radius: 1em;
  }
   
  tr td.subject.stickybg2,
  tr td.subject.stickybg.locked_sticky2,
  tr td.lastpost.stickybg2,
  tr td.lastpost.stickybg.locked_sticky2
  {
    color: var(--default-font);
    background-color: var(--bg-06);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.3)); 
    border-radius: 1em;
  }
  .stickybg2 div{
    background-image: url(../Themes/default/images/icons/quick_sticky.gif);
    background-repeat: no-repeat;
    background-position: 98% 4px;
  }
  .locked_sticky2 div{
    background-image: url(../Themes/default/images/icons/quick_sticky_lock.gif);
    background-repeat: no-repeat;
    background-position: 98% 4px;
  }
   
  /* couleurs des rubriques verrouillées */
   
  tr td.icon1.lockedbg,
  tr td.icon2.lockedbg,
  tr td.stats.lockedbg
  {
    color: var(--default-font);
    background-color: var(--bg-05);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
    border-radius: 1em;
  }
   
  tr td.subject.lockedbg2,
  tr td.lastpost.lockedbg2
  {
    color: var(--default-font);
    background-color: var(--bg-06);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
    border-radius: 1em;
  }
  .lockedbg2 div{
     background-image: url(../Themes/default/images/icons/quick_lock.gif);
     background-repeat: no-repeat;
     background-position: 98% 4px;
  }
   
  .content, tr.windowbg, tr.windowbg2 td{
    border: none !important;
    padding: 0px 5px;
  }
  .subject div a img,
  .stickybg2 div a img,
  .lockedbg2 div a img{filter: var(--img-filter);}
   
  /* entête */
  span.upperframe,
  span.upperframe span,
  span.lowerframe,
  span.lowerframe span{background: none;}
   
  .roundframe {
      background-color: var(--bg-04);
      padding: 10px;
      border-radius: 1em;
      border: none;
  }
   
  /* contrôles et boutons */
  .button_submit, .button_reset{
      padding: 6px;
      color: var(--default-font);
      background-image: none;
      background-color: var(--button-active-font) !important;
      border: 1px solid var(--bg-02) !important;
  }
  .button_submit:hover, .button_reset:hover{
      padding: 6px;
      color: var(--bg-01-font);
      background-image: none;
      background-color: var(--bg-02) !important;
      border: 1px solid var(--bg-03) !important;
  }
 
  /* contenus speciaux (centre information + statistiques), sondages inclus */
 
  div.title_bar, div.title_barIC{
    padding-left: 9px;
    background: var(--bg-07);
  }
 
  #stats_left .windowbg2,
  #stats_right .windowbg2,
  #top_posters .windowbg2,
  #top_boards .windowbg2,
  #top_topics_replies .windowbg2,
  #top_topics_views .windowbg2,
  #top_topics_starter .windowbg2,
  #most_online .windowbg2
  {
    padding-top: 4px;
  }
   
  /* description */
  #topic_icons{margin: 1em 0px;}
  .description, .plainbox{
    background: var(--bg-04);
    padding: 7px;
    border: none;
    border-radius: 1em;
  }
 
  /* progressbar des statistiques */
  .statsbar div.bar {background: none;}
  .statsbar div.bar div {background-image: var(--progress-visual-style); border-radius: 3px;}
 
  /* de nombreux éléments utilisants la couleur par défaut */
  div.news.normaltext h2,
  .list_posts.smalltext, h5,
  .signature, .username h4,
  .poster ul li, .post .inner,
  div#poll_options.content h4,
  div#poll_options.content dt,
  div#poll_options.content p,
  .padding, .content.modbox ul li,
  ul li label,
  .content label,
  .content dl dd,
  .content dl dt,
  dd.statsbar span, 
  .table_grid tr.windowbg2 th{color: var(--default-font);}
  p.windowbg.description{color: var(--default-font); margin: 10px 0px;}
 
  h4.titlebg, tr.titlebg th,
  h3.titlebg
  {
    background: var(--bg-07) !important;
    color: var(--bg-07-font) ;
    border-bottom: 1px solid var(--bg-03);
  }
   
  /* page d'aide */
  #helpmain p, #helpmain li {color: var(--default-font);}
   
  /* recherche */
  .list_posts.double_height{color: var(--default-font);}
  .highlight{color: var(--highlight) !important;}
   
}

Le gros est fait. Les mises à jours continuent d'arriver.

J'ai placé un système de variables css var() dans le code donc les futurs thèmes en découlant seront plus faciles à gérer.

Afin de ne pas perdre les codes couleurs (sont dans la carte couleur de toute façon) mais pour les remettre plus rapidement je place les config couleurs par thème:

Aqua:

Code: [Sélectionner]

    --bg-01: #4ca68a;               /* début du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
    --bg-01-font: #2f1e1e;          /* police des catégories */
    --bg-02: #4c8f87;               /* fin du dégradé en fond (un peu plus foncé) + bouton submit */
     
    --default-font: #6fce9c;        /* police par défaut */
    --alt-default-font: #2c4a43;    /* police par défault 2 - liens + pied de page */
     
    --default-link: #4cc473;        /* liens par défaut */
    --default-link-hover: #abebc9;  /* liens lors d'un passage de la souris */
     
    --thread-user-link: #4c9382;    /* liens des rubriques et des utilisateurs */
     
    --bg-03: #2f1e1e;               /* fond du forum - le gros morceau (partie sombre) */
    --bg-04: #3e2d2d;               /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
     
    --button-active: #66c451;       /* boutons capsules - lorsqu'actif */
    --button-active-font: #532;     /* police des boutons capsules - lorsqu'actif */
     
    --button-standard: #75c28a;     /* boutons capsules affichés - ni actif ni en hover */
    --button-standard-font: #532;   /* police des boutons capsules - ni actif ni en hover */
     
    --button-hover: #92dead;        /* boutons capsules - lorsqu'on passe la souris au dessus */
    --button-hover-font: #532;      /* police des boutons capsules - lorsqu'on passe la souris au dessus */
     
    --bg-05: #44302c;               /* les rubriques - intervalles claires ('windowbg') */
    --bg-06: #3d2825;               /* les rubriques - intervalles moyennes ('windowbg2') */
     
    --bg-07: #539cab;               /* rubriques dans le centre de statistiques */
    --bg-07-font: #fff;             /* font des rubriques du cantre de statistiques */
     
    --highlight: #def;              /* les emphases dans la recherche */

Silver:

Code: [Sélectionner]

    --bg-01: #d2d2d2;               /* début du dégradé en fond */
    --bg-02: #c5c5c5;               /* fin du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
    --bg-02-font: #353535;          /* police des catégories */
     
    --default-font: #c3c3c3;        /* police par défaut */
    --alt-default-font: #666;       /* police par défault 2 - liens + pied de page */
     
    --default-link: #999;           /* liens par défaut */
    --default-link-hover: #b0b0b0;  /* liens lors d'un passage de la souris */
     
    --thread-user-link: #9a9a9a;    /* liens des rubriques et des utilisateurs */
     
    --bg-03: #353535;               /* fond du forum - le gros morceau (partie sombre) */
    --bg-04: #3f3f3f;               /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
     
    --button-active: #d2d2d2;       /* boutons capsules - lorsqu'actif */
    --button-active-font: #222;     /* police des boutons capsules - lorsqu'actif */
     
    --button-standard: #969696;     /* boutons capsules affichés - ni actif ni en hover */
    --button-standard-font: #222;   /* police des boutons capsules - ni actif ni en hover */
     
    --button-hover: #bcbcbc;        /* boutons capsules - lorsqu'on passe la souris au dessus */
    --button-hover-font: #222;      /* police des boutons capsules - lorsqu'on passe la souris au dessus */
     
    --bg-05: #434343;               /* les rubriques - intervalles claires ('windowbg') */
    --bg-06: #3c3c3c;               /* les rubriques - intervalles moyennes ('windowbg2') */
     
    --bg-07: #9c9c9c;               /* rubriques dans le centre de statistiques */
    --bg-07-font: #fff;             /* font des rubriques du cantre de statistiques */
     
    --highlight: #fff;              /* les emphases dans la recherche */

Gold

Code: [Sélectionner]

    --bg-01: #ecd17f;               /* début du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
    --bg-01-font: #2c2c2c;          /* police des catégories */
    --bg-02: #ebc75e;               /* fin du dégradé en fond (un peu plus foncé) + bouton submit */
     
    --default-font: #e6c355;        /* police par défaut */
    --alt-default-font: #6e5946;    /* police par défault 2 - liens + pied de page */
     
    --default-link: #8e735b;        /* liens par défaut */
    --default-link-hover: #fae6aa;  /* liens lors d'un passage de la souris */
     
    --thread-user-link: #9b7250;    /* liens des rubriques et des utilisateurs */
     
    --bg-03: #2c2c2c;               /* fond du forum - le gros morceau (partie sombre) */
    --bg-04: #453135;               /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
     
    --button-active: #906e6b;       /* boutons capsules - lorsqu'actif */
    --button-active-font: #533;     /* police des boutons capsules - lorsqu'actif */
     
    --button-standard: #b58a4a;     /* boutons capsules affichés - ni actif ni en hover */
    --button-standard-font: #533;   /* police des boutons capsules - ni actif ni en hover */
     
    --button-hover: #d9a64f;        /* boutons capsules - lorsqu'on passe la souris au dessus */
    --button-hover-font: #533;      /* police des boutons capsules - lorsqu'on passe la souris au dessus */
     
    --bg-05: #483236;               /* les rubriques - intervalles claires ('windowbg') */
    --bg-06: #3d2f32;               /* les rubriques - intervalles moyennes ('windowbg2') */
     
    --bg-07: #f8ac3c;               /* rubriques dans le centre de statistiques */
    --bg-07-font: #fff;             /* font des rubriques du cantre de statistiques */
     
    --highlight: #ff8;              /* les emphases dans la recherche */


[ZeR0-@bSoLu]

Noooooooooooooooooon le silver a triomphé !
merci pour ton travail

[WarLocG]

Quand celui-ci sera terminé, aqua se fera qu'en quelques petites minutes grace aux var que j'ai inclu dans la source

J'ai d'ailleurs une surprise pour ton thème aqua, regarde comment j'ai refait les progressbar sous Silver:

J'ai l'intention d'utiliser du rgba() sous aqua pour jouer avec les opacités et apporter un effet de fluide Et pas la moindre image, c'est que du CSS.

[Snk]

Noooooooooooooooooon le silver a triomphé !
merci pour ton travail

Bardem, avait la lourde tâche de trancher, et de nous départager, finalement, il a choisi son camp!!! 
Bon, vu qu'au final, on aura plusieurs choix, on te pardonne. Perso, j'aime bien changer régulièrement pour éviter la monotonie du truc...
C'est vrai que le silver est cool, mais les écriture en bleu kali aurait été top (j'essayerais d'arranger ça moi-même, en cherchant un peu!)

En tout cas, un grand merci a WarLocG qui va nous permettre d'avoir quelque chose de plus moderne et de bien cool!!

PS @WarLocG: Pour mon article sur les gestionnaires de fenêtres, je fini de m'occuper d'open-box, il me reste a rédiger pour avoir le menu de kali et 2 ou 3 détails...Si j'ai des soucis, faudrait que je vois avec Coyotus mais je veux pas l'ennuyer, je vais d'abord chercher. C'est pas un truc qui me dérange de chercher... 
Après je m'attaque a fluxbox mais je ne connais pas du tout celui-là, je suis encore en pleine recherche, grâce tes liens et linuxtrack, mais je n'ai pas encore vraiment commencé... En cas de soucis, je ferais sûrement appel a toi, je pense que tu es le mieux placé pour.

Tchao   
Snk

[WarLocG]

Pas de souci pour fluxbox, j'ai pas terminé la suite du tuto fluxbox sur les styles mais le gros est dans les liens, tout le travail reviendrait à juste traduire ce qui est écrit en anglais pour le retransposer en français, et tu as des éléments qui ne servent même plus aussi dedans, comme slit qui est devenu obsolète et la taskbar que tu peut remplacer facilement par tint2 par exemple

Pour les polices en bleu ca sera pas difficile de les adapter quand j'aurais terminé

/* Variables couleurs (pour plus de facilité, juste modifier ici) */
  :root{
    --bg-01: #d2d2d2; /* début du dégradé en fond */
    --bg-02: #c5c5c5; /* fin du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
    --bg-02-font: #353535; /* police des catégories */
     
    --default-font: #c3c3c3; /* police par défaut */
     
    --bg-03: #353535; /* fond du forum - le gros morceau */
    --bg-04: #3f3f3f; /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
     
  }

Tous les code couleurs iront ici dont les polices qui se terminent en -font

Pour le moment j'ai des images avec des positions relatives qui m'ennuient un peu (la grosse capsule orange dans l'entête de connexion pour ne citer que lui)  et puis y a pas mal de test, je check partout depuis que le style ne reprend plus du thème par défaut, il y a beaucoup plus de code à modifier dedans. Ca prend un peu plus de temps que prévu mais les autres thèmes ca filera comme une lettre à la poste

[Snk]

Okay cool... Ça devrait plus être très compliqué, une fois que tu auras fini, je me débrouillerais!   
Dès que j'ai fini les détails qu'il me manque pour que ça soit propre pour openbox, Je pars sur fluxbox, je l'installe, et je vois pour la conf, j'essayerais de me débrouiller mais si besoin (car je connais vraiment pas) je ferais appel a toi.

Tchao
Snk

[ZeR0-@bSoLu]

Cool que le tuto soit encore plus fourni bien joué à vous les gars

Pour le stylus moi tant que j'ai pas mon aqua je boude

[Bardem]

Bardem, avait la lourde tâche de trancher, et de nous départager, finalement, il a choisi son camp!!! 

Mouhahahah (rire diabolique et beliqueux)

Ouai bon désolé les gars, il fallait choisir !
Après, ton idée est intéressante SNK, pourquoi pas après un certains laps de temps, alterner les thèmes ? Enfin si cela ne demande pas trop de temps à passer dessus.

Je suit de près les évolutions du forum et je suis contemplatif de tous vos investissements... J'aimerai pouvoir en faire autant, mais je n'ai pas autant de compétence, je suis dans les apprentissages du débutant ! En tout cas... chapeau...!

[ZeR0-@bSoLu]

Non mais après avec l'extension stylus tu peux changer ton thème quand tu veux bardem

Je me vengeraiiiiiiiiiiiiiiiii moouhahahahahahahah

merci a WarlockG

[Bardem]

Non mais après avec l'extension stylus tu peux changer ton thème quand tu veux bardem

Je me vengeraiiiiiiiiiiiiiiiii moouhahahahahahahah

merci a WarlockG

Exact, mais je n'ai vu l'info qu'après sur l'autre thread... 
@Zer0 : "je l'aurai un jour, je l'aurai !" 

[ZeR0-@bSoLu]

ça va saaaaaaigner !

[WarLocG]

"Tu me le payeras, gadget !! .. Heu je veux dire, grenier !!
 Oh ? Une feuille ... * crash boom * "

[ZeR0-@bSoLu]

Our battle will be legendary !

[Snk]

Après, ton idée est intéressante SNK, pourquoi pas après un certains laps de temps, alterner les thèmes ? Enfin si cela ne demande pas trop de temps à passer dessus.

Je disais juste qu'avec stylus tu pouvais changer ton thème quand tu le voulais... Une fois que WarLocG nous aura arrangé le truc, ça sera a nous de gérer les différents thêmes, ou si tu veux, en arranger un pour qu'il soit a ton gout... (en changeant les couleurs par exemple...)

[ZeR0-@bSoLu]

exactement c'est ça qui est pratique à terme l'idée serait de rendre ça natif sur le forum mais bon ça prendra du temps