Des thèmes pour la V43
Posté le 04/11/2021 22:08
Salut !
Ça fait longtemps n'est-ce pas ?
En ce moment je n'ai pas beaucoup de motivation mais je me suis posé une question : Pourquoi ne pas faire un peu de CSS pour customiser notre bonne vieille V43 (
à la manière de la shoutbox)
Alors oui le projet est un peu étrange et la manière dont la V43 a été faite ne permet pas d'avoir quelque chose de parfait. J'ai cependant mis au point un CSS qui semble englober la plupart des pages, j'en ai donc profité pour faire un thème sombre dont voici une image :
Alors oui ce n'est pas excellent mais bon je m'amuse comme je peux
Voici le CSS actuel, il est sûrement horrible vu que je n'ai jamais ouvert un seul tutoriel à ce propos :
/*
Thème pour la V43
CSS : Tituya
*/
:root {
/*Fond principal*/
--mainBg: #171a1c;
/*Fond des boites*/
--boxBg: #262c2f;
/*Fond message topic*/
--topicSecBg: #1d2326;
/*Rouge utilisé pour les liens + titres*/
--redTitleLinks: #ff5050;
/*Couleur du texte*/
--textColor: #d4d5d5;
/*Couleur des champs d'entrée (zone de message, upload, heure...)*/
--inputBg: #2a3135;
/*Couleur des bordures*/
--borderColor: #54646c;
/*Couleur secondaire liste des topics*/
--listSecBg: #313739;
/*Pop up succès*/
--succes1:#a1db89;
--succes2:#82db5d;
--textSucces:#262c2f;
/*Pop up alerte*/
--alerte1:#f07171;
--alerte2:#ee5c5c;
--textAlerte:#262c2f;
/*Couleurs dégradé en haut*/
--header1:#db1616;
--header2:#8e0707;
/*Couleur des textes header*/
--headerText:#fff;
/*Couleur des sous menus*/
--headerDropColor:#f7f7f7;
--headerDropText:#171a1c;
/*Comparateur de calculatrices*/
--compatible:#a1db89;
--warn:#ffb700;
--no:#f07171;
/*Couleurs des titres*/
--administrateur:#fff700;
--moderateur:#0ee332;
--redacteur:#0091ff;
--partenaire:#208ee1;
--robot:#f207d9;
--honneur:#ff9606;
--creativecalc:#b5b5b5;
--gourou:#ff9606;
--dev:#208ee1;
--puzzle:#d200bc;
--labelisateur:#00f0b7;
--membre:var(--textColor);
}
/*Couleur de fond*/
body {
background-color: var(--mainBg);
}
/*Couleur de fond message topic*/
div.topic-post.topic {
background-color: var(--boxBg);
}
/*Couleur de fond message topic 2*/
div.topic-post.topic.col, #old table.textout-table tr:nth-child(2n+1) {
background-color: var(--topicSecBg);
}
#old table.textout-table tr:first-child th, #old table.textout-table {
border-color:var(--borderColor);
}
/*Couleur lien*/
#old .color, #old a, #old a.bold {
color:var(--redTitleLinks);
}
/*Utilisé une seule fois et à vrai dire je ne sais plus où mais fallait mettre la même couleur que les liens*/
#old a.bold:hover {
color:var(--redTitleLinks);
}
/*Couleur date post topic*/
#old .forumdate {
color:var(--textColor);
}
#old hr {
border-color:var(--textColor);
}
/*Les différents titres*/
#old h1, #old h2, #old h3, #old h5 {
color:var(--redTitleLinks);
}
/*Le gros titre utilisé comme nom de topic*/
#old h4, #old #start h4 {
color:var(--textColor);
}
/*Bordure pointillée autour des messages*/
div.topic-comments {
border-color:var(--borderColor);
}
/*Zone de texte*/
#old textarea {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus, #old div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus {
box-shadow: 0px 0px 3px #6c6c6c inset;
}
/*Désactive les bordures*/
#old div.box > div {
border-image:none;
border:none;
}
/*Texte en haut d'un topic (Forum - Discussion)*/
#old div.box > h2 {
border-image:none;
border:none;
background-color:transparent;
color:var(--redTitleLinks);
font-size:1.1em;
}
/*Couleurs des textes*/
div#old {
color:var(--textColor);
}
a.profile-group {
color:#fff;
}
/*Couleur de la police dans l'encadré JDM*/
div.jdm {
color:var(--inputBg);
}
/*Couleur du texte dans l'encadré 'Derniers commentaires'*/
div.box div ul.arrow li a span {
color:var(--textColor) !important;
}
#old table {
color:var(--textColor);
border-color:var(--redTitleLinks);
}
/*Couleur des textes dans les listes de topics*/
#old tr {
border:none;
color:var(--textColor);
}
#calcdb tr:nth-child(even) {
background:var(--listSecBg);
}
/*Couleur de fond secondaire dans les listes de topics*/
#old tr.col {
background-color:var(--listSecBg);
}
/*Désactive les bordures*/
#old td.incleft, #old td.incbottomcenter, #old td.incright, #old td.inclow{
background-image:none;
}
/*Désactive les images de coins de bordures*/
#old td.incbottomcorner img, #old td.inctopcorner img, #old td.inclow img {
display:none;
}
/*Texte en haut des listes de topics*/
#old td.inctitle, #old a.inctitlelink, #old a.inctitlelink:hover {
background-image:none;
color:var(--redTitleLinks);
font-size:1.1em;
}
#old form {
color:var(--textColor);
}
/*Pop up succès*/
.alert-success {
background-image: linear-gradient(to bottom,var(--succes1) 0,var(--succes2) 100%);
border-color:var(--succes2);
color:var(--textSucces);
}
/*Pop up alerte*/
.alert-danger {
background-image: linear-gradient(to bottom,var(--alerte1) 0,var(--alerte2) 100%);
border-color:var(--alerte1);
color:var(--textAlerte);
}
#old a.black {
color:var(--textColor);
}
#old a.black:hover {
color:#fff;
background-color:var(--borderColor);
}
#old a.innerbarlink {
color:var(--redTitleLinks);
}
#old a.innerbarlink:hover {
color:var(--redTitleLinks);
}
/*Bordure tri programmes*/
#old .triPrgmNrml {
border-color:var(--redTitleLinks);
}
/*Place un fond blanc derrière l'image de programme en cas de png*/
#old .triPrgmNrml img {
background:#fff;
}
/*Les boites principales*/
#old div.box {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
border-radius:10px;
padding:2px;
}
/*Les champs input*/
input#title, input#delayed_date, input#delayed_time, #old div input.field, #old select, input#news_image, input#news_summary, input#subject, #old div.field input, input#file.form-control {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
#old figcaption {
color:var(--textColor);
}
#old table.inctable {
border-radius: 10px;
border:solid var(--borderColor) 2px;
margin: 1px;
background-color:var(--boxBg);
border-collapse: separate;
}
#old table.dotted {
border-color:var(--redTitleLinks);
background-color:var(--boxBg);
}
#old div.field span.label {
color:var(--redTitleLinks);
}
#old div.box-simple {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
padding:2px;
border-radius: 10px;
}
.modal-content {
background-color:var(--boxBg);
}
/*Fleche de fermeture prévisualisation*/
.close {
color:var(--textColor);
}
/*Fleche de fermeture prévisualisation*/
.close:hover {
color:#fff;
}
#old .spoiler > div:last-child {
color:var(--mainBg);
}
#old span.innerbarcolor {
color:var(--textColor);
}
/*Fond envoi message privé*/
#old .mp_exp {
background-color:var(--topicSecBg);
border-color: var(--borderColor);
}
/*Fond reception d'un message*/
#old .mp_rep {
background-color:var(--listSecBg);
border-color:var(--borderColor);
}
#old .mp_rep .color {
color:var(--textColor);
}
/*Les pop-ups de rédaction message*/
#old .editeur .AskBox {
background-color:var(--topicSecBg);
border-color:var(--borderColor);
}
#old .editeur .AskBoxTop span {
color:var(--textColor)
}
#old .editeur .ABsmiley td {
background-color:var(--listSecBg);
}
.header {
background-image:linear-gradient(to bottom, var(--header1) 0px, var(--header2) 100%);
}
/*Couleur des textes header*/
.header .navbar-nav > li > a{
color:var(--headerText);
}
/*Couleur des textes sous menu*/
.dropdown-menu > li > a {
color:var(--headerDropText);
}
/*Barre de séparation sous menu*/
.dropdown-menu .divider {
background-color:var(--headerDropText);
}
/*Menu de selection header*/
.header .navbar-nav > .dropdown > a:hover,
.header .navbar-brand:hover,
.header .navbar-nav > .button > a:hover,
.header .navbar-nav > .dropdown > a:focus,
.header .navbar-nav > .dropdown.open > a,
.header .navbar-nav > .button > a:focus,
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
background-color:var(--header1);
background-image:linear-gradient(to bottom, #00000036 0px, #00000070 100%);
color:var(--headerText);
}
/*Sous menus*/
.navbar-nav > li > .dropdown-menu {
background:var(--headerDropColor);
border-color:var(--borderColor);
}
/*hover sous menu*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color:var(--headerDropText);
background-color:var(--headerDropColor);
background-image:linear-gradient(to bottom, #00000014 0px, #0000002b 100%);
}
p:not(.content) {
color:var(--textColor);
}
#calcdb th {
background-color:var(--boxBg);
}
#calcdb td.st-active, #calcdb td.st-good {
background-color:var(--compatible);
color:#fff;
}
#calcdb td.st-warn {
color:#fff;
background-color:var(--warn);
}
#calcdb td.st-bad {
background-color:var(--no);
}
#calcdb tr:nth-child(2n+4) th,
#calcdb tr.category td,
#calcdb tr.category th {
background-color:var(--topicSecBg)
}
/*===== Couleur des titres =====*/
/*Administrateur*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=2"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=2"]{
color:var(--administrateur) !important;
}
/*Modérateur*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=3"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=3"]{
color:var(--moderateur) !important;
}
/*Rédacteur*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=4"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=4"] {
color:var(--redacteur) !important;
}
/*Partenaire*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=6"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=6"] {
color:var(--partenaire) !important;
}
/*Robot*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=12"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=12"] {
color:var(--robot) !important;
}
/*Membre d'honneur*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=14"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=14"] {
color:var(--honneur) !important;
}
/*Membre de CreactiveCalc*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=18"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=18"] {
color:var(--creativecalc) !important;
}
/*Gourou*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=20"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=20"] {
color:var(--gourou) !important;
}
/*Développeur*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=21"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=21"] {
color:var(--dev) !important;
}
/*Maitre du Puzzle*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=24"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=24"] {
color:var(--puzzle) !important;
}
/*Labélisateur*/
a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=26"] > span, a[href="https://www.planet-casio.com/Fr/compte/groupe.php?id=26"] {
color:var(--labelisateur) !important;
}
/*Membre random*/
span.profile-group {
color:var(--membre);
}
Voilà voilà, faites vos meilleures créations, en rendant la V43 la plus moche possible en cette période d'Hallowen
Fichier joint
Citer : Posté le 04/11/2021 23:56 | #
Il y a pas le barre de menu...
mais le thème en noir devrait être l'officiel.
Citer : Posté le 05/11/2021 09:03 | #
C'est déjà mieux que le rendu de Dark Reader, bravo
Citer : Posté le 05/11/2021 14:12 | #
Il y a pas le barre de menu...
mais le thème en noir devrait être l'officiel.
En effet je n'avais pas modifié la barre de menus parce que je n'en voyais pas forcément l'intérêt. C'est maintenant chose faites
Vous pouvez à présent modifier les couleurs de cette barre ainsi que ses sous-menus.
N'hésitez pas à faire votre propre thème et à le partager. Mon début de thème sombre est loin d'être idéal niveau contraste et lecture, améliorez le !
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 05/11/2021 14:16 | #
comment faire pour appliquer les thèmes?
Citer : Posté le 05/11/2021 14:20 | #
Tu as juste à installer l'extension Stylus pour ton navigateur (https://addons.mozilla.org/fr/firefox/addon/styl-us/ pour firefox).
Une fois cela fait, tu peux aller sur planète casio, tu cliques sur le logo de l'extension -> "écrire un style pour www.planet-casio.com" et tu colles le CSS du post principal
Maintenant tu as juste à modifier les couleurs des variables en haut et tu peux voir les modifications en temps réel sur ta fenêtre
C'est exactement le même principe pour modifier la couleur de la shoutbox
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 05/11/2021 18:36 | #
J'ai juste mis la shoutbox en noir en gardant ton style Tituya :
...:
/*Fond principal*/
--mainBg: #171a1c;
/*Fond des boites*/
--boxBg: #262c2f;
/*Fond message topic*/
--topicSecBg: #1d2326;
/*Rouge utilisé pour les liens + titres*/
--redTitleLinks: #db3f3f;
/*Couleur du texte*/
--textColor: #d4d5d5;
/*Couleur des champs d'entrée (zone de message, upload, heure...)*/
--inputBg: #2a3135;
/*Couleur des bordures*/
--borderColor: #54646c;
/*Couleur secondaire liste des topics*/
--listSecBg: #313739;
/*Couleurs dégradé en haut*/
--header1:#db1616;
--header2:#8e0707;
/*Couleur des textes header*/
--headerText:#fff;
/*Couleur des sous menus*/
--headerDropColor:#f7f7f7;
--headerDropText:#171a1c;
}
/*Couleur de fond*/
body {
background-color: var(--mainBg);
}
.messagesContainer {
background-color: black;
color:white;
}
#shoutbox-before {
background-color: black;
color:white;
}
.form-control {
background-color:black;
color:white;
}
/*Couleur de fond message topic*/
div.topic-post.topic {
background-color: var(--boxBg);
}
/*Couleur de fond message topic 2*/
div.topic-post.topic.col {
background-color: var(--topicSecBg);
}
/*Couleur lien*/
#old .color {
color:var(--redTitleLinks);
}
/*Couleur lien*/
#old a, #old a.bold {
color:var(--redTitleLinks);
}
/*Utilisé une seule fois et à vrai dire je ne sais plus où mais fallait mettre la même couleur que les liens*/
#old a.bold:hover {
color:var(--redTitleLinks);
}
/*Couleur date post topic*/
#old .forumdate {
color:var(--textColor);
}
#old hr {
border-color:var(--textColor);
}
/*Les différents titres*/
#old h1, #old h2, #old h3, #old h5 {
color:var(--redTitleLinks);
}
/*Le gros titre utilisé comme nom de topic*/
#old h4 {
color:var(--textColor);
}
#old #start h4 {
color:var(--textColor);
}
/*Bordure pointillée autour des messages*/
div.topic-comments {
border-color:var(--borderColor);
}
/*Zone de texte*/
#old textarea {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus, #old div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus {
box-shadow: 0px 0px 3px #6c6c6c inset;
}
/*Désactive les bordures*/
#old div.box > div {
border-image:none;
border:none;
}
/*Texte en haut d'un topic (Forum - Discussion)*/
#old div.box > h2 {
border-image:none;
border:none;
background-color:transparent;
color:var(--redTitleLinks);
font-size:1.1em;
}
/*Couleurs des textes*/
div#old {
color:var(--textColor);
}
a.profile-group {
color:#fff;
}
/*Couleur de la police dans l'encadré JDM*/
div.jdm {
color:var(--inputBg);
}
/*Couleur du texte dans l'encadré 'Derniers commentaires'*/
div.box div ul.arrow li a span {
color:var(--textColor) !important;
}
#old table {
color:var(--textColor);
border-color:var(--redTitleLinks);
}
/*Couleur des textes dans les listes de topics*/
#old tr {
border:none;
color:var(--textColor);
}
/*Couleur de fond secondaire dans les listes de topics*/
#old tr.col {
background-color:var(--listSecBg);
}
/*Désactive les bordures*/
#old td.incleft, #old td.incbottomcenter, #old td.incright, #old td.inclow{
background-image:none;
}
/*Désactive les images de coins de bordures*/
#old td.incbottomcorner img, #old td.inctopcorner img, #old td.inclow img {
display:none;
}
/*Texte en haut des listes de topics*/
#old td.inctitle, #old a.inctitlelink {
background-image:none;
color:var(--redTitleLinks);
font-size:1.1em;
}
#old form {
color:var(--textColor);
}
/*Pop up succès*/
.alert-success {
background-image: linear-gradient(to bottom,#a1db89 0,#82db5d 100%);
border-color:#5bcc2c;
color:var(--topicSecBg);
}
/*Pop up alerte*/
.alert-danger {
background-image: linear-gradient(to bottom,#f07171 0,#ee5c5c 100%);
border-color:#db5353;
color:var(--topicSecBg);
}
#old a.black {
color:var(--textColor);
}
#old a.black:hover {
color:#fff;
background-color:var(--borderColor);
}
#old a.innerbarlink {
color:var(--redTitleLinks);
}
#old a.innerbarlink:hover {
color:var(--redTitleLinks);
}
/*Bordure tri programmes*/
#old .triPrgmNrml {
border-color:var(--redTitleLinks);
}
/*Place un fond blanc derrière l'image de programme en cas de png*/
#old .triPrgmNrml img {
background:#fff;
}
#old div.box {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
border-radius:10px;
padding:2px;
}
/*Les champs input*/
input#title, input#delayed_date, input#delayed_time, #old div input.field, #old select, input#news_image, input#news_summary, input#subject, #old div.field input, input#file.form-control {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
#old figcaption {
color:var(--textColor);
}
#old table.inctable {
border:solid var(--borderColor) 2px;
margin: 1px;
background-color:var(--boxBg);
}
#old table.dotted {
border-color:var(--redTitleLinks);
background-color:var(--boxBg);
}
#old div.field span.label {
color:var(--redTitleLinks);
}
#old div.box-simple {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
padding:2px;
}
.modal-content {
background-color:var(--boxBg);
}
/*Fleche de fermeture prévisualisation*/
.close {
color:var(--textColor);
}
/*Fleche de fermeture prévisualisation*/
.close:hover {
color:#fff;
}
#old span.innerbarcolor {
color:var(--textColor);
}
/*Fond envoi message privé*/
#old .mp_exp {
background-color:var(--topicSecBg);
border-color: var(--borderColor);
}
/*Fond reception d'un message*/
#old .mp_rep {
background-color:var(--listSecBg);
border-color:var(--borderColor);
}
#old .mp_rep .color {
color:var(--textColor);
}
/*Les pop-ups de rédaction message*/
#old .editeur .AskBox {
background-color:var(--topicSecBg);
border-color:var(--borderColor);
}
#old .editeur .AskBoxTop span {
color:var(--textColor)
}
#old .editeur .ABsmiley td {
background-color:var(--listSecBg);
}
.header {
background-image:linear-gradient(to bottom, var(--header1) 0px, var(--header2) 100%);
}
/*Couleur des textes header*/
.header .navbar-nav > li > a{
color:var(--headerText);
}
/*Couleur des textes sous menu*/
.dropdown-menu > li > a {
color:var(--headerDropText);
}
/*Barre de séparation sous menu*/
.dropdown-menu .divider {
background-color:var(--headerDropText);
}
/*Menu de selection header*/
.header .navbar-nav > .dropdown > a:hover,
.header .navbar-brand:hover,
.header .navbar-nav > .button > a:hover,
.header .navbar-nav > .dropdown > a:focus,
.header .navbar-nav > .dropdown.open > a,
.header .navbar-nav > .button > a:focus,
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
background-color:var(--header1);
background-image:linear-gradient(to bottom, #0000000a 0px, #0000008a 100%);
color:var(--headerText);
}
/*Sous menus*/
.navbar-nav > li > .dropdown-menu {
background:var(--headerDropColor);
border-color:var(--borderColor);
}
/*hover sous menu*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color:var(--headerDropText);
background-color:var(--headerDropColor);
background-image:linear-gradient(to bottom, #00000014 0px, #0000002b 100%);
}
Citer : Posté le 05/11/2021 18:52 | #
Pour la petite explication de pourquoi je n'avais pas modifié la shoutbox :
Pour laisser la possibilité d'avoir un thème commun entre les différentes shoutbox vu que la plupart de ceux qui possèdent cette extension l'utilise pour modifier le thème de la shout, ils peuvent très bien l'étendre partout sur le site pour utiliser même
En l'occurrence je peux très bien étendre mon thème (https://www.planet-casio.com/Fr/forums/topic16300-1-themes-shoutbox.html#176127) de sorte à l'utiliser partout sur le site
Au passage j'ai ajouté un petit arrondi sur les bords des boites, ça faisait trop brut avant. Ça me fait plaisir de voir que des personnes l'utilisent
Ajouté le 07/11/2021 à 14:30 :
Petite update sympathique, nous pouvons à présent modifier la couleur des rôles
Avec la shoutbox nous avons un paramètre spécial du nom de "title" pour trouver le rôle de l'utilisateur. Ce n'est évidemment pas le cas ici, j'ai donc dû passer par le lien lorsque l'on clique sur le rôle. C'est un peu bricolé mais ça marche
Comme d'habitude, le nouveau CSS est sur le post principal
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 08/11/2021 09:53 | #
J'allais faire une blague sur les thèmes v5... mais ils sont déjà implémentés ! Je prends ce topic comme un clin d'oeil subtil
Citer : Posté le 08/11/2021 11:28 | #
En effet ! C'est d'ailleurs la V5 qui m'a donné envie de faire ce CSS. J'utilise même le code couleur du thème sombre de FK
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 31/12/2021 00:12 | # | Fichier joint
Tant que j'y pense, mon thème du site :
/*Fond principal*/
--mainBg: #000;
/*Fond des boites*/
--boxBg: #000;
/*Fond message topic*/
--topicSecBg: #151515;
/*Rouge utilisé pour les liens + titres*/
--redTitleLinks: #dd0b6a;
/*Couleur du texte*/
--textColor: #fff;
/*Couleur des champs d'entrée (zone de message, upload, heure...)*/
--inputBg: #000;
/*Couleur des bordures*/
--borderColor: #dd0b6a;
/*Couleur secondaire liste des topics*/
--listSecBg: #151515;
/*Couleurs dégradé en haut*/
--header1:#000;
--header2:#000;
/*Couleur des textes header*/
--headerText:#fff;
/*Couleur des sous menus*/
--headerDropColor:#000;
--headerDropText:#fff;
}
/*Couleur de fond*/
body {
background-color: var(--mainBg);
}
/*Couleur de fond message topic*/
div.topic-post.topic {
background-color: var(--boxBg);
}
/*Couleur de fond message topic 2*/
div.topic-post.topic.col {
background-color: var(--topicSecBg);
}
/*Couleur lien*/
#old .color {
color:var(--redTitleLinks);
}
/*Couleur lien*/
#old a, #old a.bold {
color:var(--redTitleLinks);
}
/*Utilisé une seule fois et à vrai dire je ne sais plus où mais fallait mettre la même couleur que les liens*/
#old a.bold:hover {
color:var(--redTitleLinks);
}
/*Couleur date post topic*/
#old .forumdate {
color:var(--textColor);
}
#old hr {
border-color:var(--textColor);
}
/*Les différents titres*/
#old h1, #old h2, #old h3, #old h5 {
color:var(--redTitleLinks);
}
/*Le gros titre utilisé comme nom de topic*/
#old h4 {
color:var(--textColor);
}
#old #start h4 {
color:var(--textColor);
}
/*Bordure pointillée autour des messages*/
div.topic-comments {
border-color:var(--borderColor);
}
/*Zone de texte*/
#old textarea {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus, #old div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus {
box-shadow: 0px 0px 3px #6c6c6c inset;
}
/*Désactive les bordures*/
#old div.box > div {
border-image:none;
border:none;
}
/*Texte en haut d'un topic (Forum - Discussion)*/
#old div.box > h2 {
border-image:none;
border:none;
background-color:transparent;
color:var(--redTitleLinks);
font-size:1.1em;
}
/*Couleurs des textes*/
div#old {
color:var(--textColor);
}
a.profile-group {
color:#fff;
}
/*Couleur de la police dans l'encadré JDM*/
div.jdm {
color:var(--inputBg);
}
/*Couleur du texte dans l'encadré 'Derniers commentaires'*/
div.box div ul.arrow li a span {
color:var(--textColor) !important;
}
#old table {
color:var(--textColor);
border-color:var(--redTitleLinks);
}
/*Couleur des textes dans les listes de topics*/
#old tr {
border:none;
color:var(--textColor);
}
/*Couleur de fond secondaire dans les listes de topics*/
#old tr.col {
background-color:var(--listSecBg);
}
/*Désactive les bordures*/
#old td.incleft, #old td.incbottomcenter, #old td.incright, #old td.inclow{
background-image:none;
}
/*Désactive les images de coins de bordures*/
#old td.incbottomcorner img, #old td.inctopcorner img, #old td.inclow img {
display:none;
}
/*Texte en haut des listes de topics*/
#old td.inctitle, #old a.inctitlelink {
background-image:none;
color:var(--redTitleLinks);
font-size:1.1em;
}
#old form {
color:var(--textColor);
}
/*Pop up succès*/
.alert-success {
background-image: linear-gradient(to bottom,#dd0b6a 0,#dd0b6a 100%);
border-color:#000;
color:var(--topicSecBg);
}
/*Pop up alerte*/
.alert-danger {
background-image: linear-gradient(to bottom,#dd0b6a 0,#dd0b6a 100%);
border-color:#000;
color:var(--topicSecBg);
}
#old a.black {
color:var(--textColor);
}
#old a.black:hover {
color:#fff;
background-color:var(--borderColor);
}
#old a.innerbarlink {
color:var(--redTitleLinks);
}
#old a.innerbarlink:hover {
color:var(--redTitleLinks);
}
/*Bordure tri programmes*/
#old .triPrgmNrml {
border-color:var(--redTitleLinks);
}
/*Place un fond noir derrière l'image de programme en cas de png*/
#old .triPrgmNrml img {
background:#000;
}
#old div.box {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
border-radius:10px;
padding:2px;
}
/*Les champs input*/
input#title, input#delayed_date, input#delayed_time, #old div input.field, #old select, input#news_image, input#news_summary, input#subject, #old div.field input, input#file.form-control {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
#old figcaption {
color:var(--textColor);
}
#old table.inctable {
border:solid var(--borderColor) 2px;
margin: 1px;
background-color:var(--boxBg);
}
#old table.dotted {
border-color:var(--redTitleLinks);
background-color:var(--boxBg);
}
#old div.field span.label {
color:var(--redTitleLinks);
}
#old div.box-simple {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
padding:2px;
}
.modal-content {
background-color:var(--boxBg);
}
/*Fleche de fermeture prévisualisation*/
.close {
color:var(--textColor);
}
/*Fleche de fermeture prévisualisation*/
.close:hover {
color:#fff;
}
#old span.innerbarcolor {
color:var(--textColor);
}
/*Fond envoi message privé*/
#old .mp_exp {
background-color:var(--topicSecBg);
border-color: var(--borderColor);
}
/*Fond reception d'un message*/
#old .mp_rep {
background-color:var(--listSecBg);
border-color:var(--borderColor);
}
#old .mp_rep .color {
color:var(--textColor);
}
/*Les pop-ups de rédaction message*/
#old .editeur .AskBox {
background-color:var(--topicSecBg);
border-color:var(--borderColor);
}
#old .editeur .AskBoxTop span {
color:var(--textColor)
}
#old .editeur .ABsmiley td {
background-color:var(--listSecBg);
}
.header {
background-image:linear-gradient(to bottom, var(--header1) 0px, var(--header2) 100%);
}
/*Couleur des textes header*/
.header .navbar-nav > li > a{
color:var(--headerText);
}
/*Couleur des textes sous menu*/
.dropdown-menu > li > a {
color:var(--headerDropText);
}
/*Barre de séparation sous menu*/
.dropdown-menu .divider {
background-color:var(--headerDropText);
}
/*Menu de selection header*/
.header .navbar-nav > .dropdown > a:hover,
.header .navbar-brand:hover,
.header .navbar-nav > .button > a:hover,
.header .navbar-nav > .dropdown > a:focus,
.header .navbar-nav > .dropdown.open > a,
.header .navbar-nav > .button > a:focus,
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
background-color:var(--header1);
background-image:linear-gradient(to bottom, #dd0b6a 0px, #dd0b6a 100%);
color:var(--headerText);
}
/*Sous menus*/
.navbar-nav > li > .dropdown-menu {
background:var(--headerDropColor);
border-color:var(--borderColor);
}
/*hover sous menu*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color:var(--headerDropText);
background-color:var(--headerDropColor);
background-image:linear-gradient(to bottom, #00000014 0px, #0000002b 100%);
}
/* code */
#old div .code {
background-color:#000;
color:#fff;
border: solid var(--borderColor) 2px;
border-radius:10px;
}
/* citations */
#old div .citation {
background-color:#000;
color:#fff;
border: dashed var(--borderColor) 1px;
}
Et en bonus le code de la shout qui va avec :
* 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: #000;
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: 16px;
}
/*normal messages*/
#shoutbox .msg {
background: transparent;
border-bottom-color: transparent;
color: #ddd;
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
}
#shoutbox .msg:hover {
background-color: #151515;
}
/*anti-troll*/
#shoutbox span[style="color: transparent;"] {
color: #d3d0c8 !important;
}
/*messages with your username mentioned*/
#shoutbox .msg.ref {
background-color: #440320;
border-bottom-color: transparent;
color: #fff;
}
#shoutbox .msg.ref:hover {
background-color: #5b022b;
color: #fff;
}
/* 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: #fff;
background: #000;
border-color: transparent;
}
#shoutbox-before emph {
color: #dd0b6a;
}
#shoutbox-before a {
color: #dd0b6a;
}
/*input box*/
#shoutbox input.form-control {
background-color: #151515;
color: #fff;
border-right-width: 2px;
padding-left:5px;
padding-top:3px;
height: 32px;
font-size: 16px;
border-color: transparent;
}
#shoutbox.extern .messagesContainer {
height: calc(100% - 32px);
}
/*links*/
#shoutbox a {
color: #dd0b6a;
}
/*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;
}
/*Fond principal*/
--mainBg: #f0f;
/*Fond des boites*/
--boxBg: #ff0;
/*Fond message topic*/
--topicSecBg: #f0f000;
/*Rouge utilisé pour les liens + titres*/
--redTitleLinks: #959;
/*Couleur du texte*/
--textColor: #f0f;
/*Couleur des champs d'entrée (zone de message, upload, heure...)*/
--inputBg: #ff8;
/*Couleur des bordures*/
--borderColor: #ff0;
/*Couleur secondaire liste des topics*/
--listSecBg: #f0f000;
/*Couleurs dégradé en haut*/
--header1:#f0f;
--header2:#d2d;
/*Couleur des textes header*/
--headerText:#fff;
/*Couleur des sous menus*/
--headerDropColor:#ff0;
--headerDropText:#f0f;
}
* {
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}
/*Couleur de fond*/
body {
background-color: var(--mainBg);
}
/*Couleur de fond message topic*/
div.topic-post.topic {
background-color: var(--boxBg);
}
/*Couleur de fond message topic 2*/
div.topic-post.topic.col {
background-color: var(--topicSecBg);
}
/*Couleur lien*/
#old .color {
color:var(--redTitleLinks);
}
/*Couleur lien*/
#old a, #old a.bold {
color:var(--redTitleLinks);
}
/*Utilisé une seule fois et à vrai dire je ne sais plus où mais fallait mettre la même couleur que les liens*/
#old a.bold:hover {
color:var(--redTitleLinks);
}
/*Couleur date post topic*/
#old .forumdate {
color:var(--textColor);
}
#old hr {
border-color:var(--textColor);
}
/*Les différents titres*/
#old h1, #old h2, #old h3, #old h5 {
color:var(--redTitleLinks);
}
/*Le gros titre utilisé comme nom de topic*/
#old h4 {
color:var(--textColor);
}
#old #start h4 {
color:var(--textColor);
}
/*Bordure pointillée autour des messages*/
div.topic-comments {
border-color:var(--borderColor);
}
/*Zone de texte*/
#old textarea {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):hover, div.field input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus, #old div.field textarea:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus {
box-shadow: 0px 0px 3px #6c6c6c inset;
}
/*Désactive les bordures*/
#old div.box > div {
border-image:none;
border:none;
}
/*Texte en haut d'un topic (Forum - Discussion)*/
#old div.box > h2 {
border-image:none;
border:none;
background-color:transparent;
color:var(--redTitleLinks);
font-size:1.1em;
}
/*Couleurs des textes*/
div#old {
color:var(--textColor);
}
a.profile-group {
color:#fff;
}
/*Couleur de la police dans l'encadré JDM*/
div.jdm {
color:var(--inputBg);
}
/*Couleur du texte dans l'encadré 'Derniers commentaires'*/
div.box div ul.arrow li a span {
color:var(--textColor) !important;
}
#old table {
color:var(--textColor);
border-color:var(--redTitleLinks);
}
/*Couleur des textes dans les listes de topics*/
#old tr {
border:none;
color:var(--textColor);
}
/*Couleur de fond secondaire dans les listes de topics*/
#old tr.col {
background-color:var(--listSecBg);
}
/*Désactive les bordures*/
#old td.incleft, #old td.incbottomcenter, #old td.incright, #old td.inclow{
background-image:none;
}
/*Désactive les images de coins de bordures*/
#old td.incbottomcorner img, #old td.inctopcorner img, #old td.inclow img {
display:none;
}
/*Texte en haut des listes de topics*/
#old td.inctitle, #old a.inctitlelink {
background-image:none;
color:var(--redTitleLinks);
font-size:1.1em;
}
#old form {
color:var(--textColor);
}
/*Pop up succès*/
.alert-success {
background-image: linear-gradient(to bottom,#a1db89 0,#82db5d 100%);
border-color:#5bcc2c;
color:var(--topicSecBg);
}
/*Pop up alerte*/
.alert-danger {
background-image: linear-gradient(to bottom,#f07171 0,#ee5c5c 100%);
border-color:#db5353;
color:var(--topicSecBg);
}
#old a.black {
color:var(--textColor);
}
#old a.black:hover {
color:#fff;
background-color:var(--borderColor);
}
#old a.innerbarlink {
color:var(--redTitleLinks);
}
#old a.innerbarlink:hover {
color:var(--redTitleLinks);
}
/*Bordure tri programmes*/
#old .triPrgmNrml {
border-color:var(--redTitleLinks);
}
/*Place un fond blanc derrière l'image de programme en cas de png*/
#old .triPrgmNrml img {
background:#fff;
}
#old div.box {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
border-radius:10px;
padding:2px;
}
/*Les champs input*/
input#title, input#delayed_date, input#delayed_time, #old div input.field, #old select, input#news_image, input#news_summary, input#subject, #old div.field input, input#file.form-control {
background-color:var(--inputBg);
background-image:none;
color:var(--textColor);
border-color:var(--borderColor);
}
#old figcaption {
color:var(--textColor);
}
#old table.inctable {
border:solid var(--borderColor) 2px;
margin: 1px;
background-color:var(--boxBg);
}
#old table.dotted {
border-color:var(--redTitleLinks);
background-color:var(--boxBg);
}
#old div.field span.label {
color:var(--redTitleLinks);
}
#old div.box-simple {
background-color:var(--boxBg);
border: solid var(--borderColor) 2px;
padding:2px;
}
.modal-content {
background-color:var(--boxBg);
}
/*Fleche de fermeture prévisualisation*/
.close {
color:var(--textColor);
}
/*Fleche de fermeture prévisualisation*/
.close:hover {
color:#fff;
}
#old span.innerbarcolor {
color:var(--textColor);
}
/*Fond envoi message privé*/
#old .mp_exp {
background-color:var(--topicSecBg);
border-color: var(--borderColor);
}
/*Fond reception d'un message*/
#old .mp_rep {
background-color:var(--listSecBg);
border-color:var(--borderColor);
}
#old .mp_rep .color {
color:var(--textColor);
}
/*Les pop-ups de rédaction message*/
#old .editeur .AskBox {
background-color:var(--topicSecBg);
border-color:var(--borderColor);
}
#old .editeur .AskBoxTop span {
color:var(--textColor)
}
#old .editeur .ABsmiley td {
background-color:var(--listSecBg);
}
.header {
background-image:linear-gradient(to bottom, var(--header1) 0px, var(--header2) 100%);
}
/*Couleur des textes header*/
.header .navbar-nav > li > a{
color:var(--headerText);
}
/*Couleur des textes sous menu*/
.dropdown-menu > li > a {
color:var(--headerDropText);
}
/*Barre de séparation sous menu*/
.dropdown-menu .divider {
background-color:var(--headerDropText);
}
/*Menu de selection header*/
.header .navbar-nav > .dropdown > a:hover,
.header .navbar-brand:hover,
.header .navbar-nav > .button > a:hover,
.header .navbar-nav > .dropdown > a:focus,
.header .navbar-nav > .dropdown.open > a,
.header .navbar-nav > .button > a:focus,
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
background-color:var(--header1);
background-image:linear-gradient(to bottom, #0000000a 0px, #0000008a 100%);
color:var(--headerText);
}
/*Sous menus*/
.navbar-nav > li > .dropdown-menu {
background:var(--headerDropColor);
border-color:var(--borderColor);
}
/*hover sous menu*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color:var(--headerDropText);
background-color:var(--headerDropColor);
background-image:linear-gradient(to bottom, #00000014 0px, #0000002b 100%);
}
Citer : Posté le 01/01/2022 17:59 | # | Fichier joint
Si vous appréciez Lephé, vous allez adorer ce thème
Je sais pas pourquoi j'ai pris du temps pour faire ça, mais bon vu que c'est trop tard autant le partager
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 02/01/2022 10:25 | #
Ou comment me haïr en 5 minutes
Si vous me trouvez trop présent dites-le hein
Citer : Posté le 02/01/2022 10:27 | #
Non mais justement, Tituya te trouvait trop absent, tu avait pas posté durant trente minutes, c'est mortel pour certaines personnes ici