Forum Casio - Thèmes shoutbox par Dark storm

Forum Casio - Vie communautaire

Index du Forum » Vie communautaire » Thèmes shoutbox

Dark storm Hors ligne Labélisateur Points: 11634 Défis: 176 Message

Thèmes shoutbox

Posté le 14/05/2020 10:42

Vu qu'on est plusieurs à utiliser des thèmes customs sur la shoutbox, je vous propose de les partager ici (plutôt que sur une page random d'un topic random).

Pour les utiliser, il faut installer une extension de navigateur. Je recommande Stylus, disponible pour la majeure partie des navigateurs (Firefox + Chrome et ses dérivés).

Créez un style pour la page https://www.planet-casio.com/Fr/shoutbox*, puis copiez le contenu du style.

Essayez de mettre des screenshots avec le code.

Dark storm Hors ligne Labélisateur Points: 11634 Défis: 176 Message

Citer : Posté le 14/05/2020 10:44 | # | Fichier joint

Du coup je commence.

J'utilise les variables CSS pour faciliter le changement de thème, en me basant sur les principes de base16.

Vous pouvez commenter/décommenter les blocs pour trouver le style qui vous plait parmi base16-eighties (cf le screen de Breizh ci-dessous) ou Nord :

:root {
    /* base16-eighties *
    --base00: #2d2d2d;
    --base01: #393939;
    --base02: #515151;
    --base03: #747369;
    --base04: #a09f93;
    --base05: #d3d0c8;
    --base06: #e8e6df;
    --base07: #f2f0ec;
    --base08: #f2777a;
    --base09: #f99157;
    --base0A: #ffcc66;
    --base0B: #99cc99;
    --base0C: #66cccc;
    --base0D: #6699cc;
    --base0E: #cc99cc;
    --base0F: #d27b53; /**/


    /* Nord */
    --nord00: #2e3440;
    --nord01: #3b4252;
    --nord02: #434c5e;
    --nord03: #4c566a;
    --nord04: #d8dee9;
    --nord05: #e5e9f0;
    --nord06: #eceff4;
    --nord07: #8fbcbb;
    --nord08: #88c0d0;
    --nord09: #81a1c1;
    --nord10: #5e81ac;
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;

    --base00: var(--nord00);
    --base01: var(--nord01);
    --base02: var(--nord02);
    --base03: var(--nord04);
    --base04: var(--nord09);
    --base05: var(--nord05);
    --base06: var(--nord06);
    --base07: var(--nord07);
    --base08: var(--nord11);
    --base09: var(--nord09);
    --base0A: var(--nord04);
    --base0B: var(--nord14);
    --base0C: var(--nord12);
    --base0D: var(--nord13);
    --base0E: var(--nord15);
    --base0F: var(--nord08); /**/
}

/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/

/* CSS : Zezombye, Dark Storm
* Couleurs : base16-eighties
* Adaptation : Breizh_Craft
*/

/*set a background for the shoutbox here*/
#shoutbox {
    background-color: var(--base00);
    background-size: cover;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-width: 0px;
    border-left-width: 0px;
    border-left-color: transparent;
}
#shoutbox .messagesContainer {
    scrollbar-color: var(--base02) var(--base01);
}

/*normal messages*/
#shoutbox .msg {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--base05);
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
}
#shoutbox .msg:hover {
    background-color: var(--base02);
}

/*messages with your username mentioned*/
#shoutbox .msg.ref {
    background-color: var(--base01);
    border-bottom-color: transparent;
    color: var(--base06);
}
#shoutbox .msg.ref:hover {
    background-color: var(--base02);
    color: var(--base05);
}

/* Align messages and pseudos */
#shoutbox .msg {
    display: flex;
}
#shoutbox .msg a.author {
    min-width: 7em;
        width: auto;
    flex-shrink: 0;
    text-align: right
}
#shoutbox .msg span.date {
    order: 3;
    flex-shrink: 0;
}
#shoutbox .msg p.content {
    flex-grow: 1;
    margin: 0;
}

/*input box*/
#shoutbox input.form-control {
    background-color: var(--base01);
    color: var(--base04);
    border-color: var(--base02);
    border-right-width: 2px;
}
#shoutbox input.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px #e8e6dfbb;
}

/*channel selection*/
#shoutbox-before {
    color: var(--base04);
    background: var(--base01);
}
#shoutbox-before emph {
    color: var(--base0A);
}

/*links*/
#shoutbox a,
#shoutbox-before a {
    color: var(--base09);
}

/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
    color: var(--base04) !important;
}
#shoutbox a.author[title="Robot"] {
    color: var(--base0E) !important;
}
#shoutbox a.author[title="Partenaire"] {
    color: var(--base0C) !important;
}
#shoutbox a.author[title="Administrateur"] {
    color: var(--base08) !important;
}
#shoutbox a.author[title="Modérateur"] {
    color: var(--base0B) !important;
}
#shoutbox a.author[title="Rédacteur"] {
    color: var(--base0D) !important;
}
#shoutbox a.author[title="Gourou"] {
    color: var(--base0A) !important;
}
#shoutbox a.author[title="Membre"] {
    color: var(--base03) !important;
}
#shoutbox a.author[title="Maître du Puzzle"] {
    color: var(--base0E) !important;
}

/*#shoutbox a.author[title="Développeur"] {
    color: #66CCCC !important;
}*/

/*set style for a specific username*/

/*#shoutbox
* a.author[title="Membre"][href="/Fr/compte/voir_profil.php?membre=Zezombye"]
* {
                color: #00ABAB;
                font-style: italic;
        }*/

Finir est souvent bien plus difficile que commencer. — Jack Beauregard

Breizh_craft Hors ligne Modérateur Points: 1159 Défis: 7 Message

Citer : Posté le 14/05/2020 10:46 | #

Voilà ma version, basée sur base16-eigthies pour les couleurs, avec un CSS rédigé par Zezombye et retouché par Dark Storm. Je sais que plusieurs personnes l'utilisent, plus ou moins modifié

https://fichiers.breizh.pm/Userstyles/PCShoutbox.user.css

Breizh.pm – Un adminsys qui aime les galettes.

Tituya Hors ligne Administrateur Points: 2141 Défis: 26 Message

Citer : Posté le 14/05/2020 12:43 | # | Fichier joint

Voila ce que j'ai, ça ressemble un peu à celui de DS mais en plus sombre :

:root {

    /*Fond*/
    --mainBg: #1A1E24;
    /*Fond scroll bar*/
    --scrollbarBg: #22272F;
    /*Barre input texte + passage souris dessus messages + Top bar*/
    --inputBg: #252A34;
    /*Couleur des messages normaux*/
    --normalMsg: #CDD3DF;
    /*Liens*/
    --links: #31c9cc;
    /*Texte en haut*/
    --topText: #556B81;
    /*Scrollbar, mention*/
    --mention: #3b4453;

    /*Membre lambda*/
    --member: #a5b1cb;
    /*Membre de creativeCalc*/
    --memberCC: #000;
    /*Administrateur*/
    --administrator: #f2484d;
    /*Rédacteur / Partenaire*/
    --redactor: #509ceb;
    /*Membre d'honneur / Gourou*/
    --honorary: #FB924C;
    /*Maitre du puzzle*/
    --puzzleMaster: #c14ff4;
    /*Bots*/
    --bot: #e651e3;
    /*Modo*/
    --moderator: #0cc845;

}

/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/

/* CSS : Zezombye, Dark Storm
* Adaptation : Tituya
*/

/*set a background for the shoutbox here*/
#shoutbox {
    background-color: var(--mainBg);
    background-size: cover;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-width: 0px;
    border-left-width: 0px;
    font-size: 1.1em;
    border-left-color: transparent;
}
#shoutbox .messagesContainer {
    scrollbar-color: var(--mention) var(--scrollbarBg);
}

/*normal messages*/
#shoutbox .msg {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--normalMsg);
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
    font-size: 14.0px;
}
#shoutbox .msg:hover {
    background-color: var(--inputBg);
}

/*messages with your username mentioned*/
#shoutbox .msg.ref {
    background-color: var(--mention);
    border-bottom-color: transparent;
    color: var(--normalMsg);
}
#shoutbox .msg.ref:hover {
    background-color: var(--inputBg);
    color: var(--normalMsg);
}

/* Align messages and pseudos */
#shoutbox .msg {
    display: flex;
}
#shoutbox .msg a.author {
    min-width: 7em;
        width: auto;
    flex-shrink: 0;
    text-align: right
}
#shoutbox .msg span.date {
    order: 3;
    flex-shrink: 0;
}
#shoutbox .msg p.content {
    flex-grow: 1;
    margin: 0;
}

/*input box*/
#shoutbox input.form-control {
    background-color: var(--inputBg);
    color: var(--normalMsg);
    border-color: var(--mention);
    border-right-width: 2px;
}
#shoutbox input.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px var(--mention);
}

/*channel selection*/
#shoutbox-before {
    color: var(--topText);
    background: var(--inputBg);
}
#shoutbox-before emph {
    color: var(--links);
}

/*links*/
#shoutbox a,
#shoutbox-before a {
    color: var(--links);
}

/*anti transparent*/
#shoutbox span[style="color: transparent;"] {
    color: #9a9696 !important;
    background-color: #000
}

/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
    color: var(--ccmember) !important;
}
#shoutbox a.author[title="Membre d'honneur"] {
    color: var(--agila11) !important;
}
#shoutbox a.author[title="Robot"] {
    font-weight:bold;
    font-variant: small-caps;
    color: var(--bot) !important;
}
#shoutbox a.author[title="Partenaire"] {
    color: var(--redactor) !important;
}
#shoutbox a.author[title="Administrateur"] {
    color: var(--administrator) !important;
}
#shoutbox a.author[title="Modérateur"] {
    color: var(--moderator) !important;
}
#shoutbox a.author[title="Rédacteur"] {
    color: var(--redactor) !important;
}
#shoutbox a.author[title="Gourou"] {
    color: var(--puzzleMaster) !important;
}
#shoutbox a.author[title="Membre"] {
    color: var(--agila07);
}
#shoutbox a.author[title="Maître du Puzzle"] {
    color: var(--puzzleMaster) !important;
}

/*#shoutbox a.author[title="Développeur"] {
    color: #66CCCC !important;
}*/

/*set style for a specific username*/

/*#shoutbox a.author[href="/Fr/compte/voir_profil.php?membre=Tituya"]
{
    color: #e2a6b9 !important;
    font-style: italic;
}
*/

Bretagne > Reste du globe
(Et de toute façon, vous pouvez pas dire le contraire)Projet en cours : Adoranda

Mes programmes

Hésite pas à faire un test !

Stick hero
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C

Redeyes Hors ligne Membre Points: 630 Défis: 7 Message

Citer : Posté le 14/05/2020 13:51 | # | Fichier joint

J'ai essayé de faire comme vous mais sans fond uni:

:root {

    /* Agila theme
    https://github.com/arvi/Agila-Theme/blob/master/README.md
    */
    --agila00: #1A1E24;
    --agila01: #fdfefd;
    --agila02: #f0f1f569;
    --agila03: #252A34;
    --agila04: #fefeff;
    --agila05: #a5b1cb;
    --agila06: #000;
    --agila07: #ac0409;
    --agila08: #af0a0a8f;
    --agila09: #de1111bf;
    --agila10: #509ceb;
    --agila11: #f7f9f9;
    --agila12: #FB924C;
    --agila13: #c14ff4;
    --agila14: #e651e3;
    --agila15: #0cc845;
}

/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/
/* CSS : Zezombye, Dark Storm
* Adaptation : Breizh_Craft
*/
/*set a background for the shoutbox here*/
#shoutbox {
    background-image: url("https://66.media.tumblr.com/d40db2412b8e8bc257a6a565d9baf226/tumblr_oyvkoxZwgT1uv8jzvo4_1280.jpg");
    background-size: cover;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-width: 0px;
    border-left-width: 0px;
    border-left-color: transparent;
}
#shoutbox .messagesContainer {
    scrollbar-color: var(--agila11) var(--agila01);
}

/*normal messages*/
#shoutbox .msg {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--agila04);
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
}
#shoutbox .msg:hover {
    background-color: var(--agila02);
}

/*messages with your username mentioned*/
#shoutbox .msg.ref {
    background-color: var(--agila11);
    border-bottom-color: transparent;
    color: var(--agila04);
}
#shoutbox .msg.ref:hover {
    background-color: var(--agilae02);
    color: var(--agila04);
}

/* Align messages and pseudos */
#shoutbox .msg {
    display: flex;
}
#shoutbox .msg a.author {
    min-width: 7em;
    width: auto;
    flex-shrink: 0;
    text-align: right
}
#shoutbox .msg span.date {
    order: 3;
    flex-shrink: 0;
}
#shoutbox .msg p.content {
    flex-grow: 1;
    margin: 0;
}

/*input box*/
#shoutbox input.form-control {
    background-color: var(--agila02);
    color: var(--agila04);
    border-color: var(--agila11);
    border-right-width: 2px;
}
#shoutbox input.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px var(--agila11);
}

/*channel selection*/
#shoutbox-before {
    color: var(--agila02)
    background: var(--agila02);
}
#shoutbox-before emph {
    color: var(--agila02);
}

/*links*/
#shoutbox a,
#shoutbox-before a {
    color: var(--agila02);
}

/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
    color: var(--agila06) !important;
}
#shoutbox a.author[title="Membre d'honneur"] {
    color: var(--agila12) !important;
}
#shoutbox a.author[title="Robot"] {
    font-weight: bold;
    font-variant: small-caps;
    color: var(--agila14) !important;
}
#shoutbox a.author[title="Partenaire"] {
    color: var(--agila10) !important;
}
#shoutbox a.author[title="Administrateur"] {
    color: var(--agila07) !important;
}
#shoutbox a.author[title="Modérateur"] {
    color: var(--agila15) !important;
}
#shoutbox a.author[title="Rédacteur"] {
    color: var(--agila10) !important;
}
#shoutbox a.author[title="Gourou"] {
    color: var(--agila12) !important;
}
#shoutbox a.author[title="Membre"] {
    color: var(--agila05) !important;
}
#shoutbox a.author[title="Maître du Puzzle"] {
    color: var(--agila13) !important;
}

/*#shoutbox a.author[title="Développeur"] {
    color: #66CCCC !important;
}*/
/*set style for a specific username*/
/*#shoutbox
* a.author[title="Membre"][href="/Fr/compte/voir_profil.php?membre=Zezombye"]
* {
                color: #00ABAB;
                font-style: italic;
        }*/

FlamingKite Hors ligne Membre Points: 516 Défis: 9 Message

Citer : Posté le 23/10/2020 14:35 | # | Fichier joint

Ressemble au thème de Bzh, mais avec des couleurs un peu moins pâles, une plus grosse police (180%) et smileys proportionnels :

Ici vous avez le bas de la shout, avec une notif de GLaDOS, et 2 messages pingés (avec le @) en bleu clair (le dernier message est un peu plus gris : y a le pointeur de la souris dessus) :

CODE :

/* CSS : Zezombye, Dark Storm
* Couleurs : base16-eighties
* Adapation : Breizh_Craft
* Adaptation de l'adaptation : FlamingKite
*/

/*set a background for the shoutbox here*/
#shoutbox {
    background-color: #2d2d2d;
    background-size: cover;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-width: 0px;
    border-left-width: 0px;
    border-left-color: transparent;
    font-size: 1.8em;
}

/*normal messages*/
#shoutbox .msg {
    background: transparent;
    border-bottom-color: transparent;
    color: #d3d0c8;
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
}

#shoutbox .msg:hover {
    background-color: #515151;
}

#shoutbox .msg p.content {
    overflow: hidden;
}

#shoutbox span[style="color: transparent;"] {
    color: #9a9696 !important;
    background-color: #000
}

/*messages with your username mentioned*/
#shoutbox .msg.ref {
    background-color: #60656d; /*# 6f6767 897777*/
    border-bottom-color: transparent;
    color: #e8e6df;
}
#shoutbox .msg.ref:hover {
    background-color: #696b6f; /*#897a7a*/
    color: #e8e6df;
}

/*channel selection */
#shoutbox-before {
    color: #a09f93;
    background: #393939;
    border-color: #515151;
}
#shoutbox-before emph {
    color: #ffcc66;
}

#shoutbox-before a {
    color: #f99157;
}

/* Align messages and pseudos */
#shoutbox .msg {
    display: flex;
}
#shoutbox .msg a.author {
    min-width: 7em;
        width: auto;
    flex-shrink: 0;
    text-align: right
}
#shoutbox .msg span.date {
    order: 3;
    flex-shrink: 0;
}
#shoutbox .msg p.content {
    flex-grow: 1;
    margin: 0;
}

/*input box*/
#shoutbox input.form-control {
    background-color: #393939;
    color: #d3d0c8;
    border-right-width: 2px;
    font-size: 1.3em;
    height: 53px;

}

/*links*/
#shoutbox a {
    color: #f99157;
}

/*group colors; make sure to put !important if not member*/
#shoutbox .msg[data-author="FlamingKite"]
a.author{
    color: #a3deed !important;
    /*font-style: italic;*/
}

#shoutbox a.author[title="Membre de CreativeCalc"] {
    color: #a09f93 !important;
}
#shoutbox a.author[title="Robot"] {
    color: #ca68da !important;
}
#shoutbox a.author[title="Partenaire"] {
    color: #6699cc !important;
}
#shoutbox a.author[title="Administrateur"] {
    color: #f34146 !important;
}
#shoutbox a.author[title="Modérateur"] {
    color: #79d879 !important;
}
#shoutbox a.author[title="Rédacteur"] {
    color: #2496f7 !important;
}
#shoutbox a.author[title="Gourou"] {
    color: #ffcc66 !important;
}
#shoutbox a.author[title="Maître du Puzzle"] {
    color: #ae3ede !important;
}
#shoutbox a.author[title="Membre"] {
    color: #B2B3A7 !important;
}
#shoutbox a.author[title="Membre d'honneur"] {
    color: #e6a422 !important;
}

#shoutbox img {height: 25px; }

/*#shoutbox a.author[title="Développeur"] {
    color: #66CCCC !important;
}*/

/*set style for a specific username

#shoutbox .msg[data-author="Gitea"] a.author {
  color: #189927 !important;
}

Voire agir sur le message complet

#shoutbox .msg[data-author="Gitea"] {
  background: #ccf0c2 !important;
}*/

EDIT :

Petites modifications : quelques ajustements de couleurs, et surtout l'anti message transparent

(pour voir plus vite les trolls x)

J'en ai profité pour remontrer chaque point du CSS :
1. Souris qui passe sur un message
2. L'anti message transparent : affiche un fond noir et une couleur de texte un poil différente
3. Couleur du ping
4. Ping ET anti transparent.

J'ai mis à jour le code CSS dans le code au dessus.

PRECISION : Je n'applique ce style uniquement aux URL :
https://www.planet-casio.com/Fr/shoutbox/general
https://www.planet-casio.com/Fr/shoutbox/dev
https://www.planet-casio.com/Fr/shoutbox/discussion
et non pas au site tout entier, pour garder le channel #general des pages de Planète Casio avec sa forme normale (sinon c'est bien trop gros).
Pour choisir cela dans Stylus, il faut mettre en bas du code CSS : "S'applique à", choisir "URL commençant par", et mettre https://www.planet-casio.com/Fr/shoutbox

EDIT 2 :
La partie

#shoutbox .msg p.content {
overflow: hidden;
}

sert à prévenir de ce genre de problème si quelqu'un utilise des diacritiques.

EDIT 3 :
cf le message juste en dessous

Lephenixnoir Hors ligne Administrateur Points: 24229 Défis: 170 Message

Citer : Posté le 19/05/2021 22:02 | #

Pour ceux comme moi qui aiment modifier le thème au cas-par-cas selon les auteurs, j'ai modifié le front-end de la shoutbox pour ajouter un data-author à chaque div qui représente un message complet (la div.msg qui fait toute la ligne). (Ctrl-R pour bien rafraîchir et avoir le nouveau script.)

Avant, il fallait matcher le lien avec le nom de l'auteur, et compte tenu de la façon dont les sélecteurs CSS sont faits, ça donnait accès à tous les éléments de la ligne (auteur, message, date), mais pas à la ligne complète (qui est leur parent). Maintenant, c'est plus simple.

Du coup avant on faisait des trucs comme ça :

#shoutbox a.author[href='/Fr/compte/voir_profil.php?membre=Gitea'] {
color: #189927 !important;
}

Et maintenant on peut faire ça :

#shoutbox .msg[data-author="Gitea"] a.author {
color: #189927 !important;
}
/* Voire agir sur le message complet */
#shoutbox .msg[data-author="Gitea"] {
background: #ccf0c2 !important;
}

Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)

Cakeisalie5 En ligne Ancien administrateur Points: 1909 Défis: 11 Message

Citer : Posté le 19/05/2021 22:18 | #

Promotion ordinaire sur les inscriptions sur Planète Casio : en ce moment, c'est gratuit !

Mon blog ⋅ Besoin d'utilitaires de transfert vers et depuis la calculatrice sous GNU/Linux ?

Shadow15510 Hors ligne Administrateur Points: 5500 Défis: 18 Message

Citer : Posté le 26/08/2021 21:07 | #

Je met le mien aussi

Alors tenez-vous bien

c'est le thème de Breizh, que j'ai repris en augmentant les contrastes, et avec un anti-troll. Vous allez-dire "ça ressemble à celui de FK", mais en fait pas tout à fait non plus…

/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/
/* CSS : Zezombye, Dark Storm
* Couleurs : base16-eighties
* Adapation : Breizh_Craft
*/

/*set a background for the shoutbox here*/
#shoutbox {
    background-color: #2d2d2d;
    background-size: cover;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-width: 0px;
    border-left-width: 0px;
    border-left-color: transparent;
    font-size: 18px;
}

/*normal messages*/
#shoutbox .msg {
    background: transparent;
    border-bottom-color: transparent;
    color: #d3d0c8;
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
}
#shoutbox .msg:hover {
    background-color: #404040;
}

/*anti-troll*/
#shoutbox span[style="color: transparent;"] {
    color: #d3d0c8 !important;
}

/*messages with your username mentioned*/
#shoutbox .msg.ref {
    background-color: #202020;
    border-bottom-color: transparent;
    color: #ee5555;
}
#shoutbox .msg.ref:hover {
    background-color: #404040;
    color: #ee5555;
}

/* Align messages and pseudos */
#shoutbox .msg {
    display: flex;
}
#shoutbox .msg a.author {
    min-width: 6.5em;
    width: auto;
    flex-shrink: 0;
    text-align: right
}
#shoutbox .msg span.date {
    order: 3;
    flex-shrink: 0;
}
#shoutbox .msg p.content {
    flex-grow: 1;
    margin: 0;
}

/*channel selection*/
#shoutbox-before {
    color: #a09f93;
    background: #393939;
    border-color: #515151;
}
#shoutbox-before emph {
    color: #ffcc66;
}

#shoutbox-before a {
    color: #f99157;
}

/*input box*/
#shoutbox input.form-control {
    background-color: #393939;
    color: #a09f93;
    border-right-width: 2px;
    height: 32px;
    font-size: 18px;
}

#shoutbox.extern .messagesContainer {
    height: calc(100% - 32px);
}

/*links*/
#shoutbox a {
    color: #f99157;
}

/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
    color: #a09f93 !important;
}
#shoutbox a.author[title="Robot"] {
    color: #ff55ff !important;
}
#shoutbox a.author[title="Partenaire"] {
    color: #6699cc !important;
}
#shoutbox a.author[title="Administrateur"] {
    color: #ff5555 !important;
}
#shoutbox a.author[title="Modérateur"] {
    color: #55ff55 !important;
    /*color: #008080 !important;*/
}
#shoutbox a.author[title="Rédacteur"] {
    color: #55bbff !important;
}
#shoutbox a.author[title="Gourou"], a.author[title="Maître du Puzzle"], a.author[title="Grand maître des Traits d'Esprit"] {
    color: #ffcc66 !important;
}
#shoutbox a.author[title="Membre"] {
    color: #808080 !important;
}

"Ce n'est pas parce que les chose sont dures que nous ne les faisons pas, c'est parce que nous ne les faisons pas qu'elles sont dures." Sénèque

Nom d'utilisateur

Adresse email

Message

Ajouter un spoiler(texte affichable/masquable par un clic)

Nom du lien (facultatif): Adresse du lien:

Adresse de l'image: Alignement de l'image: Normal Flottante à gauche Centrée Flottante à droite Redimensionnement de l'image (en pixel): Largeur : Hauteur :

Adresse de la vidéo:

Pseudo du profil: Afficher la liste des membres

Auteur de la citation (faculatif):

Texte de déroulage du spoiler (modification faculative): Texte d'enroulage du spoiler (modification faculative):

Titre de la barre de progression: Pourcentage de la barre de progression entre 1 et 100:

→ ⇒ √ Σ ∫ ≠ ≥ ≤ π θ ◢ ± α β γ δ Δ σ ≈ ∞ ∈ λ

Fichier joint

Me prévenir par email lorsqu'une réponse est postée

Combien font huit moins six ?

Veuillez donner la réponse en chiffre

Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 135 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd