News:

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

Main Menu

Dark theme for this site?

Started by spiros, June 09, 2020, 02:27:37 PM

Previous topic - Next topic

Gwenwyfar

#60
There's nothing wrong with em and rem where it refers to scaling everything around font size, but even font size itself might make more sense to size in cm/mm depending on the situation. Width limit also does (it's more about the physical size than font size, after all. A larger font may go all the way to 2000px if you decide to limit width on em, which might be way over half a meter depending on the monitor, but might be smaller in another.)

There's already some funky stuff going on to try to make things somewhat consistent when 1 real px in a monitor can be half the size of a px in another.

So basically, you could use cm/mm to define key points where real size matters more than scaling it around it. You could define a font in mm, then use rem/em through the rest of the css to scale everything accordingly. Remember, proportions are important, so rem/em will always be very useful no matter the circumstance.

Also, it would open doors to doing more case-specific things, like say I have a plants site, I could make the leaves display in their real size of cm/mm instead of a scaled down/up px measure. That could help people relate to it better. And so forth.

(Speaking of, I went to the pet store this week and found they were selling "Lavendula". I wonder what the heck is that :laugh: For a moment I took it seriously and wondered if it wasn't some special kind of Lavender but then I looked close and it seemed pretty much Lavender to me. So typos ahoooy! XD )

Quote from: Arantor on June 30, 2020, 12:57:57 PM
It'll go badly because the Windows display API can't get this right. Better on Linux, incidentally.
Ah... the joys of Windows...*

*Written from a Windows device
"It is impossible to communicate with one that does not wish to communicate"

Antechinus

Lavendula is the botanical name for lavender. For example, if you want one that will handle a sub-tropical climate the best one to get is Lavendula dentata (commonly known as French lavender). English lavender (L. augustifolia) tends to curl up and die in the sub-tropics.

Gwenwyfar

Ooops. Fair enough, it should have an accent if they were going for that. Google, you failed me. I found lots of verb definitions for it :P
"It is impossible to communicate with one that does not wish to communicate"

JesusIsGodAlmighty.Life

#63
Quote from: spiros on June 22, 2020, 08:37:10 AM
I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

Overall this website would be helped with a mobile option out of the box for sure. Or at least the option to pick a mobile theme to use. I think there was only 2 themes options for the users here, correct? I seems to have the old theme on, although I can't remember where the Theme setting was for the user :P so.... But in any case one of the best functional themes that supports Mobile would absolutly be a nice thing to have. Or the standard themes in a mobile ready state. But... well, I guess that is not going to happen most like.

But we have this option that I really need to try out :D Although I wonder if I need to use the new theme and not the old on the page? Have to find the option for changing the theme again. Must be in profile or something.

Still wildly confused of the options and setup of this forum, and the admin section just makes it even harder to to grasp it all. So many things.

Quote from: Bloc on June 14, 2020, 06:36:23 PM
Nowadays I do all my CSS editing in Stylus, its just sooo easier to see changes right away. Combined with Vivaldi's option to show 2 windows side by side its a killer setup for doing any css work IMHO.

No Pic?

Found one of the apps talked about, I'm reading the topic from beginning here to learn and pick up data points ;)
Anyway, hope I can get it to work on Seamonkey, although because of the speed I should most likely get back to opera. My old computer sadly can't handle Seamonkey. Opera handles multiple tabs much much much better even if I don't like the layout.

-edit-
Although seems like the plugin does not work with seamonkey... At least it is having problems here. :/ Typically.

Quote from: Antechinus on June 10, 2020, 07:27:34 PM
I'd forgotten that one existed.

It did occur to me that it wouldn't be that difficult to grab the CSS for Prince of Darkness or Chocolate Curvaceous and throw it into Stylem (or Stylus or Stylish, as you prefer). Anyone could do that if they really want a dark theme for this site. You could even add some basic responsive bits.

Meh. I might do it just for fun. I have been idly thinking of updating those themes.

Just for people looking after them as I was searching for them and... well I did find them in the end: https://custom.simplemachines.org/themes/index.php?lemma=2428

So far so good - I think I got through it all... Tried the 2 first although the colors are somewhat murky to my taste of eyes, somewhat hard to read compared to Crunchbang and FluxBB Theme that I'm loving, chocalate and dark prince.
I need to try the blue one, so I'll look for the "hack" you told me about and see if I can fix that - now that I can't seem to lay it over in the browser.

Sequential posts merged.  Please do not make so many sequential posts.  Use the modify button instead if you have something to add to your post - Iris.
Dearly Regards - Darkijah - May Jayshua the Anointed, God Almighty who died for the Sins of the world bless you with wholesome health and eyes to see!
Websites: https://jesusisgodalmighty.life and https://paven666.dk

Arantor

If this site used 2.1, you'd have it out of the box. Time was when this site ran dev versions.

JesusIsGodAlmighty.Life

Would have been nice for sure if it was running the RC2 so people could try it out just by being on the forum, but - that does not seem to be something that will happen.
In any case, we just have to wait for that.
In the meantime I've found multiple themes that are mobile ready! :)
Testing and looking around still.
Dearly Regards - Darkijah - May Jayshua the Anointed, God Almighty who died for the Sins of the world bless you with wholesome health and eyes to see!
Websites: https://jesusisgodalmighty.life and https://paven666.dk

spiros

Looks like we need an upgrade for 2.1...

Antechinus

Tell me about it. I'm messing around with it a bit already. First thing is to sort out a decent light variant, that gets rid of all the things that currently bug me* about the 2.1 default theme. Once I have a decent light variant sorted, then I can go for dark.

*I can see I'll also have to do an "Ant's Mutant Curve 2" for 2.1. :P

spiros

At least this one is mobile-friendly by default, but I am sure I have seen around some pretty appealing 2.1 themes :)

Antechinus

#69
I've attached a CSS file for the light variant I'm messing with at the moment. This is still WIP. It's a resurrection of something I tried for my own satisfaction back in 2.1 Alpha. I've always liked this look more than the one that was actually used for the default.

You cannot view this attachment.

A dark variant will follow (probbaly soonish).

Antechinus

Since someone was evil and killed my other attachment (not mentioning any names  :P ) here are some SFW screenies. ;)

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

Antechinus


spiros


Antechinus

#73
By the way, if anyone prefers the old sidebar menu option on desktop or tablet, here's some basic CSS that will change the profile menu here back to a sidebar. Do note that the sidebar cannot realistically be kept down to the 480px width where the 2.1 mobile menus kick in.

Also note that there is a slight flicker on hover over the sidebar blocks. This is due to the Superfish/HoverIntent javascript that the 2.1 drop menus run by default. It's not fixable purely with CSS. However, it's not a huge deal in terms of functionality.

I've also added an invisible pseudo element to the level 3 flyouts. This allows the flyouts to stay open indefinitely even if your cursor runs off the visible menu. If you want to see how it works, temporarily add background: #00ae44a3; to #genericmenu .subsections .subsections > ul::after

This pseudo has also been added to the main menu and site menu drops, to make them more accessible for people with non-optimal cursor control. In some ways it is a better solution than a mouseout delay.

ETA: This is for LTR, and would need minor tweaking for RTL. Will do code for that if there's any demand for it.

/* ----------------------- */
/* Custom sidebar testing. */
/* Adjust @media min-width to suit personal preferences. */
/* There will be a range between sidebar & mobile menus. */
/* In this range, menus will be standard 2.1 drop menus. */
/* ----------------------------------------------------- */
@media screen and (min-width: 720px) {
    /* Overflow needed due to clear: both; on children. */
    #admin_content {
        margin: 0 0 0 240px;
        overflow: auto;
    }
    /* Fix minor inconsistencies due to icons. */
    #admin_content .cat_bar:first-child .catbg {
        max-height: 36px;
        min-height: 36px;
    }
    /* Sidebar wrapper. */
    #genericmenu {
        float: left;
    }
    .generic_menu {
        margin: 0;
    }
    /* Top level. */
    #genericmenu .dropmenu > li {
        display: block;
        margin: 0;
    }
    /* Level 2 submenu links, displayed as .cat_bar headers. */
    #genericmenu .dropmenu > .subsections > a {
        padding: 0  0 0 12px;
        background: #557ea0 !important;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 36px;
        font-family: "Tahoma", sans-serif;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
        border: 0 !important;
        border-bottom: 1px solid #777 !important;
        border-radius: 6px 6px 0 0 !important;
        box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset !important;
        pointer-events: none;
    }
    /* Level 2 submenu wrappers, displayed as sidebar blocks. */
    /* Note: flickers on hover, due to Superfish/HoverIntent. */
    #genericmenu .dropmenu > .subsections > ul {
        position: static;
        display: block !important;
        margin: 0 0 6px;
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
        border-top: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
    }
    /* Slightly increase font-size and spacing. */
    #genericmenu .dropmenu > .subsections > ul > li {
        margin: 2px 0;
        font-size: 13px;
    }
    /* Invisible pseudo, to allow for cursor run-off. */
    /* Also added to main menu & site menu drop menus.*/
    .menu_nav ul::after,
    #genericmenu .subsections .subsections > ul::after {
        position: absolute;
        display: block;
        z-index: -1;
        top: 0;
        left: -1em;
        right: -1em;
        bottom: -5em;
        content: '';
    }
}
/* ------------ */
/* End of file. */
/* ------------ */

Antechinus

And just for the heck of it, this code will replace the dividers in the linktree with a smiley. :D

/* Extra stuff for teh stoopidz! Yay! */
.navigate_section .dividers {
    background: url(https://static.simplemachinesweb.com/smf/smileys/simple/smiley.gif) no-repeat center;
    background-size:  contain;
    color: transparent !important;
    text-shadow: none;
}
/* ---------------------------------- */

Because I can, so why not? :P

Antechinus

Hey I like this. Minor CSS tweak allows clicking anywhere in a pop-up menu header to close.

    .popup_heading {
        position: relative;
        background: #f4f4f4;
        border-bottom: 1px solid #aaa;
        box-shadow: 0 1px 0 #fff;
    }
    .main_icons.hide_popUp_site, .hide_popup {
        position: absolute;
        float: none;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 8px;
        text-align: right;
    }

Everything looks the same (due to positioning of the relevant ::before pseudo) but instead of having to click the icon to hide the pop-up you can click anywhere in its header bar.

Although, given that pop-up help menus have "click anywhere outside to close" by default I do have to wonder why the menu pop-ups do not have the same. It's pretty standard functionality these days. It could be done easily for the pop-up menus too. No reason why not.

Antechinus

Ok, next stage is ready. This should be pretty close to being finished. :P

This one keeps the search form and languages form available up top all the way down to phone size (all it needed was some tweaking of the logo padding). Has several other improvements too.

If you don't want sidebar menus in profile, etc, search for...
/* Custom sidebar testing. */...and comment out or delete that entire media query (lines 1280 to 1328, inclusive).

If you don't want stoopid smileys as linktree dividers (small things amuse small minds) search for...
/* Extra stuff for teh stoopidz! Yay! */...and comment the following code out, or delete it. If you want different stoopid smileys, take your pick. You can even have a different smiley for each linktree link if you really want to get stoopid. :P


Antechinus

Woo hoo! Got a fix for the flickering sidebars. Turns out it can be done with CSS only. Code in this post just needs this added to the end of #genericmenu .dropmenu > .subsections > ul, to force an override of the inline style set by Superfish:
        opacity: 1 !important;
The same bug fix can be applied to SMF_21_Light_26082021.css (attached to reply #76 just above this).
So complete sidebar code is like this:
/* ----------------------- */
/* Custom sidebar testing. */
/* Adjust @media min-width to suit personal preferences. */
/* There will be a range between sidebar & mobile menus. */
/* In this range, menus will be standard 2.1 drop menus. */
/* ----------------------------------------------------- */
@media screen and (min-width: 720px) {
    /* Overflow needed due to clear: both; on children. */
    #admin_content {
        margin: 0 0 0 240px;
        overflow: auto;
    }
    /* Fix minor inconsistencies due to icons. */
    #admin_content .cat_bar:first-child .catbg {
        max-height: 36px;
        min-height: 36px;
    }
    /* Sidebar wrapper. */
    #genericmenu {
        float: left;
    }
    .generic_menu {
        margin: 0;
    }
    /* Top level. */
    #genericmenu .dropmenu > li {
        display: block;
        margin: 0;
    }
    /* Level 2 submenu links, displayed as .cat_bar headers. */
    #genericmenu .dropmenu > .subsections > a {
        padding: 0  0 0 12px;
        background: #557ea0 !important;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 36px;
        font-family: "Tahoma", sans-serif;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
        border: 0 !important;
        border-bottom: 1px solid #777 !important;
        border-radius: 6px 6px 0 0 !important;
        box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset !important;
        pointer-events: none;
    }
    /* Level 2 submenu wrappers, displayed as sidebar blocks. */
    #genericmenu .dropmenu > .subsections > ul {
        position: static;
        display: block !important;
        margin: 0 0 6px;
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
        border-top: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    /* Slightly increase font-size and spacing. */
    #genericmenu .dropmenu > .subsections > ul > li {
        margin: 2px 0;
        font-size: 13px;
    }
    /* Invisible pseudo, to allow for cursor run-off. */
    /* Also added to main menu & site menu drop menus.*/
    .menu_nav ul::after,
    #genericmenu .subsections .subsections > ul::after {
        position: absolute;
        display: block;
        z-index: -1;
        top: 0;
        left: -1em;
        right: -1em;
        bottom: -5em;
        content: '';
    }
}
/* ------------ */
/* End of file. */
/* ------------ */

There ya go. Fully functional sidebar menu, on default 2.1 markup, done with CSS tweaks only. Easy. :P

Antechinus

Even more betterer, with cooler looks, and fewer and less gnarly gremlins. 8)
Yes, ok, will start on the dark one soon. ;D 

Sir Osis of Liver

Sidebars are awesome, HUGE improvement for admin nav. :)  Should have been a core option.


Quick reply preview lagging badly here, 20 sec page load or none at all.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Advertisement: