custom your bitcointalk header and profile page [css only]

[0x256]

change the color by changing the values ​​of the variables
for example, the main color in the image above --main_color: #006b9f;
and share your favorite customization with us 

Additions and modifications are welcome

Code:

/* ----------------------------------------------------
    custom bitcointalk header 
    author: 0x256 ¯\_(ツ)_/¯
    url: https://bitcointalk.org/index.php?action=profile;u=2680306
------------------------------------------------------*/

:root {
    
/*---------------------------------------------------
custom your style by changing these values below 
---------------------------------------------------*/
    
/* header position: fixed or absolute */
    --header_position: fixed;

/* main colors */
    
    --main_color: #006b9f;
    
    /*basic options*/
    --h_bgColor: #fff;
    --h_fColor: #000;
    --h_act_color: var(--main_color);
    
    
    /*additional options*/
    --logo_color: var(--h_fColor);
    --h_act_bgColor: var(--h_bgColor);
    
        /*header links on mouse hover */
    --h_bgColor_hover: var(--h_bgColor);
    --h_fColor_hover: var(--h_fColor);
    
    
    
    /* search input and button */
    --btn_bgColor: var(--main_color);
    --btn_fColor: var(--h_bgColor);
    
    --input_bgColor: var(--h_bgColor);
    --input_fColor: var(--h_fColor);
    --input_bColor: #ccc;
    
    /* end custom  */
    
    
}

/*overflow html page!*/
html {
/*     overflow-x: hidden; */
}

/* navbar */
body > div.tborder+table {
    position: var(--header_position);
    top: 10px;
    left: 160px;
}

/*change Bitcoin_Forum_color */
    table#smfheader td.catbg >span {
    color: var(--logo_color);
    
    
} /* separator between Bitcoin Forum and navbar */
table#smfheader td.catbg >span:after {
    content: "";
    border-right: 1px solid var(--h_fColor);
    padding-right: 8px;
    opacity: 0.15;
}


/*---------------------------------------------
    navbar
---------------------------------------------*/
/* remove navbar background */
body > div.tborder+table .maintab_back, .maintab_active_back {
    background-image: none !important;
    padding: 0;
}
.maintab_first,
.maintab_last,
.maintab_active_first,
.maintab_active_last {
    display: none;
}


.maintab_active_back > a {
    color: var(--h_act_color) !important;
    background-color: var(--h_act_bgColor) !important;
}

body > div.tborder+table .maintab_back a:link, body > div.tborder+table .maintab_back a:visited,
.maintab_active_back a:link, .maintab_active_back a:visited {
    padding: 10px 6px !important;
    color: var(--h_fColor);
}
body > div.tborder+table .maintab_back a:hover,
.maintab_active_back a:hover {
    opacity: 0.85;
    background-color: var(--h_bgColor_hover);
    color: var(--h_fColor_hover);
}
body > div.tborder+table .maintab_back a:hover strong {
    border-color: var(--h_bgColor_hover);
}
/*---------------- end navbar --------------------*/

/* remove simple machines logo (smflogo) from header */
table#smfheader tr:first-child > td+td.catbg img {
    display: none;
}

/*  top bar */
table#smfheader {
    position: var(--header_position);
    top: 0; left: 0; right: 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
}

/*element up to header*/
body > div.tborder+table,
table#smfheader,
.tborder table#smfheader+table+table tr > td+td > form,
.tborder table#smfheader+table {
    z-index: 4;
}

table#smfheader tr > td.catbg {
    border: none;
    background-image: none;
    background-color: var(--h_bgColor);
}

table#smfheader tr > td.catbg:first-child {
    color: var(--h_fColor);
}

/*Messages notification*/
body > div.tborder+table tr > td > a > strong {
    background: #f22;
    padding: 0 4px;
    position: absolute;
    top: -2px;
    margin-left: -6px;
    color: #fff;
    border-color: var(--h_bgColor);
    border-style: solid;
    border-right: 3px;
    border-top: 3px;
    z-index: 1;
}


/* News bar */
body>.tborder {
    border: none;
    background-color: transparent;
}

#upshrinkHeader2 {
    display: table !important;
}

/* news bar style */
#upshrinkHeader2 td.titlebg2 {
    background-image: none;
    border:none;
    padding: 0;
    
    background: var(--h_bgColor);
    background: linear-gradient(
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.85)
    ) var(--main_color);
}
/*news title*/
#upshrinkHeader2 td.titlebg2 > span.smalltext > b:first-child {
    background: var(--main_color);
    background: linear-gradient(
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.4)
    ) var(--main_color);
    
    padding: 5px;
    display: inline-block;
}
/*------------- end News bar ------------*/




/*remove background behind hello username ..*/
body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child,
body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child+td {
    background: none; border: none;
    background-color: var(--h_bgColor);
    padding: 0;
}


#upshrinkHeader td#variousheadlinks {
    background-color: #fff !important;
}

/*put search input on top header*/
.tborder table#smfheader+table+table tr > td+td > form {
    display: inline-block !important;
    position: var(--header_position);
    background: none; border: none;
    top: 4px;
    right: 21%;
    z-index: 4;
}

/* hide the extra search icon */
.tborder table#smfheader+table+table tr > td+td > form > a > img {
    display: none;
}
.tborder table#smfheader+table+table tr > td+td {
        padding: none;
}

/*after header*/
.tborder table#smfheader+table {
    border-bottom: none !important;
    position: var(--header_position);
    top: 0; right: 20px;
    width: auto;
    z-index: 4;
}

#upshrinkHeader2 {
    margin-top: 30px;
}

/* remove date and time from top bar */
table#smfheader + table > tbody > tr:first-child > td:last-child span {
    display: none;
}
/*-----------------------*/



/* search input and button
------------------------------------*/
#upshrinkHeader2 input[type="text"],
#upshrinkHeader2 input[type="submit"] {
    outline: none;
    border: none;
    padding: 4px 8px;
}

/* input */
#upshrinkHeader2 input[type="text"] {
    border: 1px solid var(--input_bColor);
    background-color: var(--input_bgColor);
    color: var(--input_fColor);
}
#upshrinkHeader2 input:focus {
    border-color: var(--btn_bgColor);
}

/* button */
#upshrinkHeader2 input[type="submit"] {
    cursor: pointer;
    background: var(--btn_bgColor);
    background: linear-gradient(
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.1))
        var(--btn_bgColor);
    color: var(--btn_fColor);
}
#upshrinkHeader2 input[type="submit"]:hover {
    background: linear-gradient(
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.2))
        var(--btn_bgColor);
}
/*----------------------------------*/

/*remove search Form from top bar on screens less than 1000px (small screen) */
@media (max-width: 1000px) {
    .tborder table#smfheader+table+table tr > td+td > form {
        position: relative;
        top: 0;
        right: 0;
        z-index: 0;
    }
}


/*hellomember*/
#hellomember {
    color: var(--h_fColor);
}


/*---------------------------- 
    fixed image box
----------------------------*/
/*min  width #variousheadlinks*/
tr#upshrinkHeader td#variousheadlinks {
    min-width: 222px !important;
    max-width: 222px !important;
}

/*space before hellouser for avatar*/
table#smfheader+table tr > td.titlebg2:last-child {
    width: 62px;
}

/*first click: show user box mandatory*/
tr#upshrinkHeader[style^="display: none;"] {
    display: block !important;
    right:0;
}

/*second click and startup: hide user box off the page*/
tr#upshrinkHeader {
    position: absolute;
    right: -400px;
}

/*when box hide show avatar in header */
tr#upshrinkHeader tr > td.windowbg > img,
tr#upshrinkHeader[style=""] tr > td.windowbg > img {
    width: 32px !important;    height: 28px !important;
    position: absolute !important;
    top: -30px;
    left: -200px;
}
/*eles back avatar in normal place*/
tr#upshrinkHeader[style^="display: none;"] tr > td.windowbg > img {
    width: auto !important; height: auto !important;
    position: inherit !important;
}
/*--------------------- end fixed image box -------------------------*/

#bodyarea td[width="180"] > table.bordercolor,
#bodyarea td[width="125"] > table.bordercolor {
    background: transparent;
    border-collapse: collapse;
}

#bodyarea td[width="180"] tr > td.catbg,
#bodyarea td[width="125"] tr > td.catbg{
    background-image: none;
    border: none;    
    background: var(--main_color);
    background: linear-gradient( 
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.1))
        var(--btn_bgColor);
}

#bodyarea td[width="180"] tr+tr.windowbg2,
#bodyarea td[width="125"] tr+tr.windowbg2 {
    border-bottom: 10px solid #e5e5e8;
    background: var(--h_bgColor);
}

#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext,
#bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext {
    padding: 0;
}

#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext br,
#bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext br {
    display: none;
}

#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a,
#bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext a {
    color: var(--h_fColor);
    display: block;
    padding: 2px 8px;
}

#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a:hover,
#bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext a:hover {
    background: rgba(255, 255, 255, 0.05);
}

#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext b a,
#bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext b a {
    color: var(--main_color);
}

[1714857692]

1714857692

[1714857692]

1714857692

[1714857692]

1714857692

[1714857692]

1714857692

[1714857692]

1714857692

[Last of the V8s]

Ah well done, that's a bit of fun.

And 'custom' is a verb now. Not a snipe at op, I think it really is, works superb.

[hd49728]

Great job! I like your eyes-friendly theme.

It is a very long time since the last day there was a script for my thread List of Bitcointalk.org Userscripts/ Add-ons

Thank you and I am waiting for you coming scripts.

[Shimmiry]

~

Hoping that there would be an option in the forum where we can pick our best themes made by users in the forum, or even a contest with it. As far as I know, SMF had options if you wanted to use themes or not. Wouldn't that be a good idea as the legacy CSS of the forum is too old and haven't changed for years, only minimal updates were applied. I wanted to try this css without even downloading any addons nor extensions to preview such themes, and would also like to create one. Guess I'll reply in here soon with my css idea.

[0x256]

I wanted to try this css without even downloading any addons nor extensions to preview such themes, and would also like to create one.

you can try this css code without use extensions by copy this code inside "<style></style>" html element
and past inside "<head>" or "<body>" tag using inspect element by This method is interim, only ends once the page is refreshed  

Thank you all for your support and I look forward to seeing your favorite colors
I refer to this was previously published here

[0x256]

thanks @Shimmiry because of your question I made my first extension that's very cool!
It's simple I think this is the safest method to do that

Follow the lessons here:

http://tech-blog.tomchambers.me/2016/01/13/How-to-write-a-simple-page-rewriting-Chrome-extension/
https://developer.chrome.com/extensions


extension code: https://i.ibb.co/n8fmSR9/image.png

[dondonk]

Great, making the display of the forum colorful is cool, now I can add some new colors so that I feel more comfortable in the forum. If possible, make a css generator to make it easier for beginners to make the forum look more attractive

[Casdinyard]

thanks @Shimmiry because of your question I made my first extension that's very cool!
It's simple I think this is the safest method to do that

Follow the lessons here:

http://tech-blog.tomchambers.me/2016/01/13/How-to-write-a-simple-page-rewriting-Chrome-extension/
https://developer.chrome.com/extensions


extension code: https://i.ibb.co/n8fmSR9/image.png

Can we upload extensions so the public can use it? I'm also planning to make a smooth and modern theme of the forum and with such idea you've achieved, I might be doing the same thing, yet would be better if the extension is accessible by everyone or anyone and had a feature to both upload your own css styles (as long as it fulfills all of the possible and necessary tags to be themed) or just choose among the styles uploaded by the others. Wouldn't that be cool?

If you already planned such idea, then I'll be waiting! And if not, I'll try to create and make it happen (just try)...

Great, making the display of the forum colorful is cool, now I can add some new colors so that I feel more comfortable in the forum. If possible, make a css generator to make it easier for beginners to make the forum look more attractive

Css generator? In what way do you want it to be implemented? Css is a hard thing to do if you want everything look good and I think css generator kinda be impossible..

[0x256]

Can we upload extensions so the public can use it?

I apologize for not explaining the method of use and this is my fault hop accept my apologies

I'm also planning to make a smooth and modern theme of the forum and with such idea you've achieved, I might be doing the same thing

wonderful I'm interested in this, I like playing around and modifying the forum look for me It's a way to learn more things about CSS and web technologies.. So it would be great to learn from each other

would be better if the extension is accessible by everyone or anyone and had a feature to both upload your own css styles ...
or just choose among the styles uploaded by the others. Wouldn't that be cool?

we can upload css code to userstyles.org
here are some bitcointalk styles and themes https://userstyles.org/styles/browse/bitcointalk

Css generator? In what way do you want it to be implemented? Css is a hard thing to do if you want everything look good and I think css generator kinda be impossible..

If I understand what he means something like (Color Picker) or small extension allow users to Customize the colors and change some (CSS "Variable values" or "custom properties") or something similar I don't know if I fully understood what he meant

I apologize once again for all For not clarifying How to use it I will try to put examples here some of them

[Casdinyard]

we can upload css code to userstyles.org
here are some bitcointalk styles and themes https://userstyles.org/styles/browse/bitcointalk

I'd really want to make my own extension (would include user's input as well) to make this happen. I'm not fond of using other extensions that can and might have been injected with a code nor a script that can be used to read everything that my browser does. I'm a little sensitive with regards to privacy and security that's why I'm still having this ideas of make every possible idea happen. If ever that I wouldn't be busy for the coming weeks, I might include this to my work.

I've already seen threads and even yours on how to implement it in my local device, but still, it would be better if the extension would be exclusively for the Bitcointalk, made by the Bitcointalk users.

[0x256]

I've already seen threads and even yours on how to implement it in my local device, but still, it would be better if the extension would be exclusively for the Bitcointalk, made by the Bitcointalk users.

I apologize for misunderstanding in my previous reply.

but in this case, why might others trust in extension made by someone or a group of people in Bitcointalk?
your second solution is safer ( we can learn how made our own extension ) and we don't have to trust anyone even user here

Instead, we can learn and study the codes for these extension because most of them are open source and the code can be read
The problem here is that we do not have enough experience

for me I use Stylus because it Recommended Extension by Firefox https://i.ibb.co/rMvqJN2/image.png and it has the features that I need
however, there is no full security and privacy I have to expect everything unexpected.
https://support.mozilla.org/en-US/kb/recommended-extensions-program

[0x256]

It's good to know working fine after a long time   memories...

[Trojane]

Can we upload extensions so the public can use it?

I apologize for not explaining the method of use and this is my fault hop accept my apologies

I'm also planning to make a smooth and modern theme of the forum and with such idea you've achieved, I might be doing the same thing

wonderful I'm interested in this, I like playing around and modifying the forum look for me It's a way to learn more things about CSS and web technologies.. So it would be great to learn from each other

would be better if the extension is accessible by everyone or anyone and had a feature to both upload your own css styles ...
or just choose among the styles uploaded by the others. Wouldn't that be cool?

we can upload css code to userstyles.org
here are some bitcointalk styles and themes https://userstyles.org/styles/browse/bitcointalk

Css generator? In what way do you want it to be implemented? Css is a hard thing to do if you want everything look good and I think css generator kinda be impossible..

If I understand what he means something like (Color Picker) or small extension allow users to Customize the colors and change some (CSS "Variable values" or "custom properties") or something similar I don't know if I fully understood what he meant

Variable value are kinda different things you could use to spice up everything
And you can also pick and customize any color or insert any font of your choice...
Hope you good? 😎
Trojane💎

[0x256]

Unfortunately, most extensions based on "Chromium" next year will not work like ( adblock ,  stylus )...