Forum Colour Scheme/Themes?

Meta
1

In my personal opinion, for what it’s worth, the change to the header seems bland now that it’s grey. I much preferred the light yellow. But since a lot of users will have their own opinions, maybe there could be a way for users to select their desired color scheme or “theme”. Just a thought. I miss the yellow. Seemed more fitting to me.

Cheers!

EDIT: I’ve been experimenting with a Chrome Extension called Stylebot and created what I consider to be a nice Sponge theme. Feedback?

My custom Sponge theme (light):


i.fa.fa-comment {
    color: #2e2e2e;
}

i.fa.fa-search {
    color: #2e2e2e;
}

i.fa.fa-bars {
    color: #2e2e2e;
}

img.avatar {
    border: solid #2e2e2e 2px;
}

img.logo-big {
    background-color: #2e2e2e;
    border: solid #2e2e2e 2px;
}

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

img.logo-small {
    border: solid #2e2e2e 2px;
    color: #2e2e2e;
}

.extra-info a.star {
    color: #db0000;
}

a.star {
    color: #db0000;
}

.extra-info a.star.starred {
    color: #00b006;
}

a.star.starred {
    color: #00b006;
}

#main-outlet {
    font-family: Consolas;
}

a.topic-link {
    color: #2e2e2e;
    font-family: monospace;
}

My custom Sponge theme (dark): Personally my favourite now…


i.fa.fa-comment {
    color: #2e2e2e;
}

i.fa.fa-search {
    color: #2e2e2e;
}

i.fa.fa-bars {
    color: #2e2e2e;
}

img.avatar {
    border: solid #2e2e2e 2px;
}

img.logo-big {
    background-color: #2e2e2e;
    border: solid #2e2e2e 2px;
}

img.logo-small {
    border: solid #2e2e2e 2px;
    color: #2e2e2e;
}

.extra-info a.star {
    color: #db0000;
}

a.star {
    color: #db0000;
}

.extra-info a.star.starred {
    color: #00b006;
}

a.star.starred {
    color: #00b006;
}

a.topic-link {
    color: #2e2e2e;
    font-family: monospace;
}

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

#main-outlet {
    font-family: Consolas;
    color: #ffffff;
    background-color: #2e2e2e;
}

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

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

a.badge-category.home {
    color: #1e1e1e;
}

li.ember-view.active a {
    color: #1e1e1e;
}

tr {
    background-color: #2e2e2e;
}

a.title {
    color: #ffcc00;
}

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

We’ll be getting a NavBar soon, once we have things to link to like a Wiki, dev pages, etc.

3

I don’t understand how that creates the need for a new colour scheme. Perhaps I’m missing something.

1 Like
4

In my personal opinion the Grey and yellow look great together, at least from the mobile side of things.

5

I just think it’s not sponge-like. That’s all.

6

I mean if I recall correctly, people like the way Bukkit has their blue background, however Buckets in Minecraft are silver, with sometimes white or red in them. I would say blue is not very Bucket like. Front end web development is all about how appealing it is to the eye, rather than what people associate the colors with.

7

I think it’s a mixture of both. I just don’t find yellow and grey to be appealing. Reminds me of bees and industrial machinery (striped hazard pattern and whatnot).

But this is why I’m suggesting a way for users to select from a list of their favourite themes and have the site tailored to their desire.

Cheers!

8

I somehow missed the whole pick your own theme part, yes I agree, that would be a good idea

9

Oh, I misunderstood what you meant as well. Themes per user would be really cool, I like the idea.

10

I really like this color scheme, honestly it works well together.

11

I’ve been playing with stylebot, testing out colors and editing CSS client-side, and I think my have something here: http://www.zimagez.com/zimage/screenshot-09122014-064445pm.php

12

OOOOOH you really should post that somewhere. I like that

13

it’s not even close to finished, but its in the works. I’ll pass it to @DarkArcana once it’s done. :3 Glad you like it, though.

3 Likes
14

Perhaps that can be one of the themes available. G’luck. I’d like to see a more yellow theme with a green border to symbolise a scour pad. But that’s just me.

Cheers!

15

http://www.zimagez.com/zimage/screenshot-09122014-065749pm.php another tidbit

16

Can you make the tagged users Yellow?

17

Here

1 Like
19

the " Latest | Categories | Announcements " section?

20

@DarkArcana, mind sharing the original CSS (or theme) file? would make things easier. :slight_smile:

also, I foud out it’s possible to set up on-the-fly theme changing, maybe a small arrow at top left of screen.

21

Here is the current CSS:

primary            222222
secondary          FFFFFF
tertiary           DFBE58
quaternary         FFDE58
header background  3a3a3a
header primary     CF9E38
highlight          FFFF4D
danger             FF9E48
success            009900
love               fa6c8d

@import "theme_variables";

// I needed another radical Adjective that ended with "-al".
// So I went with constitutional


// Green title for developers, yay
.topic-post.group-developers .topic-avatar:after {
    content: "Developer";
    float: right;
    color: green;
    font-size: 10px;
    margin-top: 3px;
}

.topic-post.group-support .topic-avatar:after {
    content: ""; // TBD
    float: right;
    color: orangered;
    font-size: 10px;
    margin-top: 3px;
}

// hamburger menu size fix
.d-header .icons [class="fa fa-bars"] {
    font-size: 21px;
}


///////////////////////////////////
// Color scheme fixes

a {
    color: darken($tertiary, 20%);
}
a:visited {
    color: darken($tertiary, 30%);
}
.badge-notification.new-topic {
    color: darken($tertiary, 10%);
}
.alert.alert-info {
    background-color: darken($tertiary, 0%);
    color: $primary;
}
.badge-notification.new-posts, .badge-notification.unread-posts {
    background-color: darken($tertiary, 20%);
}
.fa.tracking, .fa.watching {
    color: darken($tertiary, 10%);
}
.nav-pills>li>a:hover {
    background-color: darken($quaternary, 20%);
    color: $primary;
}
.modal-header h3 {
    color: darken($tertiary, 10%);
}
.d-dropdown a {
    color: darken($tertiary, 20%);
}
.nav-stacked .active>a, .nav-stacked .active .fa-chevron-right {
    background-color: darken($tertiary, 20%);
}
.d-header .icons .unread-notifications {
    background-color: #E8BA26;
}
.d-dropdown#notifications-dropdown li,
.user-main .user-stream .notification.unread {
    background-color: lighten($quaternary, 15%);
}


.alert.alert-info {
    //background-color: $primary;
}

.nav-pills>li.active>a, .nav-pills>li>a.active {
    color: $primary !important;
}

.btn-primary {
    color: #333 !important;
}

.topic-list.categories a.title {
    color: #333 !important;
}


nav.post-controls button.create {
    color: #a7a7a7;
}

.reply-to a {
    color: #333;
    text-decoration: underline;
}

section.about {
    margin-top: 0;
}
4 Likes