New subforum theme

b/[Inactive] Ninjabyte Electronics (hardware) publicado por u/DarkestEx October 31, 2015, 12:02:40 AM

New subforum theme

As the whole microcat subforum kindly gets its own color scheme, this is what I am working on:

If you want to try it out yourself, just install the Stylish extension and put the following stylesheet:


@import url(https://fonts.googleapis.com/css?family=Coda);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,600);

body {
    background: #333;
    font-family: "Coda", sans-serif;
}

#content-section a, #content-section a:link, #content-section a:visited,
#upper_section .user a, #upper_section .user a:link, #upper_section .user a:visited,
#content_section a, #content_section a:link, #content_section a:visited {
    color: #b7e55b;
}

#content-section a:hover {
    color: #ccff66;
}

h4.catbg a, h4.catbg a:link, h4.catbg a:visited,
h4.catbg2 a, h4.catbg2 a:link, h4.catbg2 a:visited,
h3.catbg a, h3.catbg a:link, h3.catbg a:visited,
h3.catbg2 a, h3.catbg2 a:link, h3.catbg2 a:visited,
.table_list tbody.header td.catbg a, .table_list tbody.header td.catbg a:link, .table_list tbody.header td.catbg a:visited,
div.cat_bar a, div.cat_bar a:link, div.cat_bar a:visited {
    color: #fff !important;
}

h4.catbg a:hover, h4.catbg2 a:hover, h3.catbg a:hover, h3.catbg2 a:hover, .table_list tbody.header td.catbg a:hover, div.cat_bar a:hover {
    color: #fff !important;
}

.buttonlist ul li a.active {
    color: #fff !important;
}

.buttonlist ul li a {
    color: #000 !important;
}


h4.catbg, h4.catbg2, h3.catbg, h3.catbg2, .table_list tbody.header td.catbg, div.cat_bar
{
    background: #b7e55b;
    color: #333;
    font-family: "Coda", sans-serif;
}

.windowbg, #preview_body {
    background: #666;
    color: #000;
}

.windowbg2, #preview_body {
    background: #666;
    color: #000;
}

#header, #content_section, #footer_section {
    background: #333;
    color: #fff;
}

#header div.frame, #content_section div.frame, #footer_section div.frame,
#header, #content_section, #footer_section {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: none;
}

h1.forumtitle {
    width: 100%;
    height: 100px;
    background-image: url(http://img.codewalr.us/smflogo_microcat_border.png);
    background-repeat: no-repeat;
    background-position: center;
}

h1.forumtitle img {
    display: none;
}

blockquote.bbc_standard_quote, code.bbc_code {
    background: #999;
}

blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    border-top: 1px solid #444;
    border-bottom: 1px solid #444; 
}

.pagesection, p#whoisviewing {
    color: #fff;
}

.roundframe {
    background: #666;
}

Then you can some URL rules such as:
- https://codewalr.us/index.php?action=post;board=40.0
- https://codewalr.us/index.php?board=40.0
- https://codewalr.us/index.php?topic=646
- https://codewalr.us/index.php?topic=815
And you should see the new style

The style is nowhere near completion yet, but how do you like it so far?

Last Edit: November 02, 2015, 04:27:55 AM by DJ Omnimaga

Inicia sesión o crea una cuenta para dejar un comentario

u/Dream of Omnimaga October 31, 2015, 03:02:00 AM

This actually looks nice. I am curious about if changing WalrusIRC colors would be feasible from the sub-forum, because it would be nice if the top and bottom were the same colors. Or perhaps the posts could be made the same color as WIRC, but then the text would be impossible to read elsewhere on the site.

Ideally I think the sub-forum change should be done via a script, but in the worst case scenario we can always create a brand new theme directory and have the sub-forum theme set to Microcat by default. I wonder if @Streetwalrus would be able to setup some script...

u/Snektron October 31, 2015, 10:42:57 AM

Looks good, i like the color combinations

The background misses some noise though, i recommend adding some small texture to give it some diversity (like the green blocks on the main theme)

u/novenary October 31, 2015, 10:51:47 AM

Quote from: DJ Omnimaga on October 31, 2015, 03:02:00 AM
This actually looks nice. I am curious about if changing WalrusIRC colors would be feasible from the sub-forum, because it would be nice if the top and bottom were the same colors. Or perhaps the posts could be made the same color as WIRC, but then the text would be impossible to read elsewhere on the site.

Definitely possible but requires a minor change to wirc.

Quote from: DJ Omnimaga on October 31, 2015, 03:02:00 AM
Ideally I think the sub-forum change should be done via a script, but in the worst case scenario we can always create a brand new theme directory and have the sub-forum theme set to Microcat by default. I wonder if @Streetwalrus would be able to setup some script...

As I said, it's a 2 line php edit. I can do that.

u/Yuki October 31, 2015, 06:02:26 PM

Quote from: Streetwalrus on October 31, 2015, 10:51:47 AM
Quote from: DJ Omnimaga on October 31, 2015, 03:02:00 AM
This actually looks nice. I am curious about if changing WalrusIRC colors would be feasible from the sub-forum, because it would be nice if the top and bottom were the same colors. Or perhaps the posts could be made the same color as WIRC, but then the text would be impossible to read elsewhere on the site.
Definitely possible but requires a minor change to wirc.

Yeah, it's very possible with some JS.

u/DarkestEx October 31, 2015, 06:04:00 PM

Quote from: Juju on October 31, 2015, 06:02:26 PM
Quote from: Streetwalrus on October 31, 2015, 10:51:47 AM
Quote from: DJ Omnimaga on October 31, 2015, 03:02:00 AM
This actually looks nice. I am curious about if changing WalrusIRC colors would be feasible from the sub-forum, because it would be nice if the top and bottom were the same colors. Or perhaps the posts could be made the same color as WIRC, but then the text would be impossible to read elsewhere on the site.
Definitely possible but requires a minor change to wirc.
Yeah, it's very possible with some JS.

Yea, but Streetwalrus said that he will do a few PHP lines to get it working without JS.

u/Yuki October 31, 2015, 06:12:21 PM

Anyway, WalrusIRC has theming support (and a yet hidden option to change the theme), so you can write a CSS for it.

u/DarkestEx October 31, 2015, 06:13:14 PM

Quote from: Juju on October 31, 2015, 06:12:21 PM
Anyway, WalrusIRC has theming support (and a yet hidden option to change the theme), so you can write a CSS for it.

That sounds good

Btw, this is the latest stylesheet:

Code Select


@import url(https://fonts.googleapis.com/css?family=Coda);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,600);

body {
    background: #333;
    font-family: "Coda", sans-serif;
    color: #fff;
}

a, a:link, a:visited,
a.new_win:link, a.new_win:visited,
.poster h4, .poster h4 a {
    color: #b7e55b;
}

#content-section a:hover {
    color: #ccff66;
}

.dropmenu {
    font-family: "Arial", "Helvetica", sans-serif;
}

.dropmenu a, #search_form a {
    color: #000;
}

h4.catbg a, h4.catbg a:link, h4.catbg a:visited,
h4.catbg2 a, h4.catbg2 a:link, h4.catbg2 a:visited,
h3.catbg a, h3.catbg a:link, h3.catbg a:visited,
h3.catbg2 a, h3.catbg2 a:link, h3.catbg2 a:visited,
.table_list tbody.header td.catbg a, .table_list tbody.header td.catbg a:link, .table_list tbody.header td.catbg a:visited,
div.cat_bar a, div.cat_bar a:link, div.cat_bar a:visited {
    color: #fff !important;
}

h4.catbg a:hover, h4.catbg2 a:hover, h3.catbg a:hover, h3.catbg2 a:hover, .table_list tbody.header td.catbg a:hover, div.cat_bar a:hover {
    color: #fff !important;
}

.buttonlist ul li a.active {
    color: #fff !important;
}

.buttonlist ul li a {
    color: #000 !important;
}

h4.catbg, h4.catbg2, h3.catbg, h3.catbg2, .table_list tbody.header td.catbg, div.cat_bar,
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th,
tr.catbg th.first_th,
tr.catbg th.last_th
{
    background: #b7e55b;
    color: #333;
    font-family: "Coda", sans-serif;
}

.stickybg, .stickybg2 {
    background: #999;
}

.windowbg, #preview_body {
    background: #666;
    color: #000;
}

.windowbg2, #preview_body {
    background: #777;
    color: #000;
}

#header, #content_section, #footer_section {
    background: #333;
    color: #fff;
}

#header div.frame, #content_section div.frame, #footer_section div.frame,
#header, #content_section, #footer_section {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: none;
}

h1.forumtitle {
    width: 100%;
    height: 100px;
    background-image: url(http://img.codewalr.us/smflogo_microcat_border.png);
    background-repeat: no-repeat;
    background-position: center;
}

h1.forumtitle img {
    display: none;
}

blockquote.bbc_standard_quote, code.bbc_code, .description, .description_board, .plainbox, .post_wrapper table,
.titlebg, .titlebg2, tr.titlebg th, tr.titlebg td, tr.titlebg2 td {
    background: #999;
}

blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    border-top: 1px solid #444;
    border-bottom: 1px solid #444; 
}

.pagesection, p#whoisviewing, .codeheader, .quoteheader, .navigate_section {
    color: #fff;
}

.roundframe {
    background: #666;
}

div.spoilerheader input {
    background: #b7e55b;
}

input, button, select, textarea,
.bbc_table {
    color: #000;
    border: 1px solid #444;
}

.bbc_table {
    border-collapse: collapse;
    padding: 5px 2px;
}

.bbc_table tr, .bbc_table td
{
    border: 1px dotted #444;
}

.signature, .custom_fields_above_signature,
.inner {
    border-top: 1px solid #999;
    padding-top: 2px;
}

.windowbg span.botslice,
.windowbg2 span.botslice {
    border-bottom: 1px solid #333;
}

blockquote.bbc_alternate_quote {
    background: #666;
}

.tex {
    background: #fff;
    padding: 2px 5px;
}

This is a screenshot for those who can't test it out theirselves:
https://www.dropbox.com/s/w9902q6ht0lwunl/Screenshot%202015-10-31%2019.16.23.png?dl=0

What do you think?

Last Edit: October 31, 2015, 06:17:16 PM by DarkestEx

u/Dream of Omnimaga October 31, 2015, 06:29:32 PM

I like it more and more. Glad you managed to make the theme look goos. I was unsure myself about how to do it when I tried.

I wonder if juju and Street had any luck setting the theme for the subforum... ideally it needs to support multiple boards since Microcat might get multiple sub-forums at one point.

u/novenary October 31, 2015, 08:30:31 PM

Great job on the theme, it looks gorgeous. And thanks Juju for finding a way to enable it. :3

u/Yuki October 31, 2015, 08:31:55 PM

I just made a new theme based on CodeWalrus' and there was an option to enable it only on this board. Simple enough. I like this theme, though, great job DarkestEx ^_^

u/novenary October 31, 2015, 08:34:54 PM

Hmmm, you might wanna make a few contrast tweaks, black is hard to see on top of the darker gray post bg. Also the font is very hard to read for me.

u/DarkestEx October 31, 2015, 10:27:47 PM

Quote from: Streetwalrus on October 31, 2015, 08:30:31 PM
Great job on the theme, it looks gorgeous. And thanks Juju for finding a way to enable it. :3

Quote from: Juju on October 31, 2015, 08:31:55 PM
I just made a new theme based on CodeWalrus' and there was an option to enable it only on this board. Simple enough. I like this theme, though, great job DarkestEx ^_^

Thanks

Quote from: Streetwalrus on October 31, 2015, 08:34:54 PM
Hmmm, you might wanna make a few contrast tweaks, black is hard to see on top of the darker gray post bg. Also the font is very hard to read for me.

Sure, i could make the text larger