Sponge Forums Theme Central

-~=[ Sponge Forums Theme Central]=~-


Welcome to where all the pretty things are! First off, I'd like to thank the entire Sponge team for getting these forums up and running, as well as all who have taken time out of their life to work on spongy things. :D

This is an up-to-date place for all forums theme available, and instructions for installing it into any browser that supports .
(If I missed an OS/browser/extension, let me know, and we can add it in!)

Everything below is self-explanatory, GLHF! :slight_smile:


Instructions


Stylish [ \[ Direct download \] ][1] (Click from inside firefox and skip to :four: )

OR

:one: Click the hamburger on the top right (three lines), and select addons



:two: Search for “stylish”, should be the top result (and featured!)



:three: The “Add to Firefox” button appears on hover



:four: Repeat step one, or type “about:addons” into the URL bar and click on “User Styles”



:five: Click “Install from URLs…”, and paste the bit.ly link for the theme you want



:six: Confirm the installation with " :white_check_mark: Install "



:seven: It’s now installed! :smiley: Refresh page, and it works!

Stylebot [ \[ Direct Download \] ][2] (Click from inside Chrome and skip to :five: )

OR

:one: Click the hamburger on the top right (three lines), and select “More tools” > Extensions



:two: Scroll down to the bottom and click on “Get more extensions”



:three: Search for Stylebot in the chrome store (don’t worry, it’s free)



:four: Install it by clicking on the blue “Free” button to the right (where mine says “Rate It”)
You want the one “from stylebot.me”



:five: Go to the forums, and click on the “CSS” button > “Install from social”



:six: Choose the style you want to apply. (Hover to preview the current page)





NightUI

Author: @BitByte

Stylish: bit.ly/1EEycch
CSS: pastebin
Ver: 5.0

Dark gray theme with blue tones, great for night-reading, and easy on the eyes.

Screenshots Coming soon!


DotDark

Author: @DotDash

Stylish: bit.ly/1yWCtgZ
CSS: pastebin
Ver: 1.4

Light gray, bleached, making the important colors pop.

Screenshots








Luxum

Author: @IronManDoesMC

Stylish: bit.ly/1ECOUZE
CSS: pastebin
Ver: 1.0

Modded version of NightUI. Red tint added to remove the green glow that stays when you close your eyes. Designed for night-time lurking.

Screenshots

Screenshots coming soon!


15 Likes

I can’t seem to get it to work.

stylebot or the theme, or what? what have you done? what didn’t work?

Nothing happening for me either. Installed stylebot extension. Pasted your code into the “Edit the CSS for forums.spongepowered.org” and hit Save and… nothing. When I hit edit again the code is no longer there.

Noted. Working on a fix asap.

No rush, will try it out when you’re done :wink:

For some reason, it changes each attribute to [object Object] after pasting the style…

Fixed! Style works, and tutorial for installing it is more detailed.

It’s working now!

Think it’s a nice start but there’s still a bunch of dark text on dark backgrounds that are hard to read and things like that.

Personal preference is a white page anyway hehe. But that’s just me.

agreed. Keep in mind I’ve been doing editing just by finding specific page elements and overriding them, which isn’t very efficient. I did get a hand on the CSS page and am in the process of editing it (thanks @riking), so that will provide a much more uniform look. :slight_smile: as for the white page, it looks clean, but it’s hard on the eyes imo.

Turn down your monitor brightness :smile:

I’ll check it out again when you’ve made some progress with editing that CSS file directly.

1 Like

If you copy this from the site, it won’t work because it’s not in a code block.
Try copying this:

Edit: nvm, octo fixed it :slight_smile:

thankmelater

1 Like

Fixed. :smiley: Thanks for the heads up!

I had to find a tutorial on how to use it but I got it to work in the end. Thanks, though.

Cheers!

I can give you admin access to https://forum.riking.org so that you can play around with the color scheme, too (which will automatically color a lot of the UI - see e.g. the reply button). Just tell me when you’re done and I can copy the style over.

That would be beautimus! Overriding individual elements is kind of a pain.

Completely love it!

You’ve done a great job and it is awesome to see such effort being put into contributing to the Sponge project.

1 Like

Love it! Will make sure to pull things out and stick in the final CSS!

also, append this to yours:

code.lang-auto.hljs.css {
    color: #ffffff;
    background-color: #3d3d3d;
}

it fixes the post counter on the bottom right, making the background for the numbers transparent. :slight_smile:

My Theme for the Forum with fixed post counter :wink: thanks to @octoshrimpy

→ Update: So i fixed the Profile Page and would call it done for today :slight_smile:
Thanks again again to @octoshrimpy for adding my Theme to his post and giving me the idea to create one in the first place

header.ember-view.d-header.clearfix {
    background-color: #323f42;
}

li.ember-view a:hover {
    color: black;
    background-color: #F7C41D;
}

li.ember-view a {
    color: #000000;
}

button.btn.btn-default:hover {
    color: black;
    background-color: #F7C41D;
}

button.btn.btn-default {
    background-color: #383738;
    color: #F7C41D;
}

a.badge-category.home:hover {
    background-color: #F7C41D;
}

a.badge-category.home {
    color: #ffffff;
    background-color: #383738;
}

#main-outlet {
    background-color: #383738;
}

a.badge-category.category-dropdown-button.home:hover {
    background-color: #F7C41D;
}

,i.fa.fa-comment {
    color: #F7C41D;
}

i.fa.fa-search {
    color: #F7C41D;
}

i.fa.fa-bars {
    color: #F7C41D;
}

div.cat {
    background-color: #383738;
}

body.docked {
    background-color: #383738;
    border-style: none;
}

#bottom hr {
    background-color: #383738;
}

html.desktop-view.not-mobile-device.js.no-touch.discourse-no-touch {
    background-color: #383738;
}

div.cooked p {
    color: #c2c2c2;
}

span.username a {
    color: #F7C41D;
}

a.mention {
    color: #F7C41D;
    background-color: #424242;
}

div.post-action {
    color: #856a19;
}

div.cooked {
    color: #c7c7c7;
    background-color: #363636;
}

div.inner h1 a {
    color: #ffffff;
}

i.fa.fa-comment {
    color: #F7C41D;
}

button.btn.standard.dropdown-toggle {
    background-color: #e9e9e9;
}

button.btn.standard.dropdown-toggle:hover {
    color: black;
    background-color: #ffffa6;
}

div.ember-view.notification-options.btn-group p {
    color: #ffffa6;
}

footer.topic-list-bottom h3 {
    color: #856a19;
}

a.ember-view {
    color: #000000;
}

a.ember-view:hover {
    color: #ffffa6;
}

div.education p a {
    color: #F7C41D;
}

div.education p a:hover {
    color: #ffffa6;
}

span.badge.new-posts.badge-notification {
    color: #000000;
    background-color: #F7C41D;
    font-weight: bold;
}

h2.ember-view {
    color: #F7C41D;
}

i.fa.fa-caret-down {
    color: #F7C41D;
}

#period-popup {
    background-color: #383738;
    color: #383738;
}

span.ember-view {
    color: #000000;
}

div.cooked ul li {
    color: #ffffa6;
}

div.bg {
    color: #0f0e0f;
    background-color: #F7C41D;
}

#topic-progress {
    color: #ffffff;
    background-color: #323f42;
    text-transform: none;
}

div.nums h4 {
    color: #f5f5f5;
}

i.fa.fa-sort {
    color: #ffffff;
}

div.nums span span {
    color: #ffffff;
}

div.nums {
    color: #3b393b;
}

div.nums span h4 {
    color: #ffffff;
}

ul.clearfix {
    color: #382838;
    background-color: #454345;
}

span.number.null {
    color: #8f8f8f;
}

span.number {
    color: #e0e0e0;
}

button.create {
    color: #080808;
    background-color: #F7C41D;
}

div.contents.clearfix {
    background-color: #323f42;
}

a.icon {
    background-color: #323f42;
}

th.default {
    background-color: #292829;
}

th.category {
    background-color: #292829;
}

th.num.posts {
    background-color: #292829;
}

th.num.views {
    background-color: #292829;
}

th.num.activity {
    background-color: #292829;
}

table.topic-list {
    background-color: #000000;
}

#suggested-topics h3 {
    color: #ffffff;
}

td.star {
    background-color: #292829;
}

thead tr th {
    background-color: #292829;
}

tbody tr td {
    color: #ffffff;
}

td.ember-view.num.activity {
    background-color: #292829;
}

th.ember-view.default.sorting.sortable {
    background-color: #292829;
}

th.ember-view.category.sortable {
    background-color: #292829;
}

th.ember-view.num.posts.sortable {
    background-color: #292829;
}

th.ember-view.num.views.sortable {
    background-color: #292829;
}

th.ember-view.num.activity.sortable {
    background-color: #292829;
}

.topic-list > tbody > tr:nth-child(2n+1) {
    background-color: #666666;
}

.topic-list > tbody > tr:nth-child(2n) {
    background-color: #595959;
}

a.title {
    color: #ffffff;
}

div.topic-excerpt {
    color: #ffffff;
}

div.topic-excerpt a {
    color: #c7c149;
}

a.badge-posts.heatmap- {
    color: #c2c2c2;
}

aside.quote blockquote {
    background-color: #474747;
}

div.title {
    background-color: #474747;
    color: #bdbbbd;
}

button.show-replies {
    background-color: #4d4f3b;
}

div.cooked blockquote {
    background-color: #474747;
}

div.nums span {
    color: #ffffff;
}

a.badge-category {
    color: #ffffff;
}

div.inner h1 {
    color: #ffffff;
}

div.cooked pre code {
    background-color: #7d797d;
    color: #ffffff;
}

div.ember-view.title a {
    background-color: #323f42;
}

div.ember-view.processed.open.show-preview {
    background-color: #6b6b6b;
}

div.grippie {
    background-color: #4a4a4a;
}

code.lang-auto.hljs.css {
    color: #ffffff;
    background-color: #3d3d3d;
}

li.ember-view.no-glyph a {
    color: #0d0d0d;
}

section.user-navigation h3 {
    color: #f5f5f5;
}

div.item {
    background-color: #474747;
    color: #ffffff;
}

p.excerpt {
    color: #ffffff;
}

span.title a {
    color: #ebb923;
}

li.ember-view.read a p {
    color: #000000;
}

a p span {
    color: #ffce6b;
}

span.time {
    color: #fcfcfc;
}

li.ember-view a p {
    color: #000000;
}

div.item.notification {
    background-color: #6b6b6b;
}

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

div.ember-view.processed.open.hide-preview {
    background-color: #7a7a7a;
}

div.ember-view.private_message.category- {
    background-color: #363636;
}

a.title font font {
    color: #ffffff;
}

div.draft-text {
    color: #c9c9c9;
}

div.contents {
    background-color: #666466;
}

div.ember-view.processed.show-preview.open {
    background-color: #666466;
}

a.toggler {
    color: #d4ae17;
}

textarea.ember-view.ember-text-area {
    background-color: #a6a6a6;
}

div.bottom-round.contents.regular {
    background-color: #363636;
}

Check top post. :wink:

1 Like