You can help CodeWalrus stay online by donating here. | New CodeWalrus | Old (dark mode) | Old (light) | Discord server
We have an anniversary Game Jam! Click here for more info.

New subforum theme

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

0
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:

@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
u/DarkestEx October 31, 2015, 11:40:33 PM
This is some LaTeX text:
[tex]\cos (2\theta) = \cos^2 \theta - \sin^2 \theta[/tex]
u/Ivoah November 01, 2015, 01:40:31 AM
I don't know if it's because I'm a mod, but I get a PHP error at the top of the page:
QuoteParse error: syntax error, unexpected '$data' (T_VARIABLE) in /var/www/codewalr.us/Sources/Subs.php(1702) : runtime-created function on line 2
Start a Discussion

b/[Inactive] Ninjabyte Electronics (hardware)

Official board about Ninjabyte hardware projects, such as their Z80 computer.

10
Topics
Explore Board
Website statistics


MyCalcs | Ticalc.org | Cemetech | Omnimaga | TI-Basic Developer | MaxCoderz | TI-Story | Casiocalc.org | Casiopeia | The Museum of HP Calculators | HPCalc.org | CnCalc.org | Music 2000 Community | TI Education | Casio Education | HP Calcs | NumWorks | SwissMicros | Sharp Calculators
Powered by EzPortal