0x256 (OP)
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 14, 2020, 10:32:26 PM Merited by suchmoon (7), Welsh (6), LoyceV (4), hugeblack (4), mprep (3), ibminer (3), Cyrus (2), Daniel91 (2), TryNinja (2), Pmalek (2), o_e_l_e_o (2), OgNasty (1), tranthidung (1), hd49728 (1), cryptoaddictchie (1), Heisenberg_Hunter (1) |
|
![](https://ip.bitcointalk.org/?u=https%3A%2F%2Fi.ibb.co%2FckTQ0n4%2Fimage.png&t=665&c=-UfdHurj0DHfdg) 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 ![Smiley](https://bitcointalk.org/Smileys/default/smiley.gif) Additions and modifications are welcome /* ---------------------------------------------------- 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); }
|
|
|
|
Last of the V8s
Legendary
Offline
Activity: 1652
Merit: 4392
Be a bank
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 15, 2020, 05:11:27 AM |
|
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
Legendary
Offline
Activity: 2198
Merit: 1049
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 15, 2020, 06:00:14 AM |
|
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-onsThank you and I am waiting for you coming scripts.
|
|
|
|
Shimmiry
Full Member
![*](https://bitcointalk.org/Themes/custom1/images/star.gif) ![*](https://bitcointalk.org/Themes/custom1/images/star.gif)
Offline
Activity: 840
Merit: 105
★Bitvest.io★ Play Plinko or Invest!
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 15, 2020, 06:18:15 AM |
|
~
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 (OP)
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 15, 2020, 11:32:15 AM Last edit: August 15, 2020, 12:44:17 PM by 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 ![Cheesy](https://bitcointalk.org/Smileys/default/cheesy.gif) Thank you all for your support and I look forward to seeing your favorite colors I refer to this was previously published here
|
|
|
|
|
dondonk
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 16, 2020, 07:38:02 PM |
|
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
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 18, 2020, 08:41:50 AM |
|
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..
|
..Stake.com.. | | | ▄████████████████████████████████████▄ ██ ▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄ ██ ▄████▄ ██ ▀▀▀▀▀▀▀▀▀▀ ██████████ ▀▀▀▀▀▀▀▀▀▀ ██ ██████ ██ ██████████ ██ ██ ██████████ ██ ▀██▀ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██████ ██ █████ ███ ██████ ██ ████▄ ██ ██ █████ ███ ████ ████ █████ ███ ████████ ██ ████ ████ ██████████ ████ ████ ████▀ ██ ██████████ ▄▄▄▄▄▄▄▄▄▄ ██████████ ██ ██ ▀▀▀▀▀▀▀▀▀▀ ██ ▀█████████▀ ▄████████████▄ ▀█████████▀ ▄▄▄▄▄▄▄▄▄▄▄▄███ ██ ██ ███▄▄▄▄▄▄▄▄▄▄▄▄ ██████████████████████████████████████████ | | | | | | ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ █ ▄▀▄ █▀▀█▀▄▄ █ █▀█ █ ▐ ▐▌ █ ▄██▄ █ ▌ █ █ ▄██████▄ █ ▌ ▐▌ █ ██████████ █ ▐ █ █ ▐██████████▌ █ ▐ ▐▌ █ ▀▀██████▀▀ █ ▌ █ █ ▄▄▄██▄▄▄ █ ▌▐▌ █ █▐ █ █ █▐▐▌ █ █▐█ ▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀█ | | | | | | ▄▄█████████▄▄ ▄██▀▀▀▀█████▀▀▀▀██▄ ▄█▀ ▐█▌ ▀█▄ ██ ▐█▌ ██ ████▄ ▄█████▄ ▄████ ████████▄███████████▄████████ ███▀ █████████████ ▀███ ██ ███████████ ██ ▀█▄ █████████ ▄█▀ ▀█▄ ▄██▀▀▀▀▀▀▀██▄ ▄▄▄█▀ ▀███████ ███████▀ ▀█████▄ ▄█████▀ ▀▀▀███▄▄▄███▀▀▀ | | | ..PLAY NOW.. |
|
|
|
0x256 (OP)
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 18, 2020, 03:31:53 PM |
|
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/bitcointalkCss 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
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 18, 2020, 05:23:56 PM |
|
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.
|
..Stake.com.. | | | ▄████████████████████████████████████▄ ██ ▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄ ██ ▄████▄ ██ ▀▀▀▀▀▀▀▀▀▀ ██████████ ▀▀▀▀▀▀▀▀▀▀ ██ ██████ ██ ██████████ ██ ██ ██████████ ██ ▀██▀ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██████ ██ █████ ███ ██████ ██ ████▄ ██ ██ █████ ███ ████ ████ █████ ███ ████████ ██ ████ ████ ██████████ ████ ████ ████▀ ██ ██████████ ▄▄▄▄▄▄▄▄▄▄ ██████████ ██ ██ ▀▀▀▀▀▀▀▀▀▀ ██ ▀█████████▀ ▄████████████▄ ▀█████████▀ ▄▄▄▄▄▄▄▄▄▄▄▄███ ██ ██ ███▄▄▄▄▄▄▄▄▄▄▄▄ ██████████████████████████████████████████ | | | | | | ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ █ ▄▀▄ █▀▀█▀▄▄ █ █▀█ █ ▐ ▐▌ █ ▄██▄ █ ▌ █ █ ▄██████▄ █ ▌ ▐▌ █ ██████████ █ ▐ █ █ ▐██████████▌ █ ▐ ▐▌ █ ▀▀██████▀▀ █ ▌ █ █ ▄▄▄██▄▄▄ █ ▌▐▌ █ █▐ █ █ █▐▐▌ █ █▐█ ▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀█ | | | | | | ▄▄█████████▄▄ ▄██▀▀▀▀█████▀▀▀▀██▄ ▄█▀ ▐█▌ ▀█▄ ██ ▐█▌ ██ ████▄ ▄█████▄ ▄████ ████████▄███████████▄████████ ███▀ █████████████ ▀███ ██ ███████████ ██ ▀█▄ █████████ ▄█▀ ▀█▄ ▄██▀▀▀▀▀▀▀██▄ ▄▄▄█▀ ▀███████ ███████▀ ▀█████▄ ▄█████▀ ▀▀▀███▄▄▄███▀▀▀ | | | ..PLAY NOW.. |
|
|
|
0x256 (OP)
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
August 18, 2020, 06:52:59 PM |
|
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 (OP)
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
September 08, 2021, 08:22:42 PM |
|
It's good to know working fine after a long time ![Cheesy](https://bitcointalk.org/Smileys/default/cheesy.gif) memories...
|
|
|
|
Trojane
Member
![*](https://bitcointalk.org/Themes/custom1/images/star.gif)
Offline
Activity: 294
Merit: 28
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
September 12, 2021, 12:53:06 AM |
|
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/bitcointalkCss 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 (OP)
|
![](https://bitcointalk.org/Themes/custom1/images/post/xx.gif) |
October 28, 2022, 10:51:37 AM |
|
Unfortunately, most extensions based on "Chromium" next year will not work like ( adblock , stylus )...
|
|
|
|
|