Page 1 sur 1

Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 15:59
par Doctor
Bonjours les gents ! Aalors comme j'était parti pour faire un thème sombre pour la Bd j'me suis dit que j'allais faire pareil pour le forum ^^

Voici ce que ça donne

Image
Image

et maintenant voila comment faire !

1 : Installer cette extensions
https://chrome.google.com/webstore/deta ... gmne?hl=fr
ou
https://addons.mozilla.org/fr/firefox/addon/styl-us/

2 : Une fois installé vous cliqué sur l'addon et vous cliquez sur
Écrire un style pour :
forumhfsplay.fr


(cliquez bien sur le premier mot du lien [forum en l’occurrence])

3 : Vous copiez le code en dessous et le collez dans la zone de texte

4 : c'est fait !


* {
color: #858585 !important;
background-color: rgba(117, 74, 74, 0) !important;
border-color: #000 !important;
border-top-color: #000 !important;
border-bottom-color: #000 !important;
border-left-color: #000 !important;
border-right-color: #000 !important;
}

body {
background: #0b0b0b !important;
}

a,
a * {
color: #764811 !important;
}

a:hover,
a:hover *,
a:visited:hover,
a:visited:hover *,
span[onclick]:hover,
div[onclick]:hover,
[role="link"]:hover,
[role="link"]:hover *,
[role="button"]:hover *,
[role="menuitem"]:hover,
[role="menuitem"]:hover *,
.link:hover,
.link:hover * {
color: #dc7300 !important;
}

a:visited,
a:visited * {
color: #6c6c6c !important;
}

a.highlight,
a.highlight *,
a.active,
a.active *,
.selected,
.selected *,
[href="#"] {
color: #b4b4b4 !important;
font-weight: bold !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
strong,
[id*="headline"],
[class*="headline"],
[id*="header"],
[class*="header"],
[class*="header"] td {
color: #b4b4b4 !important;
}

a h1,
a h2,
a h3,
a h4,
a h5,
a h6,
h1 a,
h2 a,
h3 a,
a strong,
a[id*="headline"],
a[class*="headline"],
a[id*="header"],
a[class*="header"] {
text-decoration: underline !important;
}

[class*="error"],
[class*="alert"],
code,
span[onclick],
div[onclick] {
color: #900 !important;
}

::-moz-selection {
background: #b4b4b4 !important;
color: #000 !important;
}

::selection {
background: #b4b4b4 !important;
color: #000 !important;
}

:focus {
outline: none !important;
}


/*----- MENU & CO BACKGROUND-COLORS -----*/
div[style="display: block;"],
div[role="navigation"] {
background: rgba(0, 0, 0, .5) !important;
}

table {
background: rgba(40, 30, 30, .6) !important;
border-radius: 6px !important;
}

table > tbody > tr:nth-child(even),
table > tbody > tr > td:nth-child(even) {
background-color: rgba(0, 0, 0, .2) !important;
}

iframe,
embed,
nav,
label [onclick],
nav ul,
div[style*="position:"][style*="left:"][style*="visible"],
div[style*="z-index:"][style*="left:"][style*="visible"],
div[style*="-moz-user-select"],
div[role="menu"],
div[role="dialog"],
span[class*="script"] div,
[id*="menu"],
[id*="Menu"],
[class*="dropdown"],
[class*="popup"],
[class="title"],
ul[style*="display:"],
ul[style*="visibility:"] ul,
[id*="nav"] ul,
[class*="nav"] ul,
ul[class*="menu"],
a[onclick][style*="display"],
a[id*="ghosteryfirefox"],
#ghostery-purple-bubble,
#translator-popup,
.menu,
.tooltip,
.hovercard,
.vbmenu_popup {
background: rgba(5, 5, 5, .9) !important;
border-radius: 5px;
box-shadow: 1px 1px 5px #000 !important;
}

header,
#header,
footer,
#footer {
background: rgba(19, 19, 19, .9) !important;
box-shadow: 0 0 5px #000 !important;
}

body > #dialog,
body > .xenOverlay {
background: rgba(19, 19, 19, .96) !important;
background-clip: padding-box !important;
box-shadow: 0 0 15px #000, inset 0 0 0 1px rgba(200, 200, 200, .5), inset 0 0 5px #111 !important;
border: 10px solid rgba(99, 99, 99, .7) !important;
border-radius: 0 !important;
}

[id*="overlay"],
[id*="lightbox"],
blockquote {
background-color: rgba(35, 35, 35, .9) !important;
border-radius: 5px;
}

pre,
dl,
.Message code {
background-color: rgba(5, 5, 5, .5) !important;
}

input,
select,
button,
[role="button"],
a.button,
a.submit,
a.BigButton,
a.TabLink,
.install[onclick] {
-moz-appearance: none !important;
-webkit-appearance: none !important;
transition: border-color 0.5s !important;
color: #696969 !important;
border: 2px solid #333 !important;
border-radius: 8px !important;
box-shadow: 0 0 2px rgba(0, 0, 0, .9) !important;
}

a[href="javascript:;"],
a[class*="button"]:not(:empty),
a[id*="button"]:not(:empty),
a[id*="Button"]:not(:empty),
div[class*="button"][onclick] {
transition: border-color 0.3s !important;
background: #060606 !important;
color: #BBB !important;
text-shadow: 0 1px #000 !important;
border-color: #333 !important;
box-shadow: 0 0 2px rgba(0, 0, 0, .9) !important;
}

a[href="javascript:;"]:hover,
a[class*="button"]:not(:empty):hover,
a[id*="button"]:hover,
a[id*="Button"]:not(:empty):hover,
div[class*="button"][onclick]:hover {
background: #151515 !important;
color: #FFF !important;
}

input *,
select *,
button *,
a.button *,
a.submit * {
color: #BBB !important;
text-shadow: none !important;
}

input:hover,
input[type="button"]:hover,
select:hover,
button:hover,
[role="button"]:hover,
a.button:hover,
a.submit:hover,
a.BigButton:hover,
a.TabLink:hover {
border: 2px solid #555 !important;
border-top-color: #555 !important;
border-bottom-color: #555 !important;
border-left-color: #555 !important;
border-right-color: #555 !important;
}

input:focus,
select:focus {
box-shadow: 0 0 5px #485050 !important;
}

input *:hover * {
color: #F0F0F0 !important;
text-shadow: 0 0 2px #FFF !important;
}

input[disabled],
select[disabled],
button[disabled],
input[disabled]:hover,
select[disabled]:hover,
button[disabled]:hover,
input[disabled]:focus,
select[disabled]:focus,
button[disabled]:focus {
opacity: 0.5 !important;
border-color: #333 !important;
}

input[type="checkbox"] {
border-radius: 1px !important;
}

input[type="radio"],
input[type="radio"]:focus {
border-radius: 100% !important;
}

input[type="checkbox"],
input[type="radio"] {
min-width: 12px;
min-height: 12px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
border-color: #966a0a !important;
box-shadow: 0 0 5px #a12d03 !important;
}

select {
padding-right: 15px !important;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAeSURBVBhXY5g5c+Z/BiwALo6uAEMDTACXSWgSDAwA4jATh950E30AAAAASUVORK5CYII=) no-repeat right 4px center #060606 !important;
transition: border-color 0.3s, background-position 0.3s !important;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.button:active,
a[class*="button"]:not(:empty):active,
a.submit:active,
a.BigButton:active,
a.TabLink:active,
.Active .TabLink {
background: #292929 !important;
color: #FFF !important;
}

textarea {
-moz-appearance: none !important;
-webkit-appearance: none !important;
background: rgba(0, 0, 0, .3) !important;
border-radius: 3px !important;
border: 1px solid #000 !important;
box-shadow: inset 0 0 8px #000 !important;
transition: border-color, background, 0.3s !important;
}

textarea,
textarea * {
color: #C8C8C8 !important;
text-shadow: 0 0 1px gray !important;
}

textarea:hover,
textarea:focus:hover {
border-color: #333 !important;
}

textarea:focus {
background: rgba(0, 0, 0, .5) !important;
border-color: #222 !important;
}

textarea:focus,
textarea:focus > * {
text-shadow: none !important;
box-shadow: none !important;
}

option,
optgroup {
-moz-appearance: none !important;
-webkit-appearance: none !important;
background: none !important;
color: #666 !important;
}

optgroup {
background: #222 !important;
color: #DDD !important;
}

option:not([disabled]):hover,
option:focus,
option:checked {
background: linear-gradient(#333, #292929) !important;
color: #DDD !important;
}

body,
*:not(:empty):not(html):not(span):not(a):not(b):not(option):not(select):not(img):not([style="display: block;"]):not([onclick*="open"]):not([onclick*="s_objectID"]):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="SPRITE"]):not([id*="SPRITE"]):not([class*="item"]):not([id*="item"]):not([class*="thumb"]):not([class*="icon"]):not([class*="photo"]):not(.view):not(.text):not([id*="lbImage"]):not([class*="cc-in"]):not([class*="gr-body"]):not([id*="watch"]):not(#globalsearch),
.r3_hm,
.gmbutton2 b,
.gtab-i,
.ph,
.bstab-iLft,
.csb,
#pagination div,
[style*="sprite2.png"],
#mw-head-base,
#mw-page-base {
background-image: none !important;
}

img {
opacity: .8 !important;
transition: opacity .5s;
}

img:hover,
a:hover img,
#mpiv-popup {
opacity: 1 !important;
}
Bien sur c'est pas parfait , mais justement si vous voulez le modifier ou l’améliorer n’hésitez pas ^^

Re: Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 16:09
par wildpumpk1n
Oh c'est top! Tain y'a vraiment pas mal de chose top en ce moment :)

Perso' le fond un peu plus gris que noir et ca serait parfait :)

Re: Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 17:45
par Doctor
ligne 12 tu modifie
#0b0b0b
par
#0b0b0beb

:)

Re: Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 18:22
par wildpumpk1n
Ah c'est top, c'est fou ce truc :) Faudra juste que je trouve comment mettre le texte un chouille plus blanc Et Bim

Re: Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 20:34
par Doctor
Ligne 2 tu met #d6d6d6 a la place de #858585

Re: Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 21:10
par bakaskal
wildpumpk1n a écrit :
23 oct. 2019 - 18:22
Ah c'est top, c'est fou ce truc :) Faudra juste que je trouve comment mettre le texte un chouille plus blanc Et Bim
Punaise les gars vous sortez de vos cercueils tous les matins ?!!!!

Image

Re: Theme Sombre Pour le forum (V1)

Publié : 23 oct. 2019 - 21:19
par wildpumpk1n
bakaskal a écrit :
23 oct. 2019 - 21:10
wildpumpk1n a écrit :
23 oct. 2019 - 18:22
Ah c'est top, c'est fou ce truc :) Faudra juste que je trouve comment mettre le texte un chouille plus blanc Et Bim
Punaise les gars vous sortez de vos cercueils tous les matins ?!!!!
Bouaaaahhhhhhhhh :mrgreen:

Image

Re: Theme Sombre Pour le forum (V1)

Publié : 24 oct. 2019 - 18:44
par serviettzky62
Génial ca marche impec, ca sooo 2019 ;) : mes yeux te remercient :geek:

Re: Theme Sombre Pour le forum (V1)

Publié : 11 nov. 2019 - 03:59
par toddwarch
Génial ca marche.
lenny face