Darker Than Blue Forum Theme (WIP)

Currently Viewing (Users: 0, Guests: 1)

Zombie Warrior

Sergeant Knight
Best answers
0
Darker Than Blue is a work-in-progress dark theme for the Firefox users of the forums and all of its other features (groups, media and streams). It is similar to the current default theme, however the dominant colours are black, dark shades of grey and sky blue. I say for Firefox users because I know some of the css I use and will use will probably look broken or just not work on Chrome, but otherwise it shouldn't look too broken.

Video preview of version 7 (keep in mind that this theme is still a work-in-progress):

I do not recommend any plugin, use whichever you like.
CSS:
/* Darker Than Blue - Version 8.3*/
/*
##################################################################
########################### Animations ###########################
##################################################################
*/

@keyframes colourTransition 
{
    from { color: inherit; }
    to { color: rgb(128, 175, 225); }
}

@keyframes colourTransition2
{
    from { color: rgb(128, 175, 225); }
    to { color: rgb(35, 124, 219); }
}

@keyframes colourTransition3
{
    from { color: black; }
    to { color: rgb(128, 175, 225); }
}

/*
@keyframes adminColourTransition
{
    0% 
    { 
        background: linear-gradient(rgb(35, 124, 219), rgb(128, 175, 225), rgb(217, 241, 255));
        background-clip: text;
        color: transparent;
    }
    
    10% 
    { 
        background: linear-gradient(rgb(35, 124, 219) 50%, rgb(128, 175, 225), rgb(217, 241, 255));
        background-clip: text;
        color: transparent; 
    }
    
    25% 
    { 
        background: linear-gradient(rgb(217, 241, 255), rgb(35, 124, 219) 50%, rgb(128, 175, 225)); 
        background-clip: text;
        color: transparent;
    }
    
    30% 
    { 
        background: linear-gradient(rgb(128, 175, 225), rgb(217, 241, 255), rgb(35, 124, 219) 50%); 
        background-clip: text;
        color: transparent;
    }
    
    35% 
    { 
        background: linear-gradient(rgb(128, 175, 225), rgb(217, 241, 255), rgb(35, 124, 219)); 
        background-clip: text;
        color: transparent;
    }
    
    40% 
    { 
        background: linear-gradient(rgb(128, 175, 225) 50%, rgb(217, 241, 255), rgb(35, 124, 219)); 
        background-clip: text;
        color: transparent;
    }
    
    50% 
    { 
        background: linear-gradient(rgb(35, 124, 219), rgb(128, 175, 225) 50%, rgb(217, 241, 255)); 
        background-clip: text;
        color: transparent;
    }
    
    60% 
    { 
        background: linear-gradient(rgb(217, 241, 255), rgb(35, 124, 219), rgb(128, 175, 225) 50%);
        background-clip: text;
        color: transparent; 
    }
    
    65% 
    { 
        background: linear-gradient(rgb(217, 241, 255), rgb(35, 124, 219), rgb(128, 175, 225)); 
        background-clip: text;
        color: transparent;
    }
    
    70% 
    { 
        background: linear-gradient(rgb(217, 241, 255) 50%, rgb(35, 124, 219), rgb(128, 175, 225)); 
        background-clip: text;
        color: transparent;
    }
    
    80% 
    { 
        background: linear-gradient(rgb(128, 175, 225), rgb(217, 241, 255) 50%, rgb(35, 124, 219));
        background-clip: text;
        color: transparent;
    }
    
    90% 
    { 
        background: linear-gradient(rgb(35, 124, 219), rgb(128, 175, 225), rgb(217, 241, 255) 50%);
        background-clip: text;
        color: transparent;
    }
    
    100%
    {
        background: linear-gradient(rgb(35, 124, 219), rgb(128, 175, 225), rgb(217, 241, 255));
        background-clip: text;
        color: transparent;
    }
}*/

/*
##################################################################
####################### General Navigation #######################
##################################################################
*/
#header 
{ 
    background-image: url("https://forums.taleworlds.com/images/logo/tw_logo.png");
    background-size: 50vw 10vw;
}

/* This is the old header before v7
#header { background-image: url("https://i.imgur.com/ItL64jv.png"); } */

.p-body, .p-header, .p-pageWrapper, .p-nav, #footer, .p-nav-list .p-navEl.is-menuOpen, .menu, .game-selector:hover .info a, .menu--emoji .menu-header
{ background-color: black; }

.badge.badge--highlighted, .badgeContainer.badgeContainer--highlighted::after, .label.label--red, label--red:hover, 
.medio-tile-block .medio-tile-item .thumb, .rio-showcase-container .rio-showcase-body, .label.label--yellow, 
.label.label--silver, .message-newIndicator, .rio-tiled-block .rio-tiled-item .thumb
{
    background-color: rgb(128, 175, 225);
    color: black;
    border: none;
}

a:hover, .node--unread .node-icon i::before, .medio-tile-block .medio-tile-item .thumb .playall .fa--xf, .bbCodeSpoiler-button, .message-userContent a, .rio-tiled-block .rio-tiled-item .thumb .playall .far, .message-cell.message-cell--alert a
{
    animation-name: colourTransition;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.p-nav-list .p-navEl.is-menuOpen, .menu, .p-body-inner, .block-container, .tabs--standalone, a.button, a.button.button--cta, .gridCard--container, .button, a.button.button--link, .button.button--link, .tagItem, .tooltip--basic .tooltip-content, .tooltip--reaction .tooltip-content, .block-filterBar .filterBar-filterToggle, .button.button--primary
{ border: 1px solid rgb(128, 175, 225); }

.rio-tiled-block .rio-tiled-item .thumb .playall .far { text-shadow: none; }

.block-textHeader, .p-pageWrapper, .block-header, .node--unread .node-icon i::before, .block-minorHeader, .memberHeader-name,
.menu-tabHeader .tabs-tab.is-active, .fr-toolbar .fr-command.fr-btn.fr-active, .tabs--standalone .tabs-tab.is-active, .block-tabHeader .tabs-tab.is-active, .memberTooltip-name, .blockStatus-message::before, .medio-tile-block .medio-tile-item .thumb .playall .fa--xf, .blockLink.is-selected, .block-formSectionHeader, .message-avatar-wrapper .message-avatar-online::before, .message-userContent a, .groupViewNav--item.is-active a, .overlay-title, .fr-element a, .pageNav-page.pageNav-page--current,
.categoryList-link.is-selected, .pollResult--voted .pollResult-response::before, .notice.notice--accent a:not(.button--notice), .medio-category-list .medio-category-item.is-active, .menu--emoji .menu-header, .messageNotice::before, .messageNotice:not(.messageNotice--highlighted) a, .bbTable > table > tbody > tr > th, .block-minorTabHeader, 
.block-minorTabHeader .tabs-tab.is-active, #uaThreadViewContainer h3
{ color: rgb(35, 124, 219); }

.node-icon i::before { color: rgb(128, 175, 225); }

.node--unread .node-icon i::before, .medio-tile-block .medio-tile-item .thumb .playall .fa--xf, .bbCodeSpoiler-button, .message-userContent a, .rio-tiled-block .rio-tiled-item .thumb .playall .far
{ animation-name: colourTransition2; }

.tooltip--preview .tooltip-content
{
    border-width: 1px;
    border-style: solid;
    border-right: none;
}

.structItemContainer > .structItem:first-child, .structItemContainer > .structItemContainer-group:first-child > .structItem:first-child, .structItemContainer > .structItemContainer-group:first-child > .structItem:first-child, .overlay,
.structItemContainer-group--sticky, .pageNav-page, .pageNav-page.pageNav-page--current, .pageNav-jump, .structItem, .notice,
.tooltip--preview .tooltip-content, .node + .node, .medio-tile-block .medio-tile-item .thumb, .message + .message,
.rio-table-block .rio-table-row .preview > .avatar, .block-row.block-row--separated + .block-row, .bbCodeBlock, 
.tooltip--member .tooltip-content, .block--messages .message, .select2-results__options, .bbCodeBlock--expandable .bbCodeBlock-expandContent .bbCodeBlock--expandable.bbCodeBlock--quote, .bbCodeBlock--expandable.bbCodeBlock--quote, 
.bbTable > table > tbody > tr > td, .tooltip--share .tooltip-content, .reactionsBar, .blockMessage, .notices.notices--scrolling,
.noticeScrollContainer .lSSlideWrapper, .rio-tiled-block .rio-tiled-item .thumb, .bbTable > table > tbody > tr > th
{ border-color: rgb(128, 175, 225); }

::selection, .fr-toolbar .fr-command.fr-btn:hover, .fr-popup .fr-command.fr-btn:hover, a:hover .label.label--yellow,
.fr-box.fr-basic .fr-wrapper ::selection, .shareButtons--iconic .shareButtons-button:hover, .fr-desktop .fr-command:focus,
.button:not(.button--splitTrigger):active, a.button:not(.button--splitTrigger):active, a:hover .label.label--red, .fr-popup .fr-action-buttons button.fr-command:not(.button--splitTrigger):hover, .fr-popup .fr-action-buttons button.fr-command:not(.button--splitTrigger):active, .fr-popup .fr-action-buttons button.fr-command:not(.button--splitTrigger):focus, .button.button--primary:not(.button--splitTrigger):hover, .button.button--primary:not(.button--splitTrigger):active, .button:not(.button--splitTrigger):focus, .button.button--primary:not(.button--splitTrigger):focus, .button:not(.button--splitTrigger):hover, .bbCodeSpoiler-button-title:hover, .button:not(.button--splitTrigger):hover, a.button:not(.button--splitTrigger):hover, .button:not(.button--splitTrigger):focus, a.button:not(.button--splitTrigger):focus, .button.button--cta:not(.button--splitTrigger):focus, a.button.button--cta:not(.button--splitTrigger):focus, .fr-desktop .fr-command:hover, 
a:hover .label.label--silver
{
    background-color: rgb(35, 124, 219); 
    color: black;
}

.p-body-inner, .block-footer, .ftslider_content, .ftslider_excerpt, .ftslider_title_detail, .select2-results__options,
.tooltip--preview .tooltip-content, .inputGroup.inputGroup--joined .inputGroup-text, .ftslider_title_detail, .fullwidth-title, .fullwidth-slider .es-slides > li:hover .fullwidth-title .ftslider_title_detail, .fullwidth-slider .es-slides > li:hover .fullwidth-title .ftslider_content, .fr-toolbar, .bbCodeBlock--expandable.bbCodeBlock--quote, .bbCodeBlock-content, 
.select2 .select2-selection ul > li.select2-selection__choice, .game-selector:hover .info a:hover, .bbCodeBlock, .fr-popup,
.block-filterBar .filterBar-filterToggle, .game-selector .info a, .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper,
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-separator.fr-vs, .autoCompleteList, .button.button--cta
{ background-color: rgb(28, 28, 28); }

.block-container, .block-header, .pageNav-page.pageNav-page--current, .pageNav-page, .pageNav-jump, .tabs--standalone, a.button, a.button.button--cta, .medio-tile-block .medio-tile-item, .medio-tile-block .medio-tile-item .thumb .overlays,
.block-filterBar, .gridCard--container, .gridCard--header, .rio-table-block .rio-table-row, .rio-table-block .rio-table-row .viewers > b, .button, .formRow > dt, a.button.button--link, .memberTooltip-header, .block--messages .message, .memberHeader-main, .button.button--link, .message-cell.message-cell--main, .tagItem, .message-cell.message-cell--user, .button--primary,
.blockStatus, .notice.notice--accent, .bbTable > table > tbody > tr > td, .message-responseRow, .blockMessage, 
.tooltip--share .tooltip-content, .block--messages .block-row, .pollResult.pollResult--showVoters:hover, .pollResult-voters,
.button.button--primary, .block-row.block-row--separated + .block-row, .block-row.block-row--highlighted, 
.notice.notice--primary, .rio-tiled-block .rio-tiled-item .thumb .overlays, .rio-tiled-block .rio-tiled-item, 
.bbCodeDemoBlock-item > dd, .dataList-row.dataList-row--subSection .dataList-cell, .dataList-cell.dataList-cell--alt, .dataList-cell.dataList-cell--action, .block-minorTabHeader, .message-cell.message-cell--alert
{ background-color: rgb(51, 51, 51); }

.block-filterBar, .menu-tabHeader
{ border-bottom-color: rgb(128, 175, 225); }

.rio-table-block .rio-table-row, .formRow > dt, .block-footer, .message-cell.message-cell--user, .fr-toolbar, .p-nav,
.select2 .select2-selection ul > li.select2-selection__choice, .block-formSectionHeader, .formRowSep, hr, .overlay-title,
.message-avatar-wrapper .message-avatar-online::before, .message-responseRow, .fr-popup .fr-button, .fr-popup, 
.block--messages .block-row, .gridCard--header, .avatar.avatar--separated, .block-body + .block-minorHeader,
.menu--emoji .menu-header, .rio-tiled-block .rio-tiled-item, .bbCodeDemoBlock-item > dd, .dataList-row.dataList-row--subSection .dataList-cell, .medio-tile-block .medio-tile-item, .block-minorTabHeader
{ border: none; }

.fullwidth-slider .es-slides > li:hover .fullwidth-title .ftslider_content, .menu, .overlay { box-shadow: none; }

.message-signature, .blockStatus, .game-selector:hover, .message-avatar-wrapper .message-avatar-online::before, 
.menu-linkRow:hover, .menu-linkRow.is-selected, .menu-linkRow:focus, a:hover .label.label--red, .messageNotice,
.CMTV_QT.questionMarkContainer .questionMark.questionMark--shape.questionMark--unsolved
{ border-color: rgb(35, 124, 219); }

.message-userArrow, .tooltip--member.tooltip--bottom .tooltip-arrow, .tooltip--member.tooltip--top .tooltip-arrow, 
.tooltip--basic.tooltip--top .tooltip-arrow, .fr-popup .fr-arrow, .tooltip-arrow, .block-separator
{ display: none; }

.blockStatus, .bbCodeBlock, .reactionsBar, .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a:hover, .autoCompleteList li.is-selected { border-left: 2px solid rgb(35, 124, 219) !important; }

.bbCodeBlock-title, .bbCodeBlock--expandable .bbCodeBlock-expandContent .bbCodeBlock--expandable .bbCodeBlock-title, .reactionsBar
{ background-color: rgb(38, 38, 38) !important; }

/* This is for banned people. */
[style="color: #F66;"] { color: rgb(129, 147, 225) !important; }

.p-pageWrapper, .formSubmitRow-bar, .menu-row.menu-row--alt, .menu-tabHeader, .p-navgroup-link.is-menuOpen, .menu-content,
.messageNotice, .menu-row.menu-row--clickable:hover, .menu-row.menu-row--highlighted
{ background-color: transparent; }

.structItemContainer-group--sticky .structItem, .tooltip--reaction .tooltip-content, .tooltip--basic .tooltip-content, .bbCodeBlock-content, .bbCodeSpoiler-button, .overlay-title, /* .label.label--green, */ .CMTV_QT.questionMarkContainer .questionMark.questionMark--shape.questionMark--unsolved, .menu--emoji .menu-header, .bbTable > table > tbody > tr > th, .smilieText
{ background-color: rgb(61, 61, 61); }

.smilieText { border-color: rgb(61, 61, 61); }

.avatar.avatar--default.avatar--default--text 
{ 
    background-color: transparent !important;
    color: lightblue !important;
}

.pageNav-page:not(:first-child):hover, .pageNav-page:first-child:hover,.block-filterBar .filterBar-filterToggle:hover,.block-filterBar .filterBar-menuTrigger:hover, .smilieText:hover,.tagItem:hover, .pageNav-jump.pageNav-jump--next:hover, 
.pageNav-jump.pageNav-jump--prev:hover, .shareInput-button.inputGroup-text.js-shareButton:hover, .pageNav-jump:active, .pageNav-page:active, .button.button--cta:not(.button--splitTrigger):active, .button:not(.button--splitTrigger):focus,
a.button.button--cta:not(.button--splitTrigger):active, .inputGroup.inputGroup--joined .inputNumber-button:hover, .inputGroup.inputGroup--joined .inputGroup-text:hover, .inputGroup.inputGroup--joined .inputNumber-button:active, .inputGroup.inputGroup--joined .inputNumber-button:focus
{ 
    background-color: rgb(35, 124, 219);
    color: black;
    border: 1px solid rgb(35, 124, 219);
    animation-name: colourTransition3;
}

/*
.CMTV_QT.bestAnswer:not(.is-mod-selected).bestAnswer--background .message-cell--main
{
    background-color: rgb(24, 188, 238) ;
    color: black;
}
*/

.button--primary, .button.button--icon.button--icon--save, .button.is-disabled, .button:hover, .pollResult-bar > i, .button:not(.button--splitTrigger):hover, a.button:not(.button--splitTrigger):hover
{
    background-color: rgb(35, 124, 219) !important;
    color: black !important;
    border: 1px solid rgb(35, 124, 219) !important;
}

li > .username, .structItem-minor > .username { background: inherit;}

.tooltip--member .tooltip-content, .memberTooltip-header, .bbTable > table.alternate > tbody > tr:nth-child(2n) > td
{ background-color: rgb(51, 51, 51) !important; }

.memberTooltip-header { border-bottom: none !important; }

.pageNav-page:last-child { border-right: 1px solid rgb(128, 175, 225) !important; }

.pageNav-page.pageNav-page--current, .bbTable > table > tbody > tr > th
{
    border-bottom: 1px solid rgb(128, 175, 225);
    border-top: 1px solid rgb(128, 175, 225);
}

.postItem .postItem-footer .postItem--comments::before { border-top: none; }

.pageNav-page.pageNav-page--current:first-child { border-left: 1px solid rgb(128, 175, 225); }

.shareButtons--iconic .shareButtons-button:hover { color: black !important; }

.bbCodeBlock-expandLink, .message-body.tlg-content-preview--enabled .tlg-content-cover { background: linear-gradient(to bottom, rgba(24,41,58,0) 0%, rgb(38, 38, 38) 80%); }

.message-avatar-wrapper .message-avatar-online
{ 
    left: 43%;
    margin-left: 0;
}

.bbCodeBlock-content, .menu-content 
{ 
    scrollbar-width: thin;
    scrollbar-color: rgb(35, 124, 219) transparent;
    scrollbar-gutter: always; /* This does not work yet, but it eventually will. */
}

.p-footer { background-color: black !important; }

.codeEditor.CodeMirror { border-color: transparent; }

/* .label.label--green, .CMTV_QT.questionMarkContainer .questionMark.questionMark--shape.questionMark--solved, .CMTV_QT.bestAnswerMarkContainer .bestAnswerMark.bestAnswerMark--icon.bestAnswerMark--select { color: rgb(0, 231, 255); } */

/* .label.label--green { border-color: rgb(0, 231, 255); } */

/* a.label.label--green:hover, a:hover .label.label--green 
{
    color: black;
    background: rgb(0, 231, 255);
    border-color: rgb(0, 231, 255);
} */

/* .CMTV_QT.questionMarkContainer .questionMark.questionMark--shape.questionMark--solved { border-color: rgb(0, 200, 230); } */

/* user #2 is armagan */
.username--moderator.username--admin.username--color-0 , [data-user-id="2"] > .username--color-0
{
    background: linear-gradient(silver, skyblue, steelblue);
    background-clip: text;
    color: transparent;
}

.username--staff.username--moderator, .memberTooltip-name > .username > .username--staff.username--moderator
{
    background: linear-gradient(white, lightblue, steelblue);
    background-clip: text;
    color: transparent;
}

.username--moderator { text-decoration: underline dotted; }

/* .p-body-inner { background-image: url("https://i.imgur.com/6P9WluV.png"); } */

/* 
###########################################################################
####################### Syntactic Code Highlighting #######################
###########################################################################
*/

.bbCodeCode { color: steelblue; }

.bbCodeCode .prism-token.prism-comment 
{
    font-family: "Times New Roman";
    font-style: oblique;
    color: lightgrey;
}

.bbCodeCode .prism-token.prism-selector, .bbCodeCode .prism-token.prism-function
{
    font-family: "courier";
    font-size: 10pt;
    color: skyblue;
}

.bbCodeCode .prism-token.prism-punctuation { color: cyan; }

.bbCodeCode .prism-token.prism-property { color: grey; }

.bbCodeCode .prism-token.prism-url 
{
    font-style: oblique;
    color: white;
}

.bbCodeCode .prism-token.prism-symbol, .bbCodeCode .prism-token.prism-atrule, .bbCodeCode .prism-token.prism-keyword
{
    font-weight: bold;
    font-family: "courier";
    color: white;
}

.bbCodeCode .prism-token.prism-class-name { color: rgb(80, 255, 255);}

.bbCodeCode .prism-token.prism-important 
{
    font-weight: bolder;
    font-style: oblique;
    text-decoration: underline overline dashed;
    color: lightgrey;
}

.bbCodeCode .prism-token.prism-string { color: rgb(35, 124, 219); }

.bbCodeCode .prism-token.prism-attr-value, .bbCodeCode .prism-token.prism-number { color: rgb(134, 148, 255); }

.bbCodeCode .prism-token.prism-operator 
{
    font-size: 12pt;
    color: Aquamarine;
}

Make sure that you are using Firefox before reporting something as broken.
 
Last edited:

Яowan

Grandmaster Knight
M&BWBNW
Best answers
0
Great idea! Just a small tweak I'd recommend (per personal taste), but the pagination lacks a border-right, which looks a tad odd to me.

border-right-style: none; changed to border-right-width: thin;

Code:
.pageNav-page.pageNav-page--current,
.tooltip--preview .tooltip-content {
    border-width: 1px;
    border-style: solid;
    border-right-width: thin;
}
Aaaand that is a possible tweak in the making there, but the code field is almost unreadable! Can quickly fix with the below, but you'll probs want to adjust to the palette you're going for.

Code:
.bbCodeBlock--expandable.bbCodeBlock--quote, .bbCodeBlock-content {
    background-color: rgb(180, 180, 180);
}
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
yes I noticed, I was fixing those in a different way and didn't see your comment. I'm sorry. If you could compare your changes vs mine tell me which is better it would be great!

- game selector borders are now blue on hover instead of orange
- new message indicater now black on blue instead of orange
- fixed online indicater
- fixed last page nav button not displaying its right border
- code blocks are now dark grey instead of blue
- spoiler tool tips now dark grey instead of blue
- tables are now dark grey instead of blue, but they do now have blue borders
- response bars in groups now fixed to match the theme
- fixed reaction tooltip
- fixed active links in the group sidebar
- bbcode blocks and spoilers are a bit lighter; it makes syntaxically highlighted code more readable
- insufficient posting privilege message now fits the theme
- breadcrumbs removed (the superfluous Home link in the main body which is right under the Home link in the nav bar)
- it no longer rains (uncomment the last line in the code to make it rain again)

Edit: I noticed the preview text blocks also lack a right border, were you talking about those?

Edit 2:
Todo: redo the font colours for syntactic highlighting
Todo: fix the ugly scroll bars
Todo: fix the remaining orange
Todo: missing bottom and right borders in some tool tips
If anyone wants to add or change that todo list in some other way, they are free to post suggestions
 
Last edited:

Яowan

Grandmaster Knight
M&BWBNW
Best answers
0
Looks great! Few more things:
  • Line 100, .p-breadcrumbs is set to display:none --- this removes the breadcrumb for page navigation. So above your post, for example, we lose:
    • Home > Forums > Miscellaneous > The Anachronist's Guild - Off-Topic Chat
    • As such I'd suggest removing , .p-breadcrumbs from line 100.
  • Spoilers are now readable, which is great! But text in code windows, due to the background colour, is still difficult to read. I'd recommend either lightening up the background (or otherwise just giving the colour of the code window header and body an overhaul), or adjusting the font colours within the code window - maybe using how spoilers are coloured for inspiration?
  • I'd suggest adding, to line 6, , .p-header after p-body, as it helps finish the background by unifying it under a single colour, so there aren't grey cubes to the left and right of your logo.
 

Zombie Warrior

Sergeant Knight
Best answers
0
Thank you for the feedback! I appreciate it greatly.

  • Line 100, .p-breadcrumbsis set to display:none --- this removes the breadcrumb for page navigation. So above your post, for example, we lose:
    • Home > Forums > Miscellaneous > The Anachronist's Guild - Off-Topic Chat
    • As such I'd suggest removing , .p-breadcrumbs from line 100.
I did that because I really dislike how the breadcrumbs look, but I admit I had forgotten about the functionality when I decided to remove it. I'll put it back to normal, sorry about that. (or maybe I'll try to make it look better)
  • Spoilers are now readable, which is great! But text in code windows, due to the background colour, is still difficult to read. I'd recommend either lightening up the background (or otherwise just giving the colour of the code window header and body an overhaul), or adjusting the font colours within the code window - maybe using how spoilers are coloured for inspiration?
Don't worry, redoing the syntax highlighting is on the top of my priority todo list for the next update!
  • I'd suggest adding, to line 6, , .p-header after p-body, as it helps finish the background by unifying it under a single colour, so there aren't grey cubes to the left and right of your logo.
Thank you for reporting that fact, I wasn't aware of the grey cubes!
 

Zombie Warrior

Sergeant Knight
Best answers
0
Sorry for the double post, there's an update.
- Breadcrumbs is back
- Fixed rebellious orange selection
- Fixed the overlay box to match the rest of the theme
- Header is now entirely black, good bye grey squares!
- Redid the code coloration / style, it is functionnal, but I will need some feedback as I only looked at c#, js and css code with it
- Editing the code coloration took longer than I thought it would, so I didn't do anything else on my priority todo list, sorry!
- It no longer rains

Todo: fix the ugly scroll bars
Todo: fix the remaining orange
Todo: missing bottom and right borders in some tool tips
Edit: As will soon be usual, anyone is free to suggest changes to the priority todo list
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
New update:
- Orange links are now blue while typing.
- Fixed quotes within quotes.
- Blocks now all have the correct and matching blue coloured border.
- Active navigation button now blue instead of orange.
- Active navigation button now no longer has a right border .
- External Link Pop up mini menu now dark grey instead of blue.
- Fixed the "Oops! We ran into some problems." message pop up.
- All arrows should now hidden.
- Share tool tip is now dark grey instead of blue.
- Share buttons are now uniform and consistent with the theme.
- "Yellow" labels now blue on hover instead of orange
- All buttons should be blue instead of orange on hover.
- Fixed the "There are no posts to display" box in message groups.
- A group card header no longer has a bottom border.
- It no longer rains.
- Fixed missing borders.
- Polls have blue check marks and stat bars instead of orange.
- Polls no longer have a blue separator.
- Media filter now dark grey instead of blue.
- Reaction bar now dark grey instead of blue

Todo: fix the ugly scroll bars
Todo: Revamp the header image.
Todo: Remove all the remaining orange crap.
Todo: fix the stuff which happens to look broken on phones
Anyone is free to suggest changes to the priority todo list.
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
- Menu links have a blue right border instead of orange.
- "Click to expand" blocks are now dark grey instead of blue.
- Fixed online icon to be closer to the center of the avatar.
- Removed borders on small avatars.
- Fixed ugly scrollbars. The effect will not be visible for people who do not use Firefox.
- It no longer rains.
- Active buttons now blue instead of orange. I may have missed one or two though.
- Poll voters now dark grey instead of blue.
- Removed the remaining orange in game selection.
- Removed border of minor headers in account settings.
- Block message borders are sky blue instead of dark blue.

Todo: Revamp the header image.
Todo: Start working on true support for phones.
Anyone is free to suggest changes to the priority todo list.
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
Next update will be in a while. They change stuff regularly and it breaks my css, so I'm trapped in a loop of redoing stuff which used to work.
 

Zombie Warrior

Sergeant Knight
Best answers
0
- Button focus now blue instead of orange.
- Unsolved on hover is noew blue instead of red.
- Drop down sub menu elements of the text editor now have a blue left border instead of orange.
- Also, the focus of said elements is blue instead of orange.
- Drop down sub menus of the text editor are now dark grey instead of blue.
- Text editor button behaviour fixed.
- Text editor separators are now dark grey instead of blue.
- Solved tags are now bright cyan instead of green. This is temporary until I find a better colour. Also disabled by default.
- Fixed unsolved tags.
- It no longer rains.
- uh... so... uh, you'll probably not agree with what I did to the usernames. Tell me what you think.
- Autocomplete menu now has a blue border on hover instead of orange.
- Autocomplete menu now dark grey instead of blue.
- Insert button now blue on hover, active and focus instead of orange.
- Ditto for the reply, preview, ignore and watch buttons, which I'm pretty sure I had already covered. Refixed I guess.
- Fixed a rogue orange link.
- Fixed active submit media button.
- Colour eraser button now blue on hover instead of orange.
- Emoji menu headers now blue on dark grey instead of orange on blue.
- Fixed ignored content.
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
- Fixed Content Preview.
- Fixed notification links.
- Fixed alert area.
- Fixed primary notice.
- Fixed "silver" label.
- I doesn't rain anymore.
- Fixed the stream tile view.
- Help section's demo bbcode fixed.
- Help section's smilies fixed.
- Replaced the header's image with TaleWorlds' logo. The previous image is still in the code, commented, for those who prefer it.

I consider the current desktop version to be more or less complete. There may be a few things which need to be fixed which I am not yet aware of, but I'll be mostly working on small screens (phone / tablet screens) from now on.
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
- Fixed Reactions received.
- Fixed Alerts for the second time.
- Fixed Scrolling notice.
- Tried to make best answers better fit the theme. Not enabled by default. Tell me what you think.
- Fixed Footer.
- Fixed Invite button.
- Fixed new message alert.

This is just a maintenance update. I haven't had the time to really work on the theme for some time now.
 
Last edited:

Zombie Warrior

Sergeant Knight
Best answers
0
Just a small update to fix an inconsistency in the theme's appearance when viewing groups which caught my attention. For now, I don't know when I'll start working on direct mobile support, but the project is not abandoned.
 

Zombie Warrior

Sergeant Knight
Best answers
0
Another little update. I made the new forum addon fit with the current colour scheme and made the admin names more blue, better blue.