Join us on Discord!
You can help CodeWalrus stay online by donating here.

New subforum theme

Started by DarkestEx, October 31, 2015, 12:02:40 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

DarkestEx

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?
  • Calculators owned: TI-84+, Casio 101-S, RPN-Calc, Hewlett-Packard 100LX, Hewlett-Packard 95LX
  • Consoles, mobile devices and vintage computers owned: Original Commodore 64C, C64 DTV, Nintendo GameBoy Color, Nintendo GameCube, Xbox 360, PlayStation 2

Dream of Omnimaga

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...
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

Snektron

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)
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


novenary

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.

Yuki

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.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

DarkestEx

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.
  • Calculators owned: TI-84+, Casio 101-S, RPN-Calc, Hewlett-Packard 100LX, Hewlett-Packard 95LX
  • Consoles, mobile devices and vintage computers owned: Original Commodore 64C, C64 DTV, Nintendo GameBoy Color, Nintendo GameCube, Xbox 360, PlayStation 2

Yuki

Anyway, WalrusIRC has theming support (and a yet hidden option to change the theme), so you can write a CSS for it.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

DarkestEx

#7
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?
  • Calculators owned: TI-84+, Casio 101-S, RPN-Calc, Hewlett-Packard 100LX, Hewlett-Packard 95LX
  • Consoles, mobile devices and vintage computers owned: Original Commodore 64C, C64 DTV, Nintendo GameBoy Color, Nintendo GameCube, Xbox 360, PlayStation 2

Dream of Omnimaga

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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

novenary

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

Yuki

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 ^_^
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

novenary

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.

DarkestEx

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
  • Calculators owned: TI-84+, Casio 101-S, RPN-Calc, Hewlett-Packard 100LX, Hewlett-Packard 95LX
  • Consoles, mobile devices and vintage computers owned: Original Commodore 64C, C64 DTV, Nintendo GameBoy Color, Nintendo GameCube, Xbox 360, PlayStation 2

DarkestEx

This is some LaTeX text:
[tex]\cos (2\theta) = \cos^2 \theta - \sin^2 \theta[/tex]
  • Calculators owned: TI-84+, Casio 101-S, RPN-Calc, Hewlett-Packard 100LX, Hewlett-Packard 95LX
  • Consoles, mobile devices and vintage computers owned: Original Commodore 64C, C64 DTV, Nintendo GameBoy Color, Nintendo GameCube, Xbox 360, PlayStation 2

Ivoah

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
  • Calculators owned: TI-86 (now broken), TI SR-56, TI-Nspire CX CAS, TI-84+ SE, TI-84+ SE, TI-85, TI-73 Explorer VS, ViewScreen, TI-84+ CSE, TI-83+ SE

Powered by EzPortal