News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

Main Menu

[Preview] Blue Space

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

Previous topic - Next topic

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

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


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

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

Shades.

Changed colors on the editor.

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

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

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! :laugh:

I probably didn't need the whole thing in the jquery.sceditor.theme.css but I didn't know what to cut out! ???
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

Steve

Really looking good Shades!
Please do not PM me for support.

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.

@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!
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.

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


Steve

Feels good when you figure out the problem yourself, doesn't it?  ;D
Please do not PM me for support.

Shades.

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
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 16, 2022, 09:21:55 AM
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
Sounds like you are learning :). Keep up the good work :).

Shades.

Quote from: TwitchisMental on April 16, 2022, 10:22:32 AMSounds like you are learning :). Keep up the good work :).
Yeah kinda, thanks! 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

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

Shades.

Quote from: Antechinus on April 14, 2022, 06:55:44 PM
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).

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

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! ;D  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

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:

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

Advertisement: