[Preview] Blue Space

[Shades.]

A dark and blue "Space" default curve variation theme.

Just started remaking this theme I created on 2.1RC4 a while back with the help of the color changer mod. Now I'm redoing it from scratch for 2.1.1 without any mods! We'll see how it goes!

(Yes, I'll be changing the buttons, this is just a preview of the beginning)

You cannot view this attachment.

[Antechinus]

Not bad. I could live with that.

[Shades.]

I can't get this dang background image any smaller than 313kb without reducing the canvas size which distorts it!

Anybody else wanna give it a try?

Two images below, one is png and the other is webp.

[Antechinus]

Sure. Hang on...

[Antechinus]

Saved as standard medium quality (30 setting) JPG, from Photoshop. Even at 200% magnification, I cannot pick any difference from the original PNG.

BTW, to fit my monitor (2560x1440) it needs at least 200% scaling, and at that size it doesn't look all that crash hot. It might be a good idea to use media queries to serve different sizes to different devices. Anyone running a large monitor probably has the graphics grunt to handle larger images (although initial caching may be slow, depending on connection speed, but it's only background eye candy and images do not block rendering).

[Shades.]

Awesome thank you!  

[Shades.]

New board icons!

You cannot view this attachment.

[Shades.]

Opinions please...does the main board wrapper look better with or without the border?

You cannot view this attachment.

You cannot view this attachment. 

[Antechinus]

I think it would look best with a more subtle border. Ditto the information centre.

[Doug Heffernan]

Opinions please...does the main board wrapper look better with or without the border?

Personally I think that it looks better with the border. Nice job on the theme btw

[Steve]

I kind of like either way. If I were forced to choose at gunpoint I'd say with. 

[FrizzleFried]

With border.  I'd look at what it looks like with a more muted border color maybe... but it looks fantastic either way frankly.

[Shades.]

Here are the latest previews with new menu buttons and drop down. Still have a lot of work to do, these dark themes are the hardest it seems!

Also still trying to figure out what I want to do with the quick buttons and/or all the white navigational buttons!? (Reply, New Topic, etc.) Any ideas?

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.   

[Antechinus]

Still have a lot of work to do, these dark themes are the hardest it seems!

They're not really any trickier than light themes. The thing is that the default CSS is set up for a light theme, so if you want to make a dark theme you have more elements that will look wildly out of place, but creating a dark theme is not more difficult than creating a light theme from scratch.

Also still trying to figure out what I want to do with the quick buttons and/or all the white navigational buttons!? (Reply, New Topic, etc.) Any ideas?

Sure. Make them darker.

ETA: Here's an example from the dark theme I run live on this site (colours won't match your theme, but it gives the general idea):

Code Select Expand

/* ------------------------------------------------------- */
/* @BUTTONS
/* ------------------------------------------------------- */
/* --------------------- */
/* Standard button class.*/
.button {
    height: auto;
    padding: 0 8px;
    background: linear-gradient(#29333d, #14191f);
    color: #c5ab8c !important;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5625rem;
    text-shadow: none;
    text-decoration: none;
    text-transform: uppercase;
    border: 0 !important;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0 #fff1, inset -1px 0 0 #0007, 0 1px 0 #000  !important;
}
/* --------------------- */
/* @todo - Special cases.*/
.button:not(:first-child) {
    margin: 0;
}
/* Buttons on a lighter background. */
.site_header_box .button {
    background: linear-gradient(#29333d, #1e252f);
}
input[type="text"] + .button, select + .button {
    line-height: 1.6875rem;
}
.button_strip_solve > strong {
color: #3fa63f !important;
}
.button_strip_solve:hover > strong,
.button_strip_solve:focus > strong,
.button_strip_solve:active > strong {
color: #47eb47 !important;
}
/* Hover, focus, active styles. */
.button:hover, .button:focus,
.button.active, .button.active:hover, .button.active:focus {
    background: linear-gradient(#4c5a67, #263036) !important;
    color: #fd9 !important;
    font-weight: 600;
    text-decoration: none;
}
/* ------------------------------------- */
/* @todo - Wrappers for standard buttons.*/
.buttonlist, .buttonrow, .pagelinks {
/* @todo - Kill RC4 muppetry. */
/* These are position: static */
/* So, z-index is irrelevant. */
    z-index: auto;
/* This is actually useful. */
    margin: 5px 0;
    padding: 0;
}
If you're wondering about the "Kill RC4 muppetry" comment: CSS z-index only works on elements that are set to position: fixed/absolute/relative/sticky; but z-index will not work on elements that are at the default position: static; so the code in 2.1 RC4 was pointless (haven't checked if it made it into Final, but would not be surprised if it is still in 2.1.1).

[Shades.]

Sure. Make them darker.

Yep that's the idea!

They're not really any trickier than light themes.

Maybe for YOU! I keep finding things I've missed that you can't see with a dark background and because I still haven't used all the features of 2.1.1 yet!

Also I'm still a newbie at this css stuff! 

[Shades.]

ETA: Here's an example from the dark theme I run live on this site (colours won't match your theme, but it gives the general idea):

Thanks I will look that over!

[Antechinus]

Oh yeah, the infamous "where the f did that text go?" thing. It's just a matter of going through all the pages and checking for cases like that. Once you spot them they are usually easy to fix.

You can also do handy tricks for things like scroll bars and checkboxes if you don't like the default system colours (imposed by the OS). Playing with opacity and/or CSS filters can work wonders here (and if you are going to use other filters, it makes sense to roll the opacity in with them rather than using a separate opacity declaration).

[Shades.]

Oh yeah, the infamous "where the f did that text go?" thing. It's just a matter of going through all the pages and checking for cases like that. Once you spot them they are usually easy to fix.

Exactly!  

[Shades.]

Also THIS them has 6 shades of blue so trying to figure out which blue goes where and which blue works with the other blue but I think I've got it down.

You cannot view this attachment.

[TwitchisMental]

Sure. Make them darker.

Yep that's the idea!

They're not really any trickier than light themes.

Maybe for YOU! I keep finding things I've missed that you can't see with a dark background and because I still haven't used all the features of 2.1.1 yet!

Also I'm still a newbie at this css stuff! 

I feel that dude...XD.

This is why I appreciate when those that use my themes point out things that I have missed.