Script to Change Bitcointalk Background Color

[Chikito]

Insert this script on Greasemonkey, Tampermonkey and others Extention.

- greasemonkey  Mozilla firefox
- tampermonkey chrome

Code:

// ==UserScript==
// @name        Droomie 
// @namespace   https://bitcointalk.org/
// @description Change Bitcointalk Background color
// @include     https://bitcointalk.org/*
// @version     1.0
// ==/UserScript==
document.body.style.background = "yellow";

For a change it other colour change "yellow"

Code:

document.body.style.background = "Black";

or
dark coral

Code:

document.body.style.background = "#cf524e";

etc...

Picture

[1713564402]

1713564402

[UserU]

Whew, the first image made me think I'm staring right at the sun.

[SFR10]

Is there a way to improve it a bit further ^{[other parts]}?
^{- Altering background color alone, has little to no effect while large portions of the screen remain the same...}

[hugeblack]

This year is the year of "dark mode". I search for this option before buying any phone or downloading any application.
I have several scripts for night mode and I am currently using 2 of them, however, the results do not look excellent.

So I hope you can add night mode with perfect harmony.

[HCP]

This year is the year of "dark mode". I search for this option before buying any phone or downloading any application.
I have several scripts for night mode and I am currently using 2 of them, however, the results do not look excellent.

So I hope you can add night mode with perfect harmony.

I use "Stylus" (https://github.com/openstyles/stylus/wiki)... it's a fork of "Stylish" extension... and a theme called: "Nex Dark Theme", which I have modded slightly to make Bitcointalk look a bit "better" (or at least, a bit more consistent).

Unfortunately, I can't find the link where I originally downloaded this theme from... but original credit to whomever the original author was!
EDIT: Found the original author: https://userstyles.org/users/655340

Code: (Modded Nex Dark Theme)

.tborder {
    border: none;
    background-color: transparent;
    padding: 0
}

form#quickModForm > table.bordercolor > tbody > tr > td {
    padding: 0;
}

/*استثناء عناصر من الغاء الحدود*/
#frmLogin table.tborder,
#creator table.tborder,
.tborder table#smfheader+table,
.tborder table#smfheader+table+table,
div#helpmenu+div#helpmain {
    border: 1px solid #373b44 !important;
}

/**/
.tborder table#smfheader+table,
.tborder table#smfheader+table+table {
    border-top: none !important;
}

.tborder table#smfheader+table {
    border-bottom: none !important;
}
#upshrinkHeader2 { padding-bottom: 1px; }
/*--------استثناء عناصر من الغاء الحدود نهاية--------*/


/* خانات الادخال input */
input,
input[type="text"],
textarea,
select {
    outline: none;
    padding: 4px;
    transition: all 0.2s;
    border-radius: 3px;
}

input:disabled  {
    background-color: #25282f;
}

input[type="button"],
input[type="submit"] {
    cursor: pointer;
    padding: 2px 10px !important;
    transition: all 0.2s;
	color: #fff;
}

input:focus, textarea:focus {
    border-color: #6393bf !important;
}


input, input[type="text"], textarea {
    border: 1px solid #aaa;
}

select {padding: 2px}




/* الردود منفصلة كصناديق
-----------------------*/
#bodyarea > form > table > tbody > tr > td > table {
    margin-top: 10px;
}

#bodyarea > form > table > tbody > tr:first-child > td > table {
    margin-top: 0;
}

#bodyarea #quickModForm .bordercolor {
    background-color: transparent;
}

#quickModForm .windowbg, #quickModForm #preview_body{
    background-color: #f7f7f7;
}
#quickModForm .windowbg2 { background-color: #fff; }

#quickModForm .windowbg,
#quickModForm .windowbg2 {
    padding: 0;
    border-radius: 5px;
}

form#quickModForm > table:first-child > tbody > tr:first-child  td.windowbg:first-child {
    border-radius: 0 0 5px 5px;
}

#quickModForm td.windowbg > table > tbody > tr > td+td,
#quickModForm td.windowbg2 > table > tbody > tr > td+td{
    padding-right: 25px !important;
    padding-left: 25px !important;
}

#quickModForm td.windowbg > table > tbody > tr > td.poster_info,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
    padding-left: 10px;
    width: 14%;
    overflow: auto !important;
    border-radius: 5px 0 0 5px;
}

#quickModForm td.windowbg > table > tbody > tr > td.poster_info {
    background-color: #f3f3f3;
}

#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
    background-color: #f7f7f7;
}
/*-------- نهاية الردود منفصلة كصناديق --------*/



/*-------------------------
	تعديلات بداخل المواضيع
--------------------------*/
.post { padding-top:5px; }

/* اخفاء Re:.. */
.subject a {display: none}

/* تغير لون الفواصل */
hr, .hrcolor {
	color: #d2d2d2;
	background-color: #d2d2d2;
}
/* نهاية تعديلات بداخل المواضيع */



/*-----------------------------------
	الاقتباسات
------------------------------------*/
.quote {
    color: inherit;
}

.quote, 
.quoteheader {
    background-color: transparent;
    border: none;
    margin-top: 0;
}

.quoteheader {
    margin-right: 3px;
}

.quoteheader:before {
	content: url(https://i.ibb.co/W0hX5KP/qicon.png);
    opacity: 0.1;
	margin: 0 5px;
}




.quoteheader,
.quote {
    border-left: 4px solid #ddd;
}

/*عند مرور الماوس*/
.quote:hover {
    border-left: 4px solid #ccc;
}

.quoteheader:hover,
.quoteheader:hover + .quote,
.quoteheader:hover,
.quoteheader:hover + .quote
{
    border-left: 4px solid #ccc;
}


/* الاقتباس اتجاة يمين 
----------------------*/
div.post[dir='rtl'] .quoteheader,
div.post[dir='rtl']  .quote{
    border-right: 4px solid #ddd;
    border-left: 0 !important;
}

div.post[dir='rtl']  .quote:hover {
 border-right-color: #ccc;
}

/* عند مرور الماوس اتجاة يمين*/
div.post[dir='rtl'] .quote:hover
{
    border-right: 4px solid #ccc;
}

div.post[dir='rtl'] .quoteheader:hover,
div.post[dir='rtl'] .quoteheader:hover + .quote {
    border-right: 4px solid #ccc;
}
/*---------- نهاية الاقتباسات ------------*/



/*-----------------------------------
    تنسيق عنوان الموضوع
------------------------------------*/
#bodyarea table.tborder tr.catbg3,
#bodyarea table.tborder tr.catbg3 td {
    background-image: none;
    background-color: #5b7e9e;
}

tr.catbg3 #top_subject {
    padding-top: 5px;
    padding-bottom: 5px;
}

#bodyarea table.tborder tr.catbg3 td:first-child {
    border-radius: 5px 0 0 0;
}

#bodyarea table.tborder tr.catbg3 td:last-child {
    border-radius: 0 5px 0 0;
}
/*---------- نهاية تنسيق عنوان الموضوع ------------*/



#bodyarea > div.tborder > table.bordercolor {
    border-radius: 5px 5px 0 0;
}

.catbg, .catbg2, .catbg3 {
    border-bottom: 0;
}

.catbg, tr.catbg td, .catbg3, tr.catbg3 td,
.catbg2, tr.catbg2 td {
    background-image: none;
    background-color: #5b7e9e;
}

tr.catbg3 #top_subject {
    padding-top: 5px;
    padding-bottom: 5px;
}

table.bordercolor tr td.catbg3:first-child {
    border-radius: 5px 0 0 0;
}

table.bordercolor tr td.catbg3:last-child {
    border-radius: 0 5px 0 0;
}

.tborder > .catbg:first-child,
table.bordercolor tr td.catbg:first-child,
.catbg2:first-child {
    border-radius: 5px 5px 0 0;
}



.bordercolor {
    margin-top: 0 !important;
}

/* الهيدر */
.tborder #smfheader td.catbg:first-child {
    border-radius: 5px 0 0 0
}

.tborder #smfheader td.catbg:last-child {
    border-radius: 0 5px 0 0
}




/* اضافة لون للمواضيع المتحكمة من صاحب الموضوع  */
#bodyarea tr.catbg3+tr td.smalltext {
    background-color: #fffce5;
    border-bottom: 1px solid #ffde7b;
}
/*---------- نهاية موضوع متحكم ------------*/



/*-----------------------------------
  تغير الصور الشخصية لدائرية
-----------------------------------*/
#quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
table > tbody > tr > td.windowbg img.avatar,
form[name=pmFolder]  img.avatar {
    display: inline-block;
    vertical-align: middle;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    object-fit: cover;
    border: 2px solid #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background: no-repeat center center;

    box-shadow: 2px 2px 4px 0px #aaa;
}

/* الحجم بالمنشورات */
#quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
form[name=pmFolder]  img.avatar /*بصفحة الرسائل*/ {
    height: 4rem;
    width: 4rem;
}

/* الحجم بصفحة العضوء */
table.bordercolor > tbody > tr > td.windowbg img.avatar {
    height: 5.75rem;
    width: 5.75rem;
}

/* الحجم بالهيدر العلوي */
#upshrinkHeader table > tbody > tr > td.windowbg img.avatar {
    height: 3.5rem;
    width: 3.5rem;
}

/* من الديف الحاويoverflow اخفاء  */
#quickModForm td.windowbg > table > tbody > tr > td.poster_info div[style^="overflow"],
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info div[style^="overflow"]{
    overflow: unset !important;
}
/*------ نهاية تغير الصور الشخصية لدائرية ------*/

/* اخفاء حدود القائمة العلوية */
.tborder table#smfheader+table,
.tborder table#smfheader+table+table {
    border: none !important;
}

div[style="border:2px solid orange; background-color:lightyellow; padding:10px; margin-bottom:5px"] {
    color: black
}
div[style="border:2px solid red; background-color:#FF9696; padding:10px; margin-bottom:5px"] {
    color: black
}
div[style="border:2px solid red; background-color:#FF9696; padding:10px; margin-bottom:5px"] a {
    color: #666666
}

/* خانات الادخال input */
input, textarea {
    border-color: #424448 !important;
    background-color: #191c23;
}
input:focus, textarea:focus {
    border-color:#567ee0 !important;
}

input[type="button"],
input[type="submit"] {
    border: none;
    background-color: #3F51B5;
    border-radius: 3px;
    padding: 4px 7px !important;
}
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #5265d9;
}


/* الوان القوائم الفاتحة */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
    border: none;
    background-image: none;
    background-color: #373b44;
}

/* لون النصوص بالثيم الاسود*/
body, td, th, tr,
.nav, .nav:link, .nav:visited,
a.nav:hover,
.windowbg, #preview_body,
.quoteheader, .codeheader, .code,
.windowbg2, .windowbg3,
.titlebg2 a:link, .titlebg2 a:visited,
.titlebg, .titlebg a:link, .titlebg a:visited,
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td,
input, textarea

{
    color: #ccc
}


/* لون الخلفية بالثيم الاسود */
.windowbg, #preview_body {
    background-color: #25282f;
}


/* الروابط */
a:visited {
    color: #939dc5;
}

a:link {
    color: #939dc5;
}

a.ul[href^="https://bitcointalk.org/"]:hover {
    color: #89c775 !important
}

.edited {
    border-bottom-color: #d6d6d6;
}


div#bodyarea .maintab_back a:link, div#bodyarea .maintab_back a:visited, div#bodyarea .mirrortab_back a:link, div#bodyarea .mirrortab_back a:visited {
    color: #939dc5;
}


/* الوان خلفية الردود */
#quickModForm .windowbg, #quickModForm #preview_body,
#quickModForm .windowbg2 {
    background-color: #23262f;
}

#quickModForm td.windowbg > table > tbody > tr > td.poster_info,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
    background-color: #20232b;
}


/* الفواصل */
hr, .hrcolor {
	color: #393c44;
	background-color: #393c44;
}



/*	الوان الاقتباسات
--------------------------*/
.quoteheader, .quoteheader a {
    color: #737c9e;
}

.quoteheader,
.quote{
    border-left: 4px solid #3d444e;
    
}

.quote:hover
{
    border-left: 4px solid #62676f;
}

.quoteheader:hover,
.quoteheader:hover + .quote
{
    border-left: 4px solid #62676f;
}

/* الاقتباس اتجاة يمين 
----------------------*/
div.post[dir='rtl'] .quoteheader,
div.post[dir='rtl']  .quote{
    border-right: 4px solid #3d444e;
}

div.post[dir='rtl']  .quote:hover {
 border-right-color: #62676f;
}

/* عند مرور الماوس اتجاة يمين*/
div.post[dir='rtl'] .quote:hover
{
    border-right: 4px solid #62676f;
}

div.post[dir='rtl'] .quoteheader:hover,
div.post[dir='rtl'] .quoteheader:hover + .quote {
    border-right: 4px solid #62676f;
}
/*---------- نهاية الوان الاقتباسات ------------*/



/* الصور الشخصية */

#quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
table > tbody > tr > td.windowbg img.avatar,
form[name=pmFolder]  img.avatar 
{
    background-color: #fff;
    border-color: #323640;
    box-shadow: 2px 2px 4px 0px #121c27;

}


/* الوان عنوان الموضوع */

#bodyarea table.tborder tr.catbg3,
#bodyarea table.tborder tr.catbg3 td {
    background-color: #373b44;

}

.catbg, tr.catbg td, .catbg3, tr.catbg3 td,
.catbg2, tr.catbg2 td {
    background-color: #3f4554;
}

#bodyarea table.tborder tr.catbg3,
#bodyarea table.tborder tr.catbg3 td {
    background-color: #373b44;
}


/* اضافة لون للمواضيع المتحكمة من صاحب الموضوع  */
#bodyarea tr.catbg3+tr td.smalltext {
    background-color: #292d38;
    border-bottom-color: #373b44;
    color: #fff
}


/* ----------------
    تعديل الالوان
------------------*/
[style^="color: black"], [style^="color:black"] {
    color: #d6d6d6 !important;
}

[style^="color: green"], [style^="color:green"] {
    color: #5bb55b !important;
}

[style^="color: red"], [style^="color:red"] {
    color: #ff3434 !important;
}

[style^="color: blue"], [style^="color:blue"] {
    color: #1f81ff !important;
}

/**/

[style^="background-color: yellow"], [style^="background-color:yellow"] {
    color: #000;
}


/* الوان شريط الانتقال بالاسفل */
.titlebg2 {
    background-image: none;
    border: none;
    background-color: #2d313a;
    color: #d6d6d6;
}


/* ايقونات الرد و التعديل و الحذف */
img.reply_button {
    /* content: url(https://i.ibb.co/d6zXLq1/brown-quote.png); */
    content: url(https://talkimg.com/images/2023/11/15/zhJOD.png);
}
img.modify_button {
    /* content: url(https://i.ibb.co/dLtnpKp/brown-edit.png); */
    content: url(https://talkimg.com/images/2023/11/15/zhjCf.png);
}
img.remove_button {
    /* content: url(https://i.ibb.co/vPDfyG9/brown-delete.png); */
    content: url(https://talkimg.com/images/2023/11/15/zhrYZ.png);
    
}


/* ايقونة الاقتباس */
.quoteheader:before {
	content: url(https://i.ibb.co/QpYLk0v/qiconw.png) !important;
    opacity: 0.22;
}


/* لون الكود */
.code {
    background-color: #2f323c;
    border-color: #444850;
}


/*تحت التجربة*/
.windowbg2 {
    background-color: #262931;
}

.bordercolor {
    background-color: #363940;
}


body {
    background-color: #191c23;
    color: #fff
}


.windowbg3 {
    background-color: #22242b;
}


/*---------------------------------
 تغير خلفية القائمة العلوية مؤقتاً !!!
الافضل تخصيص الالوان اكثر حتى يكون اكثر تناسق هذا موقت 
---------------------------------*/
/* delete this code If images are not displayed in the top menu*/

.maintab_back {
    background-image: url('https://i.ibb.co/v1vrm0d/maintab-back.gif')
}
.maintab_first {
    background-image: url('https://i.ibb.co/DKK4rrX/maintab-first.gif')
}
.maintab_last {
    background-image: url('https://i.ibb.co/C9QxkDg/maintab-last.gif')
}


.maintab_active_first {
    background-image: url('https://i.ibb.co/Q96FRdx/maintab-active-first.gif')
}
.maintab_active_back {
    background-image: url('https://i.ibb.co/5Tk3s5j/maintab-active-back.gif')
}
.maintab_active_last {
    background-image: url('https://i.ibb.co/drDZN4d/maintab-active-last.gif')
}
/* end top menu background image! code*/


/*------------------------------
    شريط التمرير الجانبي
------------------------------*/
    ::-webkit-scrollbar {
        width: 10px;
        height: 8px;
    }

    ::-webkit-scrollbar-track-piece {
        background-color: #23262f;          /*Global Track Peice(the slider noob.)*/
        -webkit-border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #373b44;            /* Up/Down slider background*/
        -webkit-border-radius: 6px;
        
    }
  
    ::-webkit-scrollbar-thumb:horizontal {
        width: 50px;
        background-color: #373b44;            /* Side/Side slider background*/
        -webkit-border-radius: 3px;
    }


    /* الشريط بالكود */
    /* الحجم */
    .code::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
    
    /*مقبض التمرير*/  
    .code::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #13161c;            /* Up/Down slider background*/
        -webkit-border-radius: 6px;
        
    }

    /*خلفية شريط التمرير*/
    .code::-webkit-scrollbar-track-piece {
        background-color: #23262f;          /*Global Track Peice(the slider noob.)*/
        -webkit-border-radius: 6px;
    }


    /* نهاية الشريط بالكود */

.windowbg b a {
    color: white
}


/* ------ نهاية شريط التمرير الجانبي ------- */

Apologies for the non-english comments... they're not mine, that was the original script author

[Rengga Jati]

It is great that we know alternative background colors. But I am just considering a better theme or background color. Those two pictures above seem not better than the default one. I'm not trying to underestimate someone's work. I just deliver my opinion honestly, buddy.

*Choose the color that is friendly to our eyes. Comfort is the main point, then color art. 

[Chikito]

Whew, the first image made me think I'm staring right at the sun.

It's easy to change colour what you want  >> yellow to gray

Is there a way to improve it a bit further ^{[other parts]}?
^-

I only know that code

np. I use simple one.

Apologies for the non-english comments... they're not mine, that was the original script author

Nevermind, thanks for sharing

.. better theme or background color.

This for background only not a theme.
You have seen a script only one line

[UserU]

It's easy to change colour what you want  >> yellow to gray

Yup, am aware of that. Just hope no sane person would consider using such color as their daily

[libert19]

No offense, but with this look I am better off using default version.

This year is the year of "dark mode". I search for this option before buying any phone or downloading any application.
I have several scripts for night mode and I am currently using 2 of them, however, the results do not look excellent.

So I hope you can add night mode with perfect harmony.

Have you tried all-in-one extension, it features good dark mode: https://bitcointalk.org/index.php?topic=5178297

Quick preview: https://youtu.be/D_t9LOdaayA

[Rengga Jati]

This for background only not a theme.
You have seen a script only one line

Yeah, that's why I said :

-snip- a better theme or background color. -snip-

I know it is applied for background only. It can be seen easily from the two examples above.

No offense, but with this look I am better off using default version.

Me too. I speak honestly, the same as you, no offense. It may depend on our point of view.
However, viewed in terms of creativity, this creation is well enough.  

[taufik123]

Actually there have been many posts about how to change the color or theme on the Bitcointalk website.
Many extensions can be chosen as desired.
I myself use the extension "Dark Reader" for Firefox.
Many options can be changed such as "dark" or "light" mode
increase "brightness", "contrats", "sepia" and "Greyscale".


There are features to change parts of text:


In the extension "Dark Reader" also provided the "Dev Tools" feature for those who want to change it by doing their own coding.

[Chikito]

We Off Topic when talking about Themes.

here : List of Bitcointalk.org Userscripts/ Add-ons have found a lot of themes.
For bitcointalk themes, SMF have source themes already https://www.smfhacks.com/smf-theme-generator.html

Code:

/*
Generated by SMF Theme Generator
http://www.smfhacks.com
*/
/* Normal, standard links. */
a:link
{
	color: #476C8E;
	text-decoration: none;
}
a:visited
{
	color: #476C8E;
	text-decoration: none;
}
a:hover
{
	color: #476C8E;
	text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
	color: #000000;
	text-decoration: none;
}
a.nav:hover
{
	color: #cc3333;
	text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
	empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
	color: #000000;
	font-size: small;
	font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
	background-color: #E5E5E8;
	margin: 0px;
	padding: 12px 30px 4px 30px;

}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
	background-color: ;
	color: #000000;
	font-family: verdana, sans-serif;
}
input, button
{
	font-size: 90%;
}

textarea
{
	font-size: 100%;
	color: #000000;
	font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
	font-size: 90%;
	font-weight: normal;
	color: #000000;
	font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
	height: 1px;
	border: 0;
	color: #666666;
	background-color: #666666;
}

/* No image should have a border when linked */
a img
{
	border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
	color: #000000;
	background-color: #D7DAEC;
	border: 1px solid #000000;
	margin: 1px;
	padding: 1px;
	font-size: x-small;
	line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
	color: #000000;
	background-color: #dddddd;
	font-family: "courier new", "times new roman", monospace;
	font-size: x-small;
	line-height: 1.3em;
	/* Put a nice border around it. */
	border: 1px solid #000000;
	margin: 1px auto 1px auto;
	padding: 1px;
	width: 99%;
	/* Don't wrap its contents, and show scrollbars. */
	white-space: nowrap;
	overflow: auto;
	/* Stop after about 24 lines, and just show a scrollbar. */
	max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
	color: #000000;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
	font-size: x-small;
	line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
	cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
	color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
	width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
	background-color: yellow;
	font-weight: bold;
	color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
	color: #000000;
	background-color: #ECEDF3;
}
.windowbg2
{
	color: #000000;
	background-color: #F6F6F6;
}
.windowbg3
{
	color: #000000;
	background-color: #E0E1E8;
}
/* the today container in calendar */
.calendar_today
{
	background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
	color: black;
	font-style: normal;
	background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
	border-bottom: solid 1px #9BAEBF;
	border-top: solid 1px #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
	font-weight: bold;
	color: black;
	font-style: normal;
}

.titlebg a:hover
{
	color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
	color: black;
	font-style: normal;
	text-decoration: underline;
}

.titlebg2 a:hover
{
	text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
	background: url(images/catbg.jpg) #88A6C0 repeat-x;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
	background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
	border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
	font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
	font-size: 95%;
	color: white;
	text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
	color: white;
	text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
	color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
	background-color: #ADADAD;
	padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
	padding: 1px;
	border: 1px solid #696969;
	background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
	font-size: x-small;
	font-family: verdana, sans-serif;
}
.middletext
{
	font-size: 90%;
}
.normaltext
{
	font-size: small;
}
.largetext
{
	font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
	width: 100%;
	overflow: auto;
	line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
	width: 100%;
	overflow: auto;
	padding-bottom: 3px;
	line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error
{
	color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
	color: white;
	text-transform: uppercase;
	vertical-align: top;
}
.maintab_back, .maintab_active_back
{
	color: white;
	text-decoration: none;
	font-size:  9px;
	vertical-align: top;
	padding: 2px 6px 6px 6px;
	font-family: tahoma, sans-serif;
}

.maintab_first
{
	background: url(images/maintab_first.gif) left bottom no-repeat;
	width: 10px;
}
.maintab_back
{
	background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
	background: url(images/maintab_last.gif) left bottom no-repeat;
	width: 8px;
}
.maintab_active_first
{
	background: url(default/images/maintab_active_first.gif) left bottom no-repeat;
	width: 6px;
}
.maintab_active_back
{
	background: url(default/images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
	background: url(default/images/maintab_active_last.gif) left bottom no-repeat;
	width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
	color: white;
	text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
	color: #e0e0ff;
	text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
	color: white;
	text-transform: uppercase;
	vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
	color: white;
	text-decoration: none;
	font-size: 9px;
	vertical-align: bottom;
	padding: 6px 6px 2px 6px;
	font-family: tahoma, sans-serif;
}

.mirrortab_first
{
	background: url(images/mirrortab_first.gif) no-repeat;
	width: 10px;
}
.mirrortab_back
{
	background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
	background: url(images/mirrortab_last.gif) no-repeat;
	width: 6px;
}
.mirrortab_active_first
{
	background: url(images/mirrortab_active_first.gif) no-repeat;
	width: 6px;
}
.mirrortab_active_back
{
	background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
	background: url(images/mirrortab_active_last.gif) no-repeat;
	width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
	color: white;
	text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
	color: #e0e0ff;
	text-decoration: none;
}

/* The AJAX notifier */
#ajax_in_progress
{
	background: #32CD32;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 18pt;
	padding: 3px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

Change colour code there what you want.


So Back to the topic about the background

When you want to change your background on an image
Just change colour code with image host

Code:

document.body.style.background = "url('https://i.ibb.co/wMNJfVg/btc.png')";

I already practice it



Let's experience your self

And please keep this thread on a topic about the background

[tbct_mt2]

And please keep this thread on a topic about the background

Ok, I am going to stay on-topic, about the background, not theme.

Could you add an option to adjust the transparency of the background, please.

It is not good if the background looks more eyes-catching than the theme, and texts. If there are ways to adjust transparency to help it become more blurry, it will be good.

Something like:

Code:

default
default*0.5 : 50% of default transparency
default*0.3: 30% of default transparency

Above is my ideas, I am not a coder.

We are here to read and discuss, not only to look at background, so it will be good if there are personalization options with a transparency option too.

[Chikito]

I can't add more code, I haven't much experience about it.
I just searching and found this code on Github

Code:

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00

You have add 2 code front original code like Green [#008000] to be transparency 50% >> [#80000000]. I have not tried it

Or you have to pick one here: https://www.rapidtables.com/web/color/html-color-codes.html
those a lot of colour without add transparent code on the line

[tbct_mt2]

I just searching and found this code on Github
~ snip ~
You have add 2 code front original code like Green [#008000] to be transparency 50% >> [#80000000]. I have not tried it

Or you have to pick one here: https://www.rapidtables.com/web/color/html-color-codes.html
those a lot of colour without add transparent code on the line

Thank you, OP.

I don't want to personalize too much, and the default (theme, background) of the forum are good for me. However, I thought I brought a good on-topic discussion on themes' modification and personalization, from which the others who love it will have one of good directions to further discuss.

[cabalism13]

Hey Script Geeks, maybe you can check this out, and have this over on your list of TODO,...
https://bitcointalk.org/index.php?topic=5212481.msg53437225#msg53437225
@HCP
@hugeblack
Would also be better if you can somewhat have a drop list when reporting shitposts so we can save time just by picking the right terms on why we're reporting it...

[HCP]

Would also be better if you can somewhat have a drop list when reporting shitposts so we can save time just by picking the right terms on why we're reporting it...

There is this "hack": https://bitcointalk.org/index.php?topic=5103488.0

I use a modified version of that (as an unpacked Brave browser extension) to add the more common ones that I use

[cabalism13]

Would also be better if you can somewhat have a drop list when reporting shitposts so we can save time just by picking the right terms on why we're reporting it...

There is this "hack": https://bitcointalk.org/index.php?topic=5103488.0

I use a modified version of that (as an unpacked Brave browser extension) to add the more common ones that I use

How to use that? @HCP Pls. PM, would like to have that thanks, but I think its designed for Mods, am I right?

[HCP]

How to use that? @HCP Pls. PM, would like to have that thanks, but I think its designed for Mods, am I right?

All the instructions are posted in the thread/posts that I linked...

It isn't just for Mods (I'm not a mod)... basically, the buttons appear in EVERY post... If you see a "shitpost", you simply click the appropriate button... In the background, it will open a new tab (basically opens the "Report to moderator" link), it then fills in the "Enter comment" textbox automatically based on the button you clicked and then, after a brief timeout (to enable you to cancel if you click the wrong button by mistake), it will submit it.

It is very useful if you find yourself reporting a lot of posts for the same reason... you can simply add in another button with the "reason" and then a single click will report the post for you.

[0x256]

Unfortunately, I can't find the link where I originally downloaded this theme from... but original credit to whomever the original author was!
EDIT: Found the original author: https://userstyles.org/users/655340

https://bitcointalk.org/index.php?topic=5158707.msg51831518#msg51831518