View Unreal Engine Forums How You Want To - Custom Theme Viewing! View It Your Way!

Community Community & Industry Discussion
,
1

Since Epic’s great web team really messed up the “light” forum theme and then got rid of it I was forced to find another option. Their dark theme isn’t for everyone and it was giving me migraines etc. I need a light theme to read but Epic let me down :frowning: so here is a solution that works quite well.

Get Stylebot, it is a google chrome extension. You can change the background and text what colors you want, so far it is working great, my eyes are saved! You can change pretty much everything if you spend enough time redesigning it all.

Download extension here:

I made a quick “Light Style” Stylebot style, just go in the settings of this plugin and create a new style and paste the below CSS in and you should be set. You can edit this as needed to your liking, it should be a good start. If you already have a style just edit it, delete the old code and paste this in and save.

I made a style for forums.unrealengine.com and for dev.epicgames.com - most people will only need the forum style.

Enjoy!

What it looks like

3
31899×889 341 KB

I’ll keep this updated as I update mine so there is always a better version as I find and fix things.

CSS Updated: 09/26/2024
CSS Updated: 04/12/2022
CSS Updated: 04/10/2022
CSS Updated: 04/09/2022

(forums.unrealengine.com CSS)

#main-outlet-wrapper #main-outlet {
        background: #ffffff;
}

.desktop-view .d-header {
        background: #ffffff;
}


body.category .d-header-wrap.scrolled-header .d-header {
        display: none;
}

nav.post-controls.collapsed {
  background-color: #ffffff;
  color: #000000;
}

div.cooked {
  background-color: #ffffff;
  color: #000000;
}

div.topic-body.clearfix {
  background-color: #ffffff;
}

section.map.map-collapsed {
  color: #000000;
  background-color: #d9d9d9;
}

th.default.topic-list-data {
  background-color: #dbd7d7;
  color: #000000;
}

td.main-link.clearfix.topic-list-data {
  color: #000000;
}

a.title.raw-link.raw-topic-link {
  color: #000000;
  background-color: #efefef;
  font-size: 14px;
}

span.qa-badge-unsolved {
  background-color: #e5af76;
}

button.btn-primary.create.btn.btn-icon-text.ember-view {
  background-color: #4a86e8;
  color: #000000;
  text-decoration: none;
}

footer.unreal-footer {
  background-color: #000000;
}

div.ember-view {
  color: #000000;
  background-color: #f3f3f3;
}

nav.unreal-sidebar-nav {
  background-color: #efefef;
  color: #000000;
}

div.unreal-sidebar-logout {
  background-color: #efefef;
}

#unrealSearch {
  background-color: #ffffff;
  color: #000000;
}

th.views.num.topic-list-data {
  color: #000000;
  background-color: #a7a5a5;
}

th.activity.num.topic-list-data {
  color: #000000;
  background-color: #a7a5a5;
}

th.posts.num.topic-list-data {
  color: #000000;
  background-color: #a7a5a5;
}

td.num.posts-map.posts.heatmap-med.topic-list-data {
  color: #000000;
  background-color: #cccccc;
}

td.num.posts-map.posts.topic-list-data {
  color: #000000;
  background-color: #cccccc;
}

span.relative-date {
  color: #000000;
}

td.num.views.topic-list-data {
  color: #000000;
  background-color: #cccccc;
}

td.num.topic-list-data.age.coldmap-high.activity {
  color: #000000;
  background-color: #cccccc;
}

td.num.topic-list-data.age.activity {
  color: #000000;
  background-color: #cccccc;
}

footer section h4 {
  color: #4a86e8;
}

div.regular.contents {
  background-color: #ffffff;
  color: #000000;
}

div span a {
  color: #000000;
}

ul.unreal-footer-social-bar {
  background-color: #000000;
}

ul.unreal-footer-legal-links {
  background-color: #000000;
  color: #ffffff;
}

div.unreal-footer-legal {
  background-color: #000000;
  color: #ffffff;
}

ul li h4 {
  color: #000000;
}

div span h4 {
  color: #4a86e8;
}

div header h2 {
  color: #000000;
}

header.unreal-sidebar-profile {
  background-color: #ffffff;
}

div ul li {
  color: #4a86e8;
}

div.small-action-desc.timegap {
  color: #000000;
  background-color: #e5e0e0;
}

span.text {
  color: #000000;
}

h3.suggested-topics-message {
  background-color: #dbd7d7;
}

summary.select-kit-header.single-select-header.dropdown-select-box-header.btn.btn-icon-text.btn-default.ember-view {
  color: #000000;
  background-color: #ffffff;
}

div.select-kit-header-wrapper {
  color: #4a86e8;
}

div.row {
  background-color: #dbd7d7;
}

ul li a {
  color: #4a86e8;
}

header h2 div {
  color: #ff9900;
}

div h3 a {
  color: #4a86e8;
}

footer section p {
  color: #4a86e8;
}

span.number {
  color: #4a86e8;
}

div a span {
  color: #4a86e8;
}

div.timeline-handle {
  background-color: #ff9900;
}

div.timeline-ago {
  color: #4a86e8;
}

div.post-stream {
  background-color: #dbd7d7;
}

.unreal-sidebar-sticky-wrap::-webkit-scrollbar-thumb {
    background: #4a86e8;
    }

th.posters.topic-list-data {
  background-color: #a7a5a5;
  color: #000000;
}

td.posters.topic-list-data {
  background-color: #d9d9d9;
  color: #000000;
}

a.enclosing-category-link {
  background-color: #dbd7d7;
}

div.unread-new.ember-view {
  background-color: #dbd7d7;
}

td.replies {
  background-color: #dbd7d7;
}

tr td div {
  background-color: #dbd7d7;
  color: #000000;
}

td.topics {
  background-color: #dbd7d7;
  color: #000000;
}

td.latest {
  background-color: #b8b2b2;
  color: #000000;
}

th.topics {
  color: #000000;
}

th.replies {
  color: #000000;
}

th.latest {
  color: #000000;
}

span.stat-period {
  color: #000000;
}

span.stat {
  color: #4a86e8;
}

span.link-bottom-line {
  background-color: #efefef;
}

a.docs-topic-link {
  background-color: #efefef;
}

td.main-link.topic-list-data {
  background-color: #efefef;
}

td.topic-list-data {
  background-color: #efefef;
}

th.topic-list-data {
  background-color: #dbd7d7;
  color: #000000;
}

input.no-blur.docs-search-bar.ember-text-field.ember-view {
  background-color: #dbd7d7;
  color: #000000;
}

input.filter.ember-text-field.ember-view {
  background-color: #ffffff;
}

div section h3 {
  color: #ff9900;
}

aside blockquote p {
  background-color: #f3f3f3;
  color: #000000;
}

#quote-id-236316-4-0 {
  background-color: #efefef;
}

aside.onebox.allowlistedgeneric {
  background-color: #f3f3f3;
  color: #000000;
}

a.fancy-title {
  color: #000000;
}

svg.fa.d-icon.d-icon-pencil-alt.svg-icon.svg-string {
  color: #ff9900;
}

div.search-widget-wrap.ember-view {
  background-color: #000000;
}

h1 a span {
  color: #ffffff;
}

a.discourse-tag.bullet {
  color: #ff9900;
  background-color: #efefef;
}

div.link-bottom-line {
  background-color: #efefef;
}

span.category-name {
  color: #4a86e8;
}

button.widget-button.btn-flat.show-replies.btn-icon-text.d-hover {
  color: #ff9900;
}

div.topic-body {
  background-color: #dbd7d7;
}

div.title {
  background-color: #191a24;
  color: #ffffff;
}

div div p {
  color: #000000;
}

textarea.d-editor-input.ember-text-area.ember-view {
  color: #000000;
  background-color: #ffffff;
}

div.d-editor-button-bar {
  background-color: #d9d9d9;
}

div.modal-footer {
  background-color: #efefef;
}

a.topic-excerpt {
  color: #000000;
}

div.topic-statuses {
  background-color: #efefef;
}

td.category {
  background-color: #dbd7d7;
}

input.ember-text-field.ember-view {
  background-color: #ffffff;
  color: #000000;
}

a.inline-onebox {
  color: #4a86e8;
}

div p a {
  color: #4a86e8;
}

span.label {
  color: #4a86e8;
}

dl div dt {
  color: #000000;
}

dd.trust-level {
  color: #4a86e8;
}

dl div dd {
  color: #4a86e8;
}

span.relative-date.date {
  color: #4a86e8;
}

a.group-link.ember-view {
  color: #4a86e8;
}

a.more.ember-view {
  color: #4a86e8;
}

a.ember-view {
  color: #4a86e8;
}

.desktop-view .topic-avatar {
        margin-left: 15px;
}

img.avatar {
        margin-top: 10px;
}

header.source {
  background-color: #d9d9d9;
  color: #000000;
}

aside.onebox.wikipedia {
  color: #000000;
  background-color: #d9d9d9;
}

div.discourse-tags {
  background-color: #efefef;
}

td.avatar {
  background-color: #dbd7d7;
}

div.excerpt {
  background-color: #d9d9d9;
  color: #000000;
}

div.group-member-info.names {
  background-color: #d9d9d9;
}

div.user-stream-item.item.ember-view {
  background-color: #d9d9d9;
}

span.name {
  color: #4a86e8;
}

div div a {
  color: #4a86e8;
}

span.d-button-label {
  color: #000000;
}

#quote-id-521385-1-0 {
  background-color: #d9d9d9;
}

#quote-id-516077-2-0 {
  background-color: #efefef;
}

div div edc-sidebar {
    background-color: #142f48 !important;
}

(dev.epicgames.com CSS) A work in progress lol

thead tr th {
  background-color: #dbd7d7;
  color: #000000;
}

tbody tr td {
  background-color: #dbd7d7;
  color: #000000;
}

a.snippet-link {
  color: #4a86e8;
}

span.author-name {
  color: #4a86e8;
}

div.content-item-content {
  background-color: #f3f3f3;
}

section.col-md-8.col-xl-9.column-main {
  background-color: #f3f3f3;
  color: #000000;
}

h1.text-capitalize {
  color: #000000;
}

span.icon-pad-left {
  color: #ff9900;
}

header.content-item-header {
  background-color: #f3f3f3;
}

div.labels-title {
  color: #000000;
}

a.report-link.fs-sm {
  color: #ff0000;
}
4 Likes
2

Thanks, you saved my (eyes) life :slight_smile:

1 Like
3

Thanks!
Are you going to continue the work for the dev.epicgames.com version ?

1 Like
4

I just updated the CSS code for the forums.unrealengine.com, I made a bunch of changes, feel free to try it out :slight_smile: