Create a Dark style - TTI

Jan 13, 2018
5
0
0
#1
It's better in my eyes and favorite so.

1. Create a style then dark style - TTI
2. Go to template > EXTRA.css
3. Add code .CSS
Code:
body {
    color: #cecece;
    background-color: #1e1e1e !important;
}
.p-body {
    background: #1e1e1e !important;
}
.p-header {
    background: #1e1e1e !important;
}
.p-nav {
    background: #1e1e1e !important;
}
.p-sectionLinks {
    background: #828282;
    border-bottom: 1px solid black;
}
.p-nav-list .p-navEl.is-selected {
    background: #828282;
}
/* Using dark scrollbar */

::-webkit-scrollbar {
    background-color: #2e2e2e;
    width: 15px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(86, 86, 86, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(102, 102, 102, 0.4);
}
textarea::-webkit-scrollbar:vertical {
    border-left: 1px solid #3e3e3e;
}
textarea::-webkit-scrollbar-thumb:vertical {
    border-left: 1px solid #3e3e3e;
}
textarea::-webkit-scrollbar:horizontal {
    border-top: 1px solid #3e3e3e;
}
textarea::-webkit-scrollbar-thumb:horizontal {
    border-top: 1px solid #3e3e3e;
}
4. done.
 

Cosmo

Administrator
Staff member
Apr 14, 2012
1,030
347
83
#2
Nice, thanks for the CSS!

I created a new child of the default theme called "Default Dark". If you select that one, it'll include the CSS you gave me above.

I actually have another dark theme on here too, but it was disabled because the logo shill shows Curious Cosmos (that's it's own site now and this one is back to TTI). You can select "Dark Matter" and that one is a little more refined :)

Hopefully this helps!
 
Likes: Samet Chan
Jan 13, 2018
5
0
0
#3
Nice, thanks for the CSS!

I created a new child of the default theme called "Default Dark". If you select that one, it'll include the CSS you gave me above.

I actually have another dark theme on here too, but it was disabled because the logo shill shows Curious Cosmos (that's it's own site now and this one is back to TTI). You can select "Dark Matter" and that one is a little more refined :)

Hopefully this helps!
Thank you. I will add code for dark color all of the thread and member card, others more. If should be ready. I will send this reply thread update.
 
Jan 13, 2018
5
0
0
#4
Dark style has been updated and color more.
Code:
.block-container {
    background: #17171b;
}
.pairs.pairs--rows>dd {
    color: grey;
}
.block-header {
    background: linear-gradient(0deg, #202325, #6d7073);
}
.block-footer {
    color: #ededed;
    background: linear-gradient(180deg, #202325, #6d7073);
}
.block--messages .message, .block--messages .block-row {
    color: grey;
    background: #17171b;
}
.likesBar {
    background: darkgrey;
    border: 1px solid #47a7eb;
    border-left: 2px solid #47a7eb;
}
.message-cell.message-cell--user, .message-cell.message-cell--action {
    background: #2d2d32;
}
.message-userArrow:after {
    border-right-color: #17171b;
}
.button.button--link, a.button.button--link {
    background: #2d2d32;
}
 
Jan 13, 2018
5
0
0
#5
Fix missing color a little more,
Code:
.block-container {
    color: grey;
}
.contentRow-fader {
    background: transparent;
}
.fr-box.fr-basic .fr-wrapper {
    background: #2d2d32;
}
.fr-box.fr-basic .fr-element {
    color: grey;
}
.bbCodeBlock {
    background: #2d2d32;
}
.bbCodeBlock-title {
    background: #17171b;
}
.tooltip--member .tooltip-content {
    background: #17171b;
}
.memberTooltip-header {
    background: #265071;
}
 
Last edited: