News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[Preview] Blue Space

Started by Shades., April 05, 2022, 08:46:10 PM

Previous topic - Next topic

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.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

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? O:)

Two images below, one is png and the other is webp. ;)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus


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.

ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

New board icons! 8)

You cannot view this attachment.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

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. 
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

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

Doug Heffernan

Quote from: Shades. on April 06, 2022, 06:56:58 PMOpinions 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.  ;D
DO NOT pm me for support!

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.   

ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

Quote from: Shades. on April 14, 2022, 06:47:26 PMStill 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. :)

QuoteAlso 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. :D

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

/* ------------------------------------------------------- */
/* @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.

Quote from: Antechinus on April 14, 2022, 06:55:44 PMSure. Make them darker. :D
Yep that's the idea! :P

Quote from: Antechinus on April 14, 2022, 06:55:44 PMThey're not really any trickier than light themes.
Maybe for YOU! ;D 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!  ::) O:)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Quote from: Antechinus on April 14, 2022, 06:55:44 PMETA: 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! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

Oh yeah, the infamous "where the f did that text go?" thing. :D 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.

Quote from: Antechinus on April 14, 2022, 07:10:15 PMOh yeah, the infamous "where the f did that text go?" thing. :D 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! ???  :laugh:
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

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. O:)

You cannot view this attachment.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

TwitchisMental

Quote from: Shades. on April 14, 2022, 07:04:42 PM
Quote from: Antechinus on April 14, 2022, 06:55:44 PMSure. Make them darker. :D
Yep that's the idea! :P

Quote from: Antechinus on April 14, 2022, 06:55:44 PMThey're not really any trickier than light themes.
Maybe for YOU! ;D 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!  ::) O:)

I feel that dude...XD.

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

Advertisement: