Sponge Forums Theme Central


#1

-~=[ 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. smiley

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! smile



Instructions


Stylish
[ Direct download ] (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 ] (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!




Sponge XenForo
NightUI - Dark sponge forums theme
DotDark - A Sponge Forums Theme (NOW AVAILABLE)
Dark Theme
Emoticons & You
Dark Theme
NightUI - Dark sponge forums theme
Luxum: For the night lurkers out there
#2

I can't seem to get it to work.


#3

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


#4

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.


#5

Noted. Working on a fix asap.


#6

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


#7


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


#8

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


#9

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.


#10

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


#11

Turn down your monitor brightness smile

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


#12

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 smile

thankmelater


#13

Fixed. smiley Thanks for the heads up!


#14

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

Cheers!


#15

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.


#18

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


#21

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.


#22

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. smile


#23

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 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;
}

#24

Check top post. wink