Bitcoin Forum
November 05, 2024, 06:10:11 AM *
News: Latest Bitcoin Core release: 28.0 [Torrent]
 
   Home   Help Search Login Register More  
Pages: [1]
  Print  
Author Topic: Epochtalk Dark Theme  (Read 494 times)
omer-jamal (OP)
Sr. Member
****
Offline Offline

Activity: 490
Merit: 275


View Profile
June 17, 2019, 07:54:07 PM
Last edit: February 26, 2020, 03:02:02 PM by omer-jamal
Merited by dbshck (6), Halab (2), joniboini (2), TheBeardedBaby (1)
 #1

hi there,

this Simple try edit Epochtalk style (CSS) to Dark Theme

Screenshots


https://i.ibb.co/sW1m0y4/image.png                                                                    https://i.ibb.co/NT032GK/image.png



https://i.ibb.co/j5JMtXc/image.png                                                                    https://i.ibb.co/XJKGh6K/image.png


How to change appearance?

by using extensions in your browser like "Stylus"  Don't use Stylish "Stylish" browser extension steals all your internet history (thanks to TryNinja)

use Stylus extension


here to know how (GUIDE) How to easy change the appearance of Bitcointalk to dark (Dark Theme)? (written by wwzsocki)

you can test https://www.cryptos-currencies.com (First forum using Epochtalk)



Copy this style code to your stylish extension
Dark Theme Style Code

Code:

/* to hide quote from top!
--------------*/
#motd-wrap {display:none}

html, body,footer, .thread-editor-container .editor-form .editor-header,
.editor-form .editor-body .editor-preview,
.editor-form .editor-body .editor-input

{
background-color: #1c1f25;
color: #eee;
}


h1, h2, strong {color: #eee}

hr {
    color: #313133 !important;
    background-color: #313133 !important
}

table.striped {
    border-color: #191b21;
    background: #25282d;

}
table.striped thead {
    background-color: #191b21;
}

table.striped tr:nth-of-type(even), table.striped tbody:nth-of-type(even) {
    background-color: #33363c;
}

.page-header-split div:not(:first-child).moderators .label {
    color: #999;
}

label { color: #ccc }

header #motd-wrap {
    border-bottom-color: #3b3f46
}

.input-text,
.ng-modal-dialog input,

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="time"], input[type="url"], input[type="color"], select, textarea,
.input-text,tags-input .tags

{
background-color: #14161b  !important;
color: #ccc  !important;
border-color: #373b44;
}

input[type].ng-untouched, textarea.ng-untouched { border-color: #373b44 !important }

input.toggle-switch+label:before {  background-color: #1c1f25 !important;}


/* disabled inputs!
change background color to dark!
-------------------------------*/
input[type="text"]:disabled, input[type="text"][disabled], input[type="password"]:disabled, input[type="password"][disabled],
input[type="date"]:disabled, input[type="date"][disabled], input[type="datetime"]:disabled, input[type="datetime"][disabled],
input[type="datetime-local"]:disabled, input[type="datetime-local"][disabled], input[type="month"]:disabled,
input[type="month"][disabled],input[type="week"]:disabled, input[type="week"][disabled], input[type="email"]:disabled,
input[type="email"][disabled],input[type="number"]:disabled, input[type="number"][disabled], input[type="search"]:disabled,
input[type="search"][disabled],input[type="tel"]:disabled, input[type="tel"][disabled], input[type="time"]:disabled,
input[type="time"][disabled],input[type="url"]:disabled, input[type="url"][disabled], input[type="color"]:disabled,
input[type="color"][disabled], select:disabled,select[disabled], textarea:disabled, textarea[disabled],
.input-text:disabled, .input-text[disabled]

{
    background-color: #3e4146 !important;
}



header #menu-wrap #menu ul .search .search-input { background-color: inherit !important }


.editor-form.new-thread .editor-body .editor-input,
.editor-form.new-thread .editor-body .editor-preview
{
     color: #ccc !important;
     border-color: #373b44 !important;
        background-color: #1c1f25 !important;
}

.thread-editor-container {
        background-color: #1c1f25 !important;
}

input[type].ng-untouched,
textarea.ng-untouched {
    border-color: #393c42;
}

.input-info {
    background-color: #ccc;
}

body,
footer,
.thread-controls-wrap,
.page-header-split div:first-child h4,
header #breadcrumbs-wrap #breadcrumbs ul li a,
header #breadcrumbs-wrap #breadcrumbs ul li,
.page-header-split div:first-child,
select
{
    color: #ccc !important;
}

header #breadcrumbs-wrap {
    border-bottom: 1px solid #1c1f27;
}

footer, .thread-controls-wrap,
header #breadcrumbs-wrap,
.board-controls-wrap,
header #motd-wrap {
background-color: #25282f !important;
}

.thin-underline {
 border-bottom: 1px solid #434750;
}

.thread-data .post-block.highlighted {
    background-color: HSL(223, 13%, 17%);
}

.thread-data .post-block.editing {
    background-color: rgba(95, 131, 162, 0.15);
}

.polls {
    color: #dedede;
    border: 1px solid #40444c;
 }

.polls .poll-answer .poll-select {
color: #ececec;
}


.ng-modal-dialog {
background-color: #24272c;
}

/* Style Messages */
.messages .msg-container .message.sender,
.conversations .list .cell.active {
background-color: #181b21;
}

.messages .msg-container .message {
        border-bottom-color:  #2a2d33;

}

.messages .msg-container .message:first-child {
        border-top-color:  #2a2d33;
}


/*motd.ng-scope { display: none !important; }*/

.thread-data .post-block .post-user .user-avatar img,
.profile-content .profile-left .profile-avatar-container img.loaded{
border-radius: 8px;
-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    
    border-width: 3px !important;
}


.post-content  .post-title .username {
        border-radius: 5px;
}

.post-content .post-body {
    padding-left: 15px !important;
}

.thread-data .post-block:first-child {
    border-top: 1px solid #2d2e31  !important;
}

.thread-data .post-block {
 border-bottom: 1px solid #2d2e31  !important;
}

.thread-data .post-block .post-content .post-title .post-action li a strong {
    color: #65676d !important;
}

/*hide Post Hidden!*/
.thread-data .post-block.deleted {
    display: none !important;
}

/*change link color to blue
.post-block a {color: #476C8E}
.post-block a:hover {color: green; text-decoration: underline;
}*/

.thread-data .post-block .post-content .post-title {
margin-bottom: 8px !important;
}

/* change username font-weight
----------------------------------*/
.thread-data .post-block .post-content .post-title a.username {
    color: #fff !important;
    font-weight: 700 !important;
}


/* change online username icon
----------------------------------*/
.online .fa-circle-o:before {
content: ' ' !important;
}

.online:before {
font-family: FontAwesome;
    content: "\f111";
    display: inline-block;
    font-size: 11px;
}



/* quote style
-------------------*/

.quoteHeader {
border:0;
margin: 0.4rem 0 0 0;
}

.quote {
border-left: 4px solid #474c56 !important;
margin: 0 0 0.6rem 0.6rem;
padding: 0 0.6rem !important;
}

.quoteHeader a {
color: #464b54 !important;
font-size: 14px !important;
}



/* #post-tools-fixed
---------------------*/
#post-tools-fixed {
    background-color: rgba(28, 31, 37, 0.9);
    border-top-color: #33363e;

}
.editor-form .editor-footer {
    background-color: #1b1e24;
    border-top-color: #33363e;
}
/*--------*/


/* editor
----------------------*/

.editor-top-bar,
.editor-container
{
    background-color: #2b2e35;
}

.editor-container {
    border-color: #32363e;
}

.editor-form .editor-body input[type], .editor-form .editor-body .editor-input, .editor-form .editor-body .editor-preview
{
    border-top-color: #60646f;
    border-bottom-color: #60646f;
}


.inverted-button {
    border-color: #404550;
}

.editor-top-bar .editor-formatting {
    background-color: #25282f;
}




if you do not like Dark Theme and you want Default theme with Some changes
you can use this style code: https://pastebin.com/awwtxUPf



it's not completed, so you can see some page or inputs not been applied
TryNinja
Legendary
*
Offline Offline

Activity: 3010
Merit: 7428


Top Crypto Casino


View Profile WWW
June 28, 2019, 11:51:31 PM
Merited by dbshck (4), Cyrus (3), mprep (2)
 #2

Don't use Stylish...

For reference: "Stylish" browser extension steals all your internet history

Use "Stylus", a Stylish fork but without any tracking or analytics.

███████████████████████
████▐██▄█████████████████
████▐██████▄▄▄███████████
████▐████▄█████▄▄████████
████▐█████▀▀▀▀▀███▄██████
████▐███▀████████████████
████▐█████████▄█████▌████
████▐██▌█████▀██████▌████
████▐██████████▀████▌████
█████▀███▄█████▄███▀█████
███████▀█████████▀███████
██████████▀███▀██████████

███████████████████████
.
BC.GAME
▄▄▀▀▀▀▀▀▀▄▄
▄▀▀░▄██▀░▀██▄░▀▀▄
▄▀░▐▀▄░▀░░▀░░▀░▄▀▌░▀▄
▄▀▄█▐░▀▄▀▀▀▀▀▄▀░▌█▄▀▄
▄▀░▀░░█░▄███████▄░█░░▀░▀▄
█░█░▀░█████████████░▀░█░█
█░██░▀█▀▀█▄▄█▀▀█▀░██░█
█░█▀██░█▀▀██▀▀█░██▀█░█
▀▄▀██░░░▀▀▄▌▐▄▀▀░░░██▀▄▀
▀▄▀██░░▄░▀▄█▄▀░▄░░██▀▄▀
▀▄░▀█░▄▄▄░▀░▄▄▄░█▀░▄▀
▀▄▄▀▀███▄███▀▀▄▄▀
██████▄▄▄▄▄▄▄██████
.
..CASINO....SPORTS....RACING..


▄▄████▄▄
▄███▀▀███▄
██████████
▀███▄░▄██▀
▄▄████▄▄░▀█▀▄██▀▄▄████▄▄
▄███▀▀▀████▄▄██▀▄███▀▀███▄
███████▄▄▀▀████▄▄▀▀███████
▀███▄▄███▀░░░▀▀████▄▄▄███▀
▀▀████▀▀████████▀▀████▀▀
Joel_Jantsen
Legendary
*
Offline Offline

Activity: 2030
Merit: 1324

Get your game girl


View Profile
June 30, 2019, 11:43:21 PM
 #3

I simply hate using browser extensions or user-scripts to modify some behavior on my web-page if it is not an absolute necessity. Current bitcointalk has lot of user-scripts out of which some are useful while some are subjective. If the developers can survey the most widely used user-scripts and embed their functionality by default in the new forum, it will be helpful. For instance, a button that allows you to toggle between day-theme and night-mode.
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines Valid XHTML 1.0! Valid CSS!