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) ;)
bluespace.png
Not bad. I could live with that.
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. ;)
Sure. Hang on...
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).
Awesome thank you! :) 8)
New board icons! 8)
home.png
Opinions please...does the main board wrapper look better with or without the border?
withborder.png
withoutborder.png
I think it would look best with a more subtle border. Ditto the information centre.
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 :)
I kind of like either way. If I were forced to choose at gunpoint I'd say with. ;D
With border. I'd look at what it looks like with a more muted border color maybe... but it looks fantastic either way frankly.
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?
menubuttons-min.png
buttonsanddropdown-min.png
topics-min.png
post-min.png
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).
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:)
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)
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).
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:
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:)
blues.PNG
Quote from: Shades. on April 14, 2022, 07:04:42 PMQuote 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.
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):
So playing around with your code (ok I just changed the colors) and then added/copied a new css for my quickbuttons: (and changed the icons)
/* .quickbuttons */
.quickbuttons > li,
.quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus {
background: #fff; /* fallback for some browsers */
background-image: linear-gradient(#161f3a 0%, #1d2e5a 70%);
}Not sure if I did that right but it looks good. :P
newbuttons.png
It's just presentation. If it looks good, it is good. :P
Changed colors on the editor.
Postreply.png
Editor code, from that same dark theme:
/* ------------------------------------------------------- */
/* @EDITOR
/* ------------------------------------------------------- */
#quickreply_options {
padding-top: 2px;
}
#quickreply_options > .roundframe {
padding-top: 1.5rem;
background: #13171b;
border: 0;
box-shadow: inset 0 1px 0 #20272c;
}
#preview_body {
padding: .25rem 1rem .75rem;
}
#post_area {
padding-top: 3px;
}
#post_area > .roundframe {
background: #13171b;
border: 0;
box-shadow: inset 0 1px 0 #20272c;
}
.action_post #recent .windowbg {
box-shadow: inset 0 2px 0 #20272c;
}
.action_post #recent .windowbg:nth-child(even) {
background: #181b20;
box-shadow: inset 0 2px 0 #272e35;
}
.sceditor-container {
background: #0000;
border: 2px solid #000;
border-radius: 0;
}
div.sceditor-toolbar {
margin: 0;
padding: 6px 0 0;
background: #0d1217;
border: 1px solid #423e38;
border-bottom: 0;
}
div.sceditor-group {
margin: 1px 0;
padding: 0 4px;
background: #0000;
border-right: 1px solid #272e35;
border-bottom: 0;
border-radius: 0;
}
.sceditor-group:nth-child(2),
.sceditor-group:nth-child(4) {
opacity: .8;
}
.sceditor-button {
filter: invert(1) sepia(1);
}
.sceditor-button.active {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.4);
}
.sceditor-button:hover,
.sceditor-button:focus,
.sceditor-button:active {
background: #0000;
box-shadow: inset 0 0 0 2px #5980a6;
}
div.sceditor-dropdown {
background: #21262c;
color: #8d887c;
border-color: #485561;
box-shadow: 1px 2px 4px rgba(0,0,0,.8);
}
div.sceditor-dropdown a, div.sceditor-dropdown a:link {
color: #fd9;
opacity: .8;
}
.sceditor-dropdown a:hover {
background: #485561;
text-decoration: none;
opacity: 1 !important;
}
.sceditor-color-option {
border-color: #21262c;
}
div.sceditor-insertemoticon {
margin: 4px 0 0;
padding: 4px 8px 8px !important;
border-top: 1px solid #272e35;
border-radius: 0;
}
/* Eye candy for smileys. */
.sceditor-insertemoticon img {
margin: 6px 8px 0 0;
border-radius: 50%;
opacity: .7
}
.sceditor-insertemoticon img:hover {
border-radius: 50%;
box-shadow: 0 0 0 2px #000, 0 0 0 4px orange;
opacity: 1;
transition: box-shadow .2s, opacity .2s;
}
/* Fix textarea font. */
.sceditor-container textarea {
padding: .5em .75em 2em;
background: #0d1217;
color: #837e72;
font-size: .875rem;
font-family: inherit;
line-height: 1.375rem;
border: 1px solid #423e38;
border-radius: 0;
}
/* Fix textarea font. */
.sceditor-container textarea:focus {
background: #0b0f14;
border-color: #495c6f;
}
div.sceditor-grip {
right: 1px;
left: 1px;
bottom: 1px;
width: auto;
background: #1c232b;
border-top: 1px solid #323f4d;
opacity: 0;
}
.sceditor-grip:hover {
opacity: 1 !important;
transition: opacity .15s .05s
}
/* --------------------------- */
/* Switch submit button order. */
.post_button_container {
direction: rtl;
}
/* ------------------- */
/* Attachments header. */
#post_additional_options_header {
border: 2px solid #000;
}
#postMoreExpandLink {
display: block;
margin : 0;
padding: 6px 9px;
background: #0000;
line-height: 1.625rem;
border: 1px solid #3e3932;
border-radius: 2px;
opacity: 1;
}
#postMoreExpandLink::before {
float: right;
opacity: .6;
}
#postMoreExpandLink:hover::before {
opacity: 1;
}
#post_settings, #postAttachment, #postAttachment2, #attachment_previews {
margin: 0;
padding: 10px 0;
border-top: 2px solid #07090a;
box-shadow: inset 0 1px 0 #20272c;
}
#post_settings {
border-top: 0;
box-shadow: none;
}
#attachment_upload, .descbox {
border-color: #3f3f3f;
}
Now, before you start jumping up and down with excitement :D here's a suggestion: this is all code I run to override default code on this site. That means there are cleaner ways of doing it in a custom theme.
For example, in the previous chunk of code for the .button class I started off with height: auto; but that was just an override for a height set in 2.1's default index.css (because I knew I could do it all with line-height and padding, and I didn't want to have to fight against code for overall height). In practice, if I was doing it as part of a custom theme, I would simply delete the default height declaration entirely.
So, if you want to figure out the cleanest way of doing this stuff, check it all out in detail and see what is needed and what isn't. Even without having been through the default 2.1 CSS in detail I am quite sure there is at least 10kb of code there that is either unnecessary or counterproductive (because I know what it was like during RC) and by that I mean unnecessary or counterproductive even for the default presentation. ;)
ETA: Short version is when in doubt, don't add more CSS. Throw some out and see if it still works. :D
Cool! Definitely gonna have a looksee at this! ;)
I was trying to do this (https://www.simplemachines.org/community/index.php?topic=579972.msg4105223#msg4105223) and it worked but there's alot in there I can't figure what goes to what so I just changed what I could see and renamed it to jquery.sceditor.theme.css and uploaded it to my theme hoping it would work and wallah! :laugh:
I probably didn't need the whole thing in the jquery.sceditor.theme.css but I didn't know what to cut out! ???
Really looking good Shades!
@Antechinus uh oh I got a problem!
Not sure what I did but the top bar message and alerts windows are not working right!
topbar.pngtopbaralerts.png
But the top bar profile window works fine:
topbarprofile.png
I've attached the index.css if you get time to take a look!
I figured it out!
I added a border to:
/* Fixes bug with border-box on scrollable js */
.scrollable,
.scrollable *,
#profile_menu {
box-sizing: content-box;
}
Like this:
/* Fixes bug with border-box on scrollable js */
.scrollable,
.scrollable *,
#profile_menu {
box-sizing: content-box;
border: 1px solid #188dd3
}
I took away the border and it fixed it so now I got to find the right border section to change the color. ;)
Edit: Found it here...
/* Levels 2 and 3 submenu wrapper. */
.dropmenu li ul, .top_menu {
z-index: 90;
position: absolute;
display: none;
min-width: 18.2em;
padding: 0.5em;
font-weight: normal;
border: solid 1px #188dd3;
border-left: solid 1px #188dd3;
border-top: solid 1px #188dd3;
border-radius: 4px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
background: #fff;
}
Sounds exciting. :D
Feels good when you figure out the problem yourself, doesn't it? ;D
Quote from: Steve on April 16, 2022, 09:18:48 AMFeels good when you figure out the problem yourself, doesn't it? ;D
Lol Yes! I usually do right after I post it, it's like a mental thing I have to write (type it) it down then once I see it something clicks in my brain! :o :D
Quote from: Shades. on April 16, 2022, 09:21:55 AMQuote from: Steve on April 16, 2022, 09:18:48 AMFeels good when you figure out the problem yourself, doesn't it? ;D
Lol Yes! I usually do right after I post it, it's like a mental thing I have to write (type it) it down then once I see it something clicks in my brain! :o :D
Sounds like you are learning :). Keep up the good work :).
Quote from: TwitchisMental on April 16, 2022, 10:22:32 AMSounds like you are learning :). Keep up the good work :).
Yeah kinda, thanks! 8)
And here is the final preview (Theme Submitted) ;)
guesthome-min.png
home-min.png
topics-min.png
post-min.png
calendar-min.png
tasks-min.png
Quote from: Antechinus on April 14, 2022, 06:55:44 PMIf 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).
Lol. Was bored, so I looked. Sure enough, it's still in 2.1.1. :D
.buttonlist, .buttonrow, .pagelinks {
z-index: 100;
padding: 5px 0 5px 0;
}Not sure if it's worth a bug report at this stage. It works anyway, since the z-index will just be ignored, but the obvious no-brainer way of writing it would be this:
.buttonlist, .buttonrow, .pagelinks {
padding: 5px 0;
}Now I'm wondering how much code I can get rid of from 2.1's CSS files without changing the presentation at all. Might be an amusing little stunt. From (rough) memory, when I tried the same thing with 2.0.x I managed to knock it down by about 20%.
Quote from: Antechinus on April 14, 2022, 06:55:44 PMQuote 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).
Hey
@Antechinus What is this part of the code go to? (Racking my brain here) :P
.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;
}
That's the "Topic solved" button, which IIRC is a mod that is specific to this site. No need to keep that code in a custom theme if you don;t want to.
Ok cool I thought that's what it was! Thanks! ;D 8)
Installed this theme earlier today at the request of a member. We had a few issues.
1. Background image URL in CSS was incorrect:
background-image: url("/Themes/Blue_Space2.1.2a/images/background.jpg") !important;
needed changing to:
background-image: url("../../../Themes/Blue_Space2.1.2a/images/background.jpg") !important;
2. Quoted text in reply-to boxes was light against a light background.
.bbc_alternate_quote {
background-color: #ebf4f8;
}
This CSS fixed the issue:
.bbc_alternate_quote {
background-color: #ebf4f8;
color: #000;
}
The background image url is correct as is.
At any rate, you should make this post in the theme's support topic: https://www.simplemachines.org/community/index.php?topic=581913.0
Quote from: Steve on September 17, 2022, 09:01:10 AMThe background image url is correct as is.
At any rate, you should make this post in the theme's support topic: https://www.simplemachines.org/community/index.php?topic=581913.0
My bad, I chose the wrong forum, I'll repost it. Thanks.