Continuing the discussion from First post on the new forum!…
I’ve been writing up a personal, unofficial CSS style for this new forum to give it more character. Here’s what it looks like at the moment:
I don’t know if there’s a way to receive notifications if a post is edited, but regardless, I’ll be making updates to this post as I go, so watch out. Feel free to post suggestions and issues.
Installation
I’m using Firefox with Stylish. Instructions are not guaranteed to work for other browsers/extensions. If you care about expanding the usage of this theme (I really don’t), then feel free to write better instructions for me.
Instructions
- Write a new style.
- Paste in the CSS.
- Save.
CSS
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("devforum.roblox.com") {
/* Colors */
html {
background-color: #DEDEDC;
background-image: url(https://cdn.discourse.org/business/uploads/default/original/2X/8/8ce7bc6e2eeef6eba32ac2d14afb7750feeb1dbe.png);
background-repeat: repeat-x;
background-position: center;
}
#topic {
border-top: 1px solid #BFC3C6;
}
.post-cloak {
border-left: 1px solid #BFC3C6;
border-right: 1px solid #BFC3C6;
border-bottom: 1px solid #BFC3C6;
background-color: #EFF0F4;
}
.topic-body {
border-left: 1px solid #BFC3C6;
border-right: 1px solid #BFC3C6;
background-color: #FFFFFF;
}
.topic-avatar,
.topic-body,
.small-action {
border-top: unset;
}
.embedded-posts .topic-body,
.embedded-posts .topic-avatar {
border: unset;
}
.embedded-posts .reply {
border-top: 1px solid #BFC3C6;
}
.topic-meta-data {
background-color: #737373;
}
.topic-meta-data .names *,
.topic-meta-data .post-info .post-date,
.topic-meta-data .reply-to-tab {
color: #FFFFFF !important;
}
img.avatar {
border: 1px solid #BFC3C6;
}
table.topic-list > tbody > tr {
border: 1px solid #BFC3C6 !important;
background-color: #FFFFFF;
}
table.topic-list th {
background-color: #E5E5E5;
}
table.topic-list > tbody > tr > td,
table.topic-list > thead > tr > th {
border: 1px solid #BFC3C6;
}
table.topic-list > tbody > tr > td {
background-color: #FFFFFF;
}
table.topic-list > tbody > tr > td:nth-child(even) {
background-color: #F2F1EE;
}
.topic-list-item td:first-child {
border-left: unset;
}
table.topic-list.categories td.category {
border-top-color: #BFC3C6 !important;
border-right-color: #BFC3C6 !important;
border-bottom-color: #BFC3C6 !important;
}
table.categoryStats tr {
border: unset !important;
background-color: unset !important;
}
img.avatar {
filter: brightness(1.25) contrast(0.8) saturate(1.5);
}
.topic-list .topic-list-item-separator td {
border-bottom: 2px solid #ef7d7d;
}
.topic-list .topic-list-item-separator td span {
color: #ef7d7d;
}
/* Format */
.topic-avatar {
padding: 15px;
}
.embedded-posts .topic-body {
width: calc(100% - 90px);
}
.topic-body {
padding: 12px 12px 15px;
}
.topic-meta-data {
padding: 0.25em 0.5em;
}
.topic-meta-data > * {
vertical-align: middle;
}
.names span {
overflow: unset;
}
.topic-meta-data .read-state {
top: unset;
right: 1px;
}
.list-controls .category-dropdown-menu .badge-wrapper.bullet .badge-category {
max-width: unset;
}
.menu-panel {
width: 430px !important;
}
.menu-panel span.badge-category {
max-width: unset;
}
table.categories td.stats {
text-align: -moz-center;
}
img.avatar {
padding: 1px;
border-radius: unset;
}
.small-action {
max-width: unset;
}
.small-action .small-action-desc {
margin: 5px 0px;
}
.show-more.has-topics {
top: unset;
}
.alert {
padding: 12px 35px 12px 14px;
}
.topic-list .posters {
width: 162px;
}
.topic-list .posters > a {
margin-bottom: 4px;
}
.topic-list .posters a.latest:first-child {
margin-top: 1px;
margin-right: 2px;
}
.gutter {
padding-left: 791px;
}
/* Clutter */
#suggested-topics,
.topic-map .information,
.topic-map .avatars {
display: none !important;
}
}
