[Preview] Blue Space

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

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)

Code Select Expand

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


You cannot view this attachment.

[Antechinus]

It's just presentation. If it looks good, it is good.

[Shades.]

Changed colors on the editor.

You cannot view this attachment.

[Antechinus]

Editor code, from that same dark theme:

Code Select Expand

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

[Shades.]

Cool! Definitely gonna have a looksee at this!  

I was trying to do this 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!

I probably didn't need the whole thing in the jquery.sceditor.theme.css but I didn't know what to cut out!

[Steve]

Really looking good Shades!

[Shades.]

Thank you @Steve!

[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!

You cannot view this attachment.You cannot view this attachment.

But the top bar profile window works fine:

You cannot view this attachment.   

I've attached the index.css if you get time to take a look!

[Shades.]

I figured it out!

I added a border to:

Code Select Expand

/* Fixes bug with border-box on scrollable js */
.scrollable,
.scrollable *,
#profile_menu {
    box-sizing: content-box;
}
Like this:

Code Select Expand

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

Code Select Expand

/* 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;
}

[Antechinus]

Sounds exciting.

[Steve]

Feels good when you figure out the problem yourself, doesn't it? 

[Shades.]

Feels good when you figure out the problem yourself, doesn't it? 

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!  

[TwitchisMental]

Feels good when you figure out the problem yourself, doesn't it? 

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!  

Sounds like you are learning . Keep up the good work .

[Shades.]

Sounds like you are learning . Keep up the good work .

Yeah kinda, thanks!

[Shades.]

And here is the final preview (Theme Submitted)

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.     

[Antechinus]

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

Lol. Was bored, so I looked. Sure enough, it's still in 2.1.1.

Code Select Expand

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

Code Select Expand

.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%.

[Shades.]

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

Hey @Antechinus What is this part of the code go to? (Racking my brain here)

Code Select Expand

.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;
}

[Antechinus]

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.

[Shades.]

Ok cool I thought that's what it was! Thanks!  

[SulevFan]

Installed this theme earlier today at the request of a member. We had a few issues.

1. Background image URL in CSS was incorrect:

Code Select Expand

background-image: url("/Themes/Blue_Space2.1.2a/images/background.jpg") !important;

needed changing to:

Code Select Expand

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.

Code Select Expand

.bbc_alternate_quote {
   background-color: #ebf4f8;
  }

This CSS fixed the issue:

Code Select Expand

.bbc_alternate_quote {
   background-color: #ebf4f8;
   color: #000;
}