I’m geting into this a bit. Hadn’t done any theming for ages, and I did used to enjoy it when people weren’t on my arse about everything. So, here’s a start on a dark variant. It’s still WIP. The typography and colour balance need more tweaking, and some of the menus are still a bit crude, but overall I think it’s in a good ballpark. These shots are all taken live on the site:
This is going with the more “standard forum” layout mentioned earlier for people who prefer that. Me? I like clean, so I like this.
The user menu at top right has a fixed height to keep the logout button in a handy location, and the scrolling list uses opacity tricks to make the scrollbar less in your face on the dark theme.
The latest posts are now in a drop menu, like so:
A standard sub-category (no thumbs, no new posts):
A standard sub-category (no thumbs, with new posts):
Sub-category with topic thumbnails:
Complete code, in its current state, is:
html {
background-color: #111;
color: #aaa !important;
font-family: 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.d-header.clearfix {
height: 4em !important;
padding-top: 6px !important;
background-color: #181818 !important;
box-shadow: 0 2px 4px #000;
}
.d-header.clearfix .nav-link {
color: #aaa !important;
font-weight: 400;
}
.wrap {
max-width: 960px !important;
background: #181818;
border: 2px solid #090909;
box-shadow: 0 0 6px #000;
}
#current-user.active>.icon {
background-color: #181818;
border-right: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
box-shadow: 3px 3px 3px #000 !important;
}
.d-header.clearfix>.wrap {
border: none;
box-shadow: none;
}
/* @WIP - Top right user menu droppy. */
.menu-panel {
background-color: #181818;
border: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
box-shadow: 3px 3px 3px #000 !important;
}
.menu-links-header li {
vertical-align: middle;
}
.menu-links-header .user-activity-link {
margin: 0 !important;
border: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
}
.glyphs>.widget-link {
display: inline-block !important;
padding: .5em 1em !important;
}
.panel-body {
overflow: hidden !important;
min-height: 226px !important;
}
.panel-body-contents {
position: relative;
}
.panel-body-contents>.logout-link {
display: block !important;
margin-top: 12px;
border: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
text-align: center;
}
.menu-links-header .user-activity-link:hover,
.glyphs>.widget-link:hover,
.panel-body-contents .widget-link.logout:hover {
background-color: #202020;
color: #ddd;
transition: background-color .2s, color .2s;
}
.panel-body-contents hr{
display: none;
}
.panel-body-contents>.notifications>ul{
height: 134px !important;
overflow: auto !important;
border: 1px solid #000;
border-right: 1px solid #222 !important;
border-bottom: 1px solid #333 !important;
opacity: 0.7;
}
.panel-body-contents>.notifications li{
background-color: #181818 !important;
}
.panel-body-contents>.notifications>ul div {
color: #129acc;
}
/* Featured bar container. */
/* Holds links, thumbnails and "Featured" button. */
.tlp-featured-topics.has-topics {
display: block !important;
width: auto !important;
overflow: hidden !important;
margin: 0 5px 1em 5px;
}
/* Links container. */
.tlp-featured-topics.has-topics>.topics {
position: relative;
display: block !important;
width: 100%;
overflow: hidden !important;
padding-top: 16% !important;
}
/* Links (thumbnails containers). */
.tlp-featured-topic {
position: absolute !important;
top: 0;
bottom: 0;
width: 16%;
margin: 0 !important;
}
.tlp-featured-topic:nth-child(2) {
left: 16.8%;
}
.tlp-featured-topic:nth-child(3) {
left: 33.6%;
}
.tlp-featured-topic:nth-child(4) {
left: 50.4%;
}
.tlp-featured-topic:nth-child(5) {
left: 67.2%;
}
.tlp-featured-topic:last-child {
right: 0;
}
/* Image thumbnails. */
.tlp-featured-topic>.thumbnail {
display: block;
width: 100% !important;
height: 100% !important;
}
.tlp-featured-topic>.featured-details {
padding: 0 !important;
}
.tlp-featured-topic.show-details>.featured-details {
background-color: #333 !important;
opacity: .93;
}
.featured-details .title {
position: absolute;
top: 0;
right: 0;
left: 0;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;
}
.tlp-featured-topic.show-details>.featured-details .title {
color: #ddd !important;
}
.featured-details .user {
left: 0;
right: 0 !important;
bottom: 0 !important;
overflow: hidden;
height: 22px;
text-align: right;
padding: 28px 35px 5px 5px !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.tlp-featured-topic.show-details .user {
background-image: linear-gradient(to bottom, rgba(51,51,51,0), rgba(51,51,51,1) 25%, rgba(51,51,51,1));
color: #fff !important;
}
.tlp-featured-topic.show-details>.featured-details .user::before {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 35px;
padding-top: 1px;
background-color: #111;
border-bottom: 1px solid #555;
}
.featured-details .avatar {
position: absolute;
right: 5px;
bottom: 5px;
}
.featured-link {
float: none !important;
padding: 0 !important;
}
.featured-link>.discourse-tag {
display: block !important;
max-width: 100% !important;
padding: 6px 8px !important;
background-color: #181818;
color: #999;
text-transform: capitalize;
border: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
}
.featured-link>.discourse-tag:hover {
background-color: #202020;
color: #ddd;
transition: background-color .3s .1s, color .3s .1s;
}
.featured-link>.discourse-tag::before {
content: "view all ";
}
.featured-link>.discourse-tag::after {
content: " topics";
}
/* @WIP - Testing latest posts as drop menu. */
.categories-and-latest {
position: relative !important;
display: block !important;
flex: none !important;
flex-flow: unset !important;
margin-top: 3em !important;
}
.categories-and-latest>.column {
flex: none !important;
flex-direction: unset !important;
}
.categories-and-latest>.column.categories {
margin-right: 0 !important;
}
.categories-and-latest>.column:last-child {
position: absolute !important;
z-index: 99;
top: -33px;
left: 5px;
right: 5px;
min-width: 230px !important;
max-width: 640px !important;
max-height: 40px;
overflow: hidden;
background-color: #181818;
border: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
flex: none !important;
flex-direction: unset !important;
transition: max-height .2s .4s, box-shadow .2s .4s;
}
.categories-and-latest>.column:last-child .table-heading {
padding-left: 12px;
color: #999;
cursor: pointer;
border-bottom: 1px solid #333 !important;
box-shadow: inset 0 -2px 0 #000;
}
.categories-and-latest>.column:last-child .table-heading::before {
content: "Show ";
}
.categories-and-latest>.column:last-child .table-heading::after {
content: " Posts \2193";
}
.categories-and-latest>.column:last-child:hover {
max-height: 2000px;
box-shadow: 3px 4px 4px #000;
transition: max-height .8s .1s, box-shadow .2s .1s;
}
.categories-and-latest>.column:last-child>.latest-topic-list {
height: auto !important;
}
.categories-and-latest>.column:last-child .latest-topic-list-item {
padding: .5em 1em !important;
opacity: 0;
transition: opacity .2s .4s;
font-size: 0.95em !important;
border-bottom: 1px solid #333 !important;
box-shadow: inset 0 -2px 0 #000;
}
.latest-topic-list-item .avatar {
max-width: 36px;
max-height: 36px;
opacity: .8;
}
.latest-topic-list-item .avatar:hover {
opacity: 1;
}
.latest-topic-list-item .main-link {
max-width: 80%;
}
.categories-and-latest>.column:last-child .latest-topic-list-item .title {
color: #aaa !important;
}.latest-topic-list-item .badge-category-parent-bg {
display: none !important;
}
.categories-and-latest>.column:last-child .latest-topic-list-item .badge-category {
color: #777 !important;
}
.categories-and-latest>.column:last-child .latest-topic-list-item .badge-category {
padding-left: 4px;
}
.categories-and-latest>.column:last-child:hover .latest-topic-list-item {
opacity: 1;
transition: opacity .4s .1s;
}
.badge-notification.new-topic {
display: inline-block;
margin: -10px 0 -2px 0 !important;
padding: 0 5px !important;
color: #0f82af !important;
font-size: 2em !important;
}
.categories-and-latest>.column:last-child .btn.pull-right {
display: block !important;
float: none !important;
margin: 1em !important;
background-color: #181818;
color: #999;
border: 1px solid #000;
border-left: 1px solid #222 !important;
border-top: 1px solid #333 !important;
}
.categories-and-latest>.column:last-child .btn.pull-right:hover {
background-color: #202020;
color: #ddd;
transition: background-color .3s .1s, color .3s .1s;
}
.categories-and-latest>.column:last-child .btn.pull-right::before {
content: "View ";
}
.categories-and-latest>.column:last-child .btn.pull-right::after {
content: " Recent Posts";
}
/* ----------------------------------------- */
.google-adsense, .badge-category-bg,
.category-list>thead, td.topics,
#suggested-topics, .topic-list .category {
display: none !important;
}
.category-list {
width: 100%;
}
.category-list>tbody {
border-top: none !important;
}
.category-list tr {
border-bottom: none !important;
}
.category-list .category {
padding: 12px 5px !important;
border-top: none !important;
border-left: none !important;
}
.category-list .category>div:first-child {
padding-top: 0.5rem;
border-bottom: 1px solid #333 !important;
box-shadow: inset 0 -2px 0 #000;
}
.category-list .category>div:first-child>h3 {
font-size: 1.4em !important;
font-weight: 400 !important;
}
.category .category-name {
color: #888;
font-weight: 400 !important;
}
.category-description {
margin: -0.25rem 6px 0.5rem 2px;
font-size: 0.9rem !important;
}
.subcategory {
position: relative;
min-height: 38px !important;
border-bottom: 1px solid #333 !important;
box-shadow: inset 0 -2px 0 #000;
}
.subcategory>.badge-wrapper {
position: absolute !important;
display: block;
top: 0;
right: 108px;
bottom: 0;
left: 45px;
z-index: 5;
overflow: hidden;
padding: 10px 6px 0 0 !important;
font-size: 1.1em !important;
}
.subcategory>.ember-view {
display: block !important;
padding-top: 8px;
line-height: 22px !important;
text-align: right;
}
.subcategory>.ember-view:before,
.subcategory>.ember-view>.new-posts::before{
position: absolute;
top: 50%;
left: 0;
display: block;
height: 23px;
width: 37px;
margin-top: -12px;
content:"";
background-image: url(https://blenderartists.org/uploads/default/original/4X/b/2/7/b277e0d1fae7ba105b6d03e603c55efe2f52b59d.png);
background-size: cover;
opacity: 0.6;
}
.subcategory>.ember-view:before{
opacity: 0.4;
}
.subcategory .badge-notification {
color: #0f82af !important;
font-size: .9em !important;
font-weight: 400 !important;
}
/* Reposition thread posters avatars beneath title. */
.topic-list th.posters, .topic-list td.posters {
max-width: 0 !important;
padding: 0 !important;
overflow: hidden;
}
tr.topic-list-item {
position: relative;
}
td.main-link {
min-height: 58px !important;
vertical-align: top;
}
/* @WIP - Expand topic thumbnails on hover. */
.topic-thumbnail {
position: relative;
width: 60px;
height: 60px;
margin-right: 10px;
padding-right: 0 !important;
}
.topic-thumbnail>a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 60px;
height: 60px;
}
.topic-thumbnail>a:hover {
z-index: 99;
}
.topic-thumbnail>a>.thumbnail {
max-height: 60px;
max-width: 60px;
transition: max-height .2s, max-width .2s, margin-top .2s, margin-left .2s;
}
.topic-thumbnail>a:hover>.thumbnail {
max-width: 160px;
max-height: 160px;
margin-top: 24px;
margin-left: 48px;
box-shadow: 2px 3px 4px #000;
transition: max-height .2s .1s, max-width .2s .1s, margin-top .2s .1s, margin-left .2s .1s, box-shadow .2s .1s;
}
/* ---------------------------------------- */
.topic-list th, .topic-list-item>td {
border-bottom: 1px solid #333 !important;
box-shadow: inset 0 -2px 0 #000;
}
.topic-list>tbody {
border-top: none !important;
}
.topic-list-item-separator>td {
position: relative;
height: .7em !important;
line-height: 1em !important;
border-bottom: none !important;
}
.topic-list-item-separator>td::before {
position: absolute;
top: .5em;
left: 0;
right: 0;
display: block;
padding-top: 1px;
background-color: #952d14;
content: "";
}
.topic-list-item-separator>td>span {
position: absolute;
top: 0;
left: 50%;
margin-left: -4em;
display: block;
width: 5em;
background-color: #181818 !important;
text-transform: uppercase;
}
/* ---------------------------------------- */
.topic-title:after {
content: "";
float: right;
display: block;
height: 3.3em;
}
.topic-title .title {
color: #aaa !important;
}
.unseen-topic .topic-title .title {
color: #d29557 !important;
}
.main-link .topic-details .discourse-tags {
float: right !important;
margin: -1.5em 0 0 0;
}
/* ---------------------------------------- */
.show-thumbnail>tbody>tr.topic-list-item.pinned .posters>a,
.posters>a {
position: absolute !important;
left: 12px !important;
bottom: 9px !important;
display: block;
height: 25px;
width: 25px;
opacity: 0.8;
}
.posters>a:hover {
opacity: 1;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(2),
.posters>a:nth-child(2) {
left: 44px !important;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(3),
.posters>a:nth-child(3) {
left: 76px !important;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(4),
.posters>a:nth-child(4) {
left: 108px !important;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(3),
.posters>a:nth-child(5) {
left: 140px !important;
}
.show-thumbnail>tbody .posters>a {
left: 80px !important;
bottom: 14px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(2) {
left: 112px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(3) {
left: 144px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(4) {
left: 176px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(5) {
left: 208px !important;
}
/* Extra quick tests: nothing to do with featured topics bar. */
.timeline-container {
margin-left: 820px !important;
}
.timeline-container>.topic-timeline {
margin-left: 0 !important;
width: 100px !important;
}
.timeline-footer-controls .fa-reply::after {
content: " Reply";
}
/* Quick testing of small screen widths. */
@media screen and (max-width: 850px) {
.topic-list td.posters a:not(.latest),
.topic-list td.posters a.latest {
display: inline !important;
}
.topic-list td.posters a.latest {
width: 25px !important;
}
}
@media screen and (max-width: 640px) {
.tlp-featured-topic .user,
.tlp-featured-topic.show-details .user {
color: rgba(0,0,0,0) !important;
}
.discourse-tag {
display: none !important;
}
.discourse-tag:nth-of-type(1) {
display: inline-block !important;
}
}
@media screen and (max-width: 480px) {
.tlp-featured-topic .title,
.tlp-featured-topic.show-details .title,
.tlp-featured-topic.show-details>.featured-details .user::before {
display: none !important;
}
th.num.posts, td.num.posts {
display: none;
}
th.activity.num, td.activity.num {
max-width: 40px;
vertical-align: top;
}
td.activity.num .post-activity {
display: block;
margin-top: 0;
}
.topic-thumbnail {
left: -10px;
margin-right: 0;
}
}
This code has all been tested down to a 320px screen, but only on Firefox so far. Feel free to nick any of it and play around with it if you want to.