Title: Epochtalk Dark Theme
Post by: omer-jamal on June 17, 2019, 07:54:07 PM
hi there, this Simple try edit Epochtalk style (CSS) to Dark Theme Screenshotshttps://i.ibb.co/0X1w3Qx/image.png https://i.ibb.co/N6P150M/image.pnghttps://i.ibb.co/sW1m0y4/image.png (https://i.ibb.co/sW1m0y4/image.png) https://i.ibb.co/NT032GK/image.png (https://i.ibb.co/NT032GK/image.png) https://i.ibb.co/ZBpkztp/image.png https://i.ibb.co/tsDqbVD/image.pnghttps://i.ibb.co/j5JMtXc/image.png (https://i.ibb.co/j5JMtXc/image.png) https://i.ibb.co/XJKGh6K/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 (https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/) (thanks to TryNinja (https://bitcointalk.org/index.php?action=profile;u=557798)) use Stylus extension https://i.ibb.co/jySyPWY/ico.jpghere to know how (GUIDE) How to easy change the appearance of Bitcointalk to dark (Dark Theme)? (https://bitcointalk.org/index.php?topic=5152016.0) (written by wwzsocki (https://bitcointalk.org/index.php?action=profile;u=131333)) you can test https://www.cryptos-currencies.com (First forum using Epochtalk) Copy this style code to your stylish extension Dark Theme Style 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 (https://i.ibb.co/mcHX67G/image.png) 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
Title: Re: Epochtalk Dark Theme
Post by: TryNinja on June 28, 2019, 11:51:31 PM
Don't use Stylish...
For reference: "Stylish" browser extension steals all your internet history (https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/)
Use "Stylus", a Stylish fork but without any tracking or analytics.
Title: Re: Epochtalk Dark Theme
Post by: Joel_Jantsen on June 30, 2019, 11:43:21 PM
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.
|
