Auteur Sujet: Le forum vu sous un angle différent avec stylus  (Lu 25644 fois)

0 Membres et 2 Invités sur ce sujet

Hors ligne WarLocG

  • Contributeur de Kali-linux.fr
  • Membre sérieux
  • *****
  • Messages: 475
  • +70/-0
  • Spé Code Python Java Bash
Le forum vu sous un angle différent avec stylus
« le: 13 mai 2016 à 21:50:18 »
Ce n'est pas vraiment une création, plutot une adaptation.

J'ai retravaillé la CSS du forum sous l'extension stylish stylus afin de lui donner un look un peu plus en harmonie avec le logo KALI LINUX.

Egalement, j'ai mis mes efforts à éliminer un maximum d'images non nécessaires afin d'obtenir un look épuré tout en restant dans l'esprit du look d'origine. J"espère que ca vous plaira.

Alors, selon les goûts, je ne sais pas si vous préfériez avec ou sans le border-collapse entre les différentes valves, j'ai mis un commentaire dans ma source stylish stylus ainsi vous pourrez adapter avec celui de votre convenance.

source à copier dans le mode édition de stylish stylus:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("kali-linux.fr") {
 
  /* liens */
 
  a:link, a:visited{
    color: #ff8020;
  }
 
  a:hover{
    color: #b0b0b0;
    text-decoration: none;
  }
 
  /* liens du footer (vers credits, SMF, etc..) */
  a.new_win:link, a.new_win:visited, span.smalltext{
    color: #507080;
    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 a, div.codeheader a{
    color: #222;
    text-decoration: none;
  }
 
  /*
   ** sections et elements du forum **
   */
 
  div#header{
    padding-left: 20px; 
    background: #eee;
    border-radius: 1em;
  }
 
  div#header div.frame{   
    background: #eee;   
    border-radius: 1em;
  }
 
  div.navigate_section, div.navigate_section ul{
    height: auto;
  }
 
  div#content_section{
    padding-left: 20px;
    background: #fff;
    border-radius: 1em;
  }
 
  div#content_section div.frame{
    background: #fff;   
    border-radius: 1em;
    padding-top: -3px;
    padding-bottom: 5px;
    margin: 5px 0px 5px 0px;
  }
 
  div#footer_section, div#footer_section div.frame{
    background: none;
    padding: 0px 0px 0px;
  }
 
  body{
    background: #004050 url("http://pix.toile-libre.org/upload/original/1463086124.png");
    background-repeat: repeat-x;
  }
 
  /* si vous preferez garder les petites bordures blanches entre les sections, commentez le border-collapse (par defaut) */
  table {
    border: none;
    /* border-collapse: collapse; */
  }
 
  /* intitules de sections */
 
  div.cat_bar{
    border: 1px solid #fff;
  }
 
 
  div.cat_bar, h3.catbg{
    background: #002030 !important;
  }
 
  /* contenus */
 
  .content, tr.windowbg, tr.windowbg2 td{
    border: none !important;
    padding: 0px 5px;
  }
 
  /* contenus speciaux (centre information + statistiques) */
 
  div.title_bar, div.title_barIC{
    padding-left: 9px;
    background: #70a0c0;
  }
 
  h4.titlebg{
    background: #70a0c0 !important;
    color: #fff !important;
  }

}
Je précise que stylish stylus fonctionne en local, les modifications ne se verront que sur votre machine.

Aperçu avec le border-collapse désactivé (par défaut):


Aperçu avec le border-collapse activé (suppression des petites bordures blanche):


Aperçu du bas de la page:


Aperçu de la page des statistiques:


Il me reste encore un petit détail sur la page des statistiques à régler et peut-être quelques détails éparses mais à ce point dans l'ensemble ma source peut déjà être partagée.
« Modifié: 22 juin 2019 à 14:09:24 par WarLocG »
A lire avant de poser vos questions : http://www.linux-france.org/article/these/smart-questions/smart-questions-fr.html
Pour les questions de base sous debian : https://debian-facile.org/index-df.php
Veuillez utiliser la fonction Rechercher avant de poster.

Hors ligne kcdtv

  • Contributeur de Kali-linux.fr
  • Membre VIP
  • *****
  • Messages: 640
  • +61/-3
    • crack-wifi.com
Re : Le forum vu sous un angle différent avec stylish
« Réponse #1 le: 14 mai 2016 à 14:19:57 »
Nice!   :)

Hors ligne Sghost1405

  • Contributeur de Kali-linux.fr
  • Membre sérieux
  • *****
  • Messages: 488
  • +27/-1
  • Je suis ce que je sais.
Re : Le forum vu sous un angle différent avec stylish
« Réponse #2 le: 14 mai 2016 à 16:20:51 »
Correct :)

Hors ligne WarLocG

  • Contributeur de Kali-linux.fr
  • Membre sérieux
  • *****
  • Messages: 475
  • +70/-0
  • Spé Code Python Java Bash
Re : Le forum vu sous un angle différent avec stylish
« Réponse #3 le: 21 juin 2019 à 11:41:32 »
Mise à jour du thème de forum

/*
 * par WarLocG(c) pour kali-linux.fr
 * dernière révision: juin 2019
 */

@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 domain(kali-linux.fr), url-prefix(https://www.kali-linux.fr/forum/){
 
  /* liens */
 
  a:link, a:visited{
    color: #ff8020;
  }
 
  a:hover{
    color: #b0b0b0;
    text-decoration: none;
  }
 
  /* liens du footer (vers credits, SMF, etc..) */
  a.new_win:link, a.new_win:visited, span.smalltext{
    color: #507080;
    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 a, div.codeheader a{
    color: #222;
    text-decoration: none;
  }
 
  /*
   ** sections et elements du forum **
   */
 
  div#header{
    padding-left: 20px; 
    background: #eee;
    border-radius: 1em;
  }
 
  div#header div.frame{   
    background: #eee;   
    border-radius: 1em;
  }
 
  div.navigate_section, div.navigate_section ul{
    height: auto;
  }
 
  div#content_section{
    padding-left: 20px;
    background: #fff;
    border-radius: 1em;
  }
 
  div#content_section div.frame{
    background: #fff;   
    border-radius: 1em;
    padding-top: 3px; /* signe négatif retiré pour être compatible avec stylus 1.4.20 */
    padding-bottom: 5px;
    margin: 5px 0px 5px 0px;
  }
 
  div#footer_section,
  div#footer_section div.frame{
    background: none;
    padding: 0px 0px 0px;
  }
 
  body{
    background: #004050 url("http://pix.toile-libre.org/upload/original/1463086124.png");
    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 #fff;
  }
   
  div.cat_bar,
  h3.catbg,
  tr.catbg th
  {
    background: #002030 !important;
  }
 
  /* contenus */
   
  .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: #fff;
    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
  {
    color: #000;
    background-color: #e7eaef; /* default from theme */
    padding: 10px 0px 5px 5px;
    border-radius: 1em;
  }
   
  .windowbg2 .post_wrapper,
  tr.windowbg2 td,
  tr td.subject.windowbg2,
  tr td.lastpost.windowbg2
  {
    color: #000;
    background-color: #f0f4f7; /* default from theme */
    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: #000;
    background-color: #e8d8cf; /* default from theme */
    border-radius: 1em;
  }
   
  tr td.subject.stickybg2,
  tr td.lastpost.stickybg2
  {
    color: #000;
    background-color: #f2e3d9; /* default from theme */
    border-radius: 1em;
  }
   
  /* couleurs des rubriques verrouillées */
   
  tr td.icon1.lockedbg,
  tr td.icon2.lockedbg,
  tr td.stats.lockedbg
  {
    color: #000;
    background-color: #c8d1d2;
    border-radius: 1em;
  }
   
  tr td.subject.lockedbg2,
  tr td.lastpost.lockedbg2
  {
    color: #000;
    background-color: #d4dce2;
    border-radius: 1em;
  }
   
  .content, tr.windowbg, tr.windowbg2 td{
    border: none !important;
    padding: 0px 5px;
  }
 
  /* contenus speciaux (centre information + statistiques) */
 
  div.title_bar, div.title_barIC{
    padding-left: 9px;
    background: #70a0c0;
  }
 
  #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;
  }
 
  h4.titlebg, tr.titlebg th{
    background: #70a0c0 !important;
    color: #fff !important;
  }
}

Parmi les correctifs:
 - nettoyage de quelques images qui trainait encore dans des span pour les arrondis présentes dans les threads ainsi que dans les boards
 - rajouts des rubriques épinglées et verrouillées non présentes auparavant (j'ai adapté la couleur des rubriques verrouillés qui étaient trop proches des rubriques normales (pour les bleus foncés))
 - et les stats sont également finalisés, le petit truc qui restait à faire dedans est en ordre
normalement j'ai rien laissé trainé mais je garde l'oeil ouvert si quelque chose doit encore être adapté.

Parmis quelques éléments n'ayant pas eu besoin de refonte pour le thème actuel mais qui nécessiteront des transformations dans les thèmes étendus:
 - les citations et code
 - différents contrôles comme des boutons

Ca devrait fonctionner avec tout plugin modifiant la CSS néanmoins stylish n'est plus recommandé pour cause de collecte de donnée utilisateur.

Note: stylus 1.4.20 fonctionne pour ma part pour ce qui est de conserver le nouveau style, au delà y a un gros bug sur la zone d'édition et d'autres blocages dans les fonctionalités semblables à des problèmes de lecture ou de permission. Je peux néanmoins confirmer que cette version-là fonctionne à ce jour. La 1.4.20 corrige également le problème de police "inexistante" sous linux, je vais donc la considérer comme branche stable.

Le plugin stylus est disponible a cette adresse, il faudra juste désactiver la mise à jour automatique pour ce plugin. https://addons.mozilla.org/fr/firefox/addon/styl-us/versions/ et prendre la version 1.4.20. Cependant si les versions 1.5.3 et plus fonctionnent chez vous c'est pas plus mal :)

Testé sous mozilla firefox 60.7.2esr
« Modifié: 22 juin 2019 à 18:46:09 par WarLocG »
A lire avant de poser vos questions : http://www.linux-france.org/article/these/smart-questions/smart-questions-fr.html
Pour les questions de base sous debian : https://debian-facile.org/index-df.php
Veuillez utiliser la fonction Rechercher avant de poster.

En ligne ZeR0-@bSoLu

  • Administrateur
  • Membre Elite
  • *****
  • Messages: 2894
  • +167/-5
  • Pentest - Arch - Python - Kali
    • Kali-fr
Re : Le forum vu sous un angle différent avec stylish
« Réponse #4 le: 21 juin 2019 à 11:44:03 »
Merci pour ton travail :)
je regarde ça dans la journée
Mess  with the bests.
Die like the rest.

Hors ligne WarLocG

  • Contributeur de Kali-linux.fr
  • Membre sérieux
  • *****
  • Messages: 475
  • +70/-0
  • Spé Code Python Java Bash
Re : Le forum vu sous un angle différent avec stylus
« Réponse #5 le: 22 juin 2019 à 17:05:11 »
Aperçus:

Thème actuel:

Forum - page d'accueil


lien externe: http://zupimages.net/viewer.php?id=19/25/9zt1.png

Rubriques (+ épinglés et verrouillés)


lien externe: http://zupimages.net/viewer.php?id=19/25/h8ih.png

Discussions et citations


lien externe: http://zupimages.net/viewer.php?id=19/25/fhpw.png

Centre de contrôle et statistiques

lien externe: http://zupimages.net/viewer.php?id=19/25/txaw.png

En travaux / prévision:

Mes travaux sur les autres thèmes 'dark' (avec un petit spoil)


lien externe: http://zupimages.net/viewer.php?id=19/25/awx2.png

Le négatif servant de base aux thèmes dark


lien externe: http://zupimages.net/viewer.php?id=19/25/dbd7.png

Quelques idées de thèmes (pour donner des idées)

Magma (thème dark)

lien externe: http://zupimages.net/viewer.php?id=19/25/wejr.png

Aqua (thème dark)

lien externe: http://zupimages.net/viewer.php?id=19/25/p4ow.png

Silver (thème dark)

lien externe: http://zupimages.net/viewer.php?id=19/25/56mm.png

Gold (thème dark)

lien externe: http://zupimages.net/viewer.php?id=19/25/kw5p.png

Dusk (thème dark)

lien externe: http://zupimages.net/viewer.php?id=19/25/yqp9.png

Dawn (thème light)

lien externe: http://zupimages.net/viewer.php?id=19/25/u9yv.png

Ca devrait suffire avec ca, c'est suffisant pour démarrer un sondage.

-- soumis à éditions --
« Modifié: 22 juin 2019 à 21:57:16 par WarLocG »
A lire avant de poser vos questions : http://www.linux-france.org/article/these/smart-questions/smart-questions-fr.html
Pour les questions de base sous debian : https://debian-facile.org/index-df.php
Veuillez utiliser la fonction Rechercher avant de poster.

En ligne ZeR0-@bSoLu

  • Administrateur
  • Membre Elite
  • *****
  • Messages: 2894
  • +167/-5
  • Pentest - Arch - Python - Kali
    • Kali-fr
Re : Le forum vu sous un angle différent avec stylus
« Réponse #6 le: 22 juin 2019 à 17:39:04 »
j'aime beaucoup le négatif :o
Mess  with the bests.
Die like the rest.

Hors ligne Snk

  • Modérateur
  • Membre Elite
  • *****
  • Messages: 1593
  • +112/-1
  • Multiboot Linux - Kali en Amateur - python(A)
Re : Le forum vu sous un angle différent avec stylus
« Réponse #7 le: 22 juin 2019 à 17:47:01 »
Salut.   :)

Super sympa, j'aime bien le négatif aussi...
Du coup, j'ai installé stylus, ça m'a donné envie de voir comment ça marche.
Merci pour ton boulot.   8)
A l'époque c'était système_D (Comme démerdes-toi!)
On ne gagne pas sa Liberté , On choisi de la prendre!
Membre du P.L.F, Bill Gate$ suck'$.
Anti GAFAM - Brûlons les tous!
Eux, c'est les pommes, et vous les poires...

Hors ligne WebMaster

  • Administrateur
  • Membre régulier
  • *****
  • Messages: 143
  • +14/-2
    • Kali linux FR
Re : Le forum vu sous un angle différent avec stylus
« Réponse #8 le: 22 juin 2019 à 18:46:13 »
Hum...  :-\

sans vouloir vous décevoir... je trouve le theme négatif un peu trop radical en l'état... On est des white hacker ou on l'est pas!?   ;D

Enfin... les gouts et le couleurs c'est très personnel...

En ligne ZeR0-@bSoLu

  • Administrateur
  • Membre Elite
  • *****
  • Messages: 2894
  • +167/-5
  • Pentest - Arch - Python - Kali
    • Kali-fr
Re : Le forum vu sous un angle différent avec stylus
« Réponse #9 le: 22 juin 2019 à 18:50:10 »
*sifflote*

Oui après c'est très personnel... faudrais installer un plugin pour que chaque utilisateur puisse avoir le choix de ton propre thème ça serait plus un débat comme ça haha
Mess  with the bests.
Die like the rest.

Hors ligne WarLocG

  • Contributeur de Kali-linux.fr
  • Membre sérieux
  • *****
  • Messages: 475
  • +70/-0
  • Spé Code Python Java Bash
Re : Le forum vu sous un angle différent avec stylus
« Réponse #10 le: 22 juin 2019 à 18:57:16 »
Oui pour le moment je suis plus dans les suggestions, le thème 'dark' et negatif est un peu une mise en pratique de la réponse que j'avais donné ici https://www.kali-linux.fr/forum/index.php/topic,6329.msg26777.html#msg26777. Je ferai un sondage le moment venu pour prendre un peu la température sur quels thèmes auront la quote (et sinon je suis surpris que le négatif ait déjà autant la quote) ;)
A lire avant de poser vos questions : http://www.linux-france.org/article/these/smart-questions/smart-questions-fr.html
Pour les questions de base sous debian : https://debian-facile.org/index-df.php
Veuillez utiliser la fonction Rechercher avant de poster.

En ligne ZeR0-@bSoLu

  • Administrateur
  • Membre Elite
  • *****
  • Messages: 2894
  • +167/-5
  • Pentest - Arch - Python - Kali
    • Kali-fr
Re : Le forum vu sous un angle différent avec stylus
« Réponse #11 le: 22 juin 2019 à 19:23:47 »
J'ai hâte de voir les résultats du sondage haha
Mess  with the bests.
Die like the rest.

Hors ligne Snk

  • Modérateur
  • Membre Elite
  • *****
  • Messages: 1593
  • +112/-1
  • Multiboot Linux - Kali en Amateur - python(A)
Re : Re : Le forum vu sous un angle différent avec stylus
« Réponse #12 le: 22 juin 2019 à 19:56:58 »
Hum...  :-\
sans vouloir vous décevoir... je trouve le thème négatif un peu trop radical en l'état... On est des white hacker ou on l'est pas!?   ;D
Enfin... les goûts et le couleurs c'est très personnel...

Après les goûts et les couleurs! Heureusement que le faite d'aimer les thèmes darks ne font pas de toi un black-hacker! C'est un raccourci qui m'étonne de ta part?!   :o  (je te taquine)
Moi, j'aime beaucoup les thèmes sombres, surtout parce que ça "pète" moins aux yeux, mais je trouve aussi cela plus joli, j'en ai toute une collection pour kali que je rajoute a chaque fois (du gris au noir) afin de changer régulièrement pour éviter la monotonie d'un thème unique (idem pour les icones).

Sinon un plugin serait intéressant...   :P
« Modifié: 23 juin 2019 à 14:21:23 par Snk »
A l'époque c'était système_D (Comme démerdes-toi!)
On ne gagne pas sa Liberté , On choisi de la prendre!
Membre du P.L.F, Bill Gate$ suck'$.
Anti GAFAM - Brûlons les tous!
Eux, c'est les pommes, et vous les poires...

En ligne ZeR0-@bSoLu

  • Administrateur
  • Membre Elite
  • *****
  • Messages: 2894
  • +167/-5
  • Pentest - Arch - Python - Kali
    • Kali-fr
Re : Le forum vu sous un angle différent avec stylus
« Réponse #13 le: 22 juin 2019 à 20:53:42 »
Hum...  :-\
sans vouloir vous décevoir... je trouve le thème négatif un peu trop radical en l'état... On est des white hacker ou on l'est pas!?   ;D
Enfin... les goûts et le couleurs c'est très personnel...

Après les goûts et les couleurs! Heureusement que le faite d'aimer les thèmes darks ne font pas de toi un black-hacker! C'est un raccourci qui m'étonne de ta part?!   :o  (je te taquine)
Moi, j'ai beaucoup les thèmes sombres, surtout parce que ça "pète" moins aux yeux, mais je trouve aussi cela plus joli, j'en ai toute une collection pour kali que je rajoute a chaque fois (du gris au noir) afin de changer régulièrement pour éviter la monotonie d'un thème unique (idem pour les icones).

Sinon un plugin serait intéressant...   :P


entièrement d'accord ça pique moins les yeux et je trouve ça plus sobre et cool pour ma part
Mess  with the bests.
Die like the rest.

Hors ligne WebMaster

  • Administrateur
  • Membre régulier
  • *****
  • Messages: 143
  • +14/-2
    • Kali linux FR
Re : Re : Re : Le forum vu sous un angle différent avec stylus
« Réponse #14 le: 22 juin 2019 à 20:56:09 »
Heureusement que le faite d'aimer les thèmes darks ne font pas de toi un black-hacker! C'est un raccourci qui m'étonne de ta part?!   :o  (je te taquine)

C'est même pas un racourcis... c'est de la bétise.. juste une bad joke.

Sinon pour l'argument... kali.org et son forum (https://forums.kali.org/) ont adopté une identité visuelle au ton claire et épurée...