Sponge Forums Theme Central

octoshrimpy · September 13, 2014, 3:07am

-~=[ 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!

Instructions

Stylish

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

OR

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

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

The “Add to Firefox” button appears on hover

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

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

Confirm the installation with " Install "

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

Stylebot

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

OR

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

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

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

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

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

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!

Drirton · September 13, 2014, 6:17am

I can’t seem to get it to work.

octoshrimpy · September 13, 2014, 10:49am

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

Kippers · September 13, 2014, 10:58am

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.

octoshrimpy · September 13, 2014, 11:02am

Noted. Working on a fix asap.

Kippers · September 13, 2014, 11:06am

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

octoshrimpy · September 13, 2014, 11:09am

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

octoshrimpy · September 13, 2014, 11:38am

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

Kippers · September 13, 2014, 11:56am

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.

octoshrimpy · September 13, 2014, 12:00pm

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. as for the white page, it looks clean, but it’s hard on the eyes imo.

Kippers · September 13, 2014, 12:01pm

Turn down your monitor brightness

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

jomo · September 13, 2014, 2:16pm

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

thankmelater

octoshrimpy · September 13, 2014, 2:18pm

Fixed. Thanks for the heads up!

Drirton · September 13, 2014, 5:20pm

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

Cheers!

riking · September 13, 2014, 5:21pm

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.

octoshrimpy · September 13, 2014, 6:44pm

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

Jackah · September 13, 2014, 6:50pm

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.

octoshrimpy · September 13, 2014, 7:00pm

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.

tomaco94 · September 13, 2014, 7:02pm

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

→ Update: So i fixed the Profile Page and would call it done for today
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;
}

octoshrimpy · September 13, 2014, 7:11pm

Check top post.