Would be good to have a dark theme option given the availability of so many dark themes.
SMF has always used the default with no modifications or little, so I cannot see this happening. In honesty their is an accessibility argument here. I know K@ used a browser addon and forced the css to have a dark theme as he needed it so it is possible using external methods.
I am not talking about the main theme being a dark theme, I am talking of having the option to select a dark theme as a user. In all honesty, I cannot see why this could not happen.
I use browser add-ons for dark theme, but current themes do not look good in them due to heavy image use. You are correct, this is an important accessibility issue, SMF should be accessible.
There are some technical considerations that make this difficult to manage on this site.
Not to mention the maintenance of it in future SMF editions.
I don't thing that much maintenance is required. Just install a working theme. Something, even if imperfect, is better than nothing. Checking the stats for this site's use of alternative themes:
The default theme from Simple Machines.
7 people are using this theme.
The default theme of SMF's previous incarnation, codenamed Core.
11 people are using this theme.
I doubt there is much maintenance going on on these themes.
You're assuming the theme is on the same server as the forum itself.
Which given that the URLs for the default theme images are not even on the same *domain* isn't a given. (They're served from https://static.simplemachinesweb.com/smf/default/images/ in case you're wondering).
You're also assuming that this wouldn't immediately be a second class citizen (like the way the session check was introduced in 2.0.14 Curve but not in 2.0.14 Core).
But I'm sure you understand the server architecture and setup of the server here more than I do or what's involved in the practicalities of this.
I'd also point out that 2.1 isn't even shipping an update of Curve for 2.1, when you upgrade you get that theme and nothing else. No backwards compatibility.
There is multi-variant theme feature in SMF (same theme, multiple CSS), may be use it .
Quote from: Arantor on June 09, 2020, 02:52:04 PM
But I'm sure you understand the server architecture and setup of the server here more than I do or what's involved in the practicalities of this.
I doubt I understand something with respect to SMF or server architecture better than you do -:)
On the other had, I did already know about static files being served from a different domain. It still beats me why simply installing an extra theme would be such a major undertaking.
Ideally, the main theme should have the ability to switch to a different css scheme, not being heavy on image use would make that easier.
Anyway, thoughts for a more accessible future for all.
Because the theme doesn't live on the same server... that's the point.
SMF does have a variant system, but even then it would still immediately become a second class citizen much the way RTL already is.
We also have some custom features in our theme. If we gave more options then that is more for our small site team to support. So much more likely that it could be removed due to lack of time. Then we get more complaints.
2.1 will have the Curve2 color changer (https://custom.simplemachines.org/mods/index.php?mod=4231) (sadly, IIRC it only works on the default theme, so you can't set multiple color schemes; schemes can't be exported to a (file system) theme copy; and it can't be used by individual users for themselves, only by the admin).
I personally use global style changers like the Stylus add-on with a "global dark" userstyles.org theme in Chromium, or the "dark background with light text" (IIRC) add-on in Firefox.
It's always been my feeling that this forum should have done more to demonstrate the flexibility, both visually and functionally, of the software. This site looks pretty much (exactly?) the same as it has since 2.0 was officially released (9 years ago Thursday!), that's a very long time for anything software-related. Rotating themes, featured mods, there's so much can be done with SMF, it's a shame no attempt was made to promote it here. I appreciate the maintenance hassles it would create, but still, it seems a missed opportunity.
This site was always meant to keep to the default theme in general so that it's a showcase of what you get out of the box.
Every time mods are used here, people ask how they're configured as though they're core features.
That said I miss smsite2 as a theme and wish we could have that back, I always preferred it to Curve.
Well, what about 2.1 Curve2? It's very similar to Curve. IIRC, Kindred had done some really nice looking color variants while 2.1 was still alpha, but Curve2 ends up being very bland. :P After all this time in development, I'd prefer to see 2.1 come out with a whole new look.
Then you guarantee it'll take even longer to change it AGAIN.
I believe what Kindred did on a test install was all css, so it shouldn't be too difficult to change. Wonder if he still has it?
I think this topic will help you.
Demo (https://webtiryaki.com/index.php/topic,544.0.html)
you mean this?
https://test2.turtleshellprod.com/
I'm still working on getting that tweaked for my client before 2.1 final comes out...
and I need to put the "palette choice" option back in.
but yes, it's all CSS (except for the palette chooser)
Quote from: gecitli on June 10, 2020, 11:40:51 AM
I think this topic will help you.
That's source changes.... which we have already explained why we don't do that here/
I would be concerned if the SMF team were not capable of implementing this on their own site, but it isn't the simple case people make it out to be because this site has a ton of integration work, not to mention the multiple server front ends required to service it.
The skill is here to do it, but there are better things to spend the limited developer time available on.
Quote from: Kindred on June 10, 2020, 11:44:23 AM
you mean this?
https://test2.turtleshellprod.com/
Yes, that's it. :) Will that be available on theme site or is it strictly a custom job for client?
well, the specific background images and brand images would be custom. :)
I may make it available at some point. It's a port of Bloc's 2.0 Studio003 theme look/feel
but it would probably not make much sense to use that theme here on simplemachines.org...
Because I'm a nerd.
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.
Cards are always fun :D
Quote from: spiros on June 09, 2020, 02:42:44 PM
I am not talking about the main theme being a dark theme, I am talking of having the option to select a dark theme as a user. In all honesty, I cannot see why this could not happen.
I use browser add-ons for dark theme, but current themes do not look good in them due to heavy image use. You are correct, this is an important accessibility issue, SMF should be accessible.
You can try this. I did a quick revamp of one of my old dark themes (Chocolate Curvaceous) and I'm running it in Stylem at the moment. Stylish or Stylus would also work, of course. I'm quite liking it, now that you got me motivated. It gives a rather nice dark theme here, still in the Curve style, without dumping extra maintenance responsibilities on the SMF team.
The CSS could still do with a bit of cleaning up, but is pretty decent considering it has to run on top of what is here. Most images have been ditched, with only a few essential ones remaining, and those have been tweaked with CSS filters so they don't look too bad.
It has basic responsive behavior on desktop, but I suspect that the site's lack of a viewport meta tag may screw with the responsiveness on mobile (have not tested this, as I don't use mobile for browsing). Also note that at the moment it has only been tested on this domain (home & forum). I haven't yet tried to make it compatible with the downloads/customize sites, but that would obviously be feasible.
Anyway, feel free to throw the CSS in a browser add-on and see what you think. :)
PS: I also made the drop menus less twitchy. ;)
Looks amazing! I added it here as well https://userstyles.org/styles/185187/dark-smf (Stylish for Chrome - https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en)
Huh, did they rerelease Stylish without the nasty tracking everything you do and phoning home with it?
Stylish has the tracking. :P
Stylus doesn't. :) You can get that here: https://add0n.com/stylus.html
Neither does Stylem (for Pale Moon). Which obviously is my favourite: https://addons.palemoon.org/addon/stylem/
I wouldn't have gone as far as adding it to userstyles quite yet, because I can see it getting more tweaking (and basic code clean up) but I'm fine with you doing it anyway as long as I don't have to support that version.
It's a bit off though, because the new.gif's are the wrong color. This could be because of your language selection. There's a site bug at the moment in that the old (blue) new.gif somehow got uploaded for English. The filter in the CSS was set for that, so would look wrong with an orange gif. Easy to fix. Just remove this from the CSS:
img[src*="new.gif"] {
filter: hue-rotate(160deg) brightness(1.1);
border: 1px solid blue;
border-radius: 3px;
box-shadow: inset 0 0 0 1px blue;
}
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.
I do a fair bit in Stylem (or Stylus when I'm using another browser) but for testing on local it's better in some ways to still use Notepad++. Page reloads are near enough to instant anyway, and you get the benefit of extra functionality in the editor. But I do have quite a few WIP theme ideas sacked up in Stylem, which I switch on and off as the mood takes me. :)
Yes, Editplus, my long time writing pal is always open so its just nice to have Stylus side by side with the live page, especially when I also use the inspector to find out what went wrong..I also use a small extension for Chrome/Vivaldi called Hard Refresh - you can set what to erase, cache, cookies, just css files etc. Often a regular hard refresh will log you out, but not with this one. Very helpful for javascript file changes.
Speaking of localhost...and since we are on the subject anyway :) I've used Xampp for years but recently switched to Laragon. Its faster, can do SSL(ish) and custom domains(at least xxx.test sites) on localhost and can switch PHP versions as well if the need arise. But best of all is the automation where you create a blank site "mysite" whereby database "mysite" and domain "mysite.test" + a folder in the www folder called "mysite" is created. I am sure devs around here know this already, but for me its real gem to have in my toolbox.
Haven't tried it. I'm still using Vertrigo for local. It was idiot-proof back when I started coding, and still seems to be. :)
Quote from: Bloc on June 15, 2020, 12:25:03 PM
Speaking of localhost...and since we are on the subject anyway :) I've used Xampp for years but recently switched to Laragon. Its faster, can do SSL(ish) and custom domains(at least xxx.test sites) on localhost and can switch PHP versions as well if the need arise. But best of all is the automation where you create a blank site "mysite" whereby database "mysite" and domain "mysite.test" + a folder in the www folder called "mysite" is created. I am sure devs around here know this already, but for me its real gem to have in my toolbox.
Thanks for the heads up on this, I'm just giving Laragon a try. Only been playing for a few minutes very impressed already. Starts a lot faster than Xampp, and the clone project feature is great. Within a few minutes had my first Laragon test site up, and cloned a working copy of it. Obviously had to run repair settings on the clone but it did everything else for me in a couple of clicks. Nice. 8)
Yes, it takes away the boring chore of setting things up. :)
Ok, got another one. This has turned into one of my all-time favourites, so I'll also be doing it as an installable custom theme on the Theme Site. IOW, the whole kaboodle, with templates and language files and all the usual stuff that themes have. I'm thinking I'll make it a three variant dark theme: this one (Blue Steel) + Chocolate Curvaceous (the dark brown one I posted earlier) + Prince of Darkness, all updated to the style of this variant.
In the meantime it's CSS only, on this site's markup, so it can be dropped into Stylus or Stylem for browsing on smf.org. It handles the non-forum areas as well as the forum. In other words, it works fairly well with everything in the site menu (at the top right of the forum header).
Do note that this is a pile of overrides for this site's code and should not, this means NOT, be taken as a guide for how to write good CSS in general. Lots of it is seriously horrible, because it had to be to work on top of what is in this site's files. If being done from scratch, as a pure custom theme, it could be done a lot cleaner and simpler.
The CSS file has been minified, so formatting is not particularly friendly, but it all works AFAICT. Code allows for basic responsiveness, but I can't guarantee how that will behave with this site's lack of the usual viewport meta tag.
I have implemented pure CSS "New" icons because I hated the old new.gif. This means it can't pick up the default language strings, so if you don't want it to say "New" in English you'll have to edit the CSS to your preferred language. I have put this at the end of the file so it's easy to find and edit.
/* Pure CSS "New" icons: board index, message index, unread. */
/* English default. Examples provided for French and German. */
/* Edit content text to suit your preferred language. */
/*
content:'nouveau';
content:'neu';
*/
.children .new_posts+a::after,.topic_table a[id*=newicon]::after{content:'new';background:#55677b;color:#ffe3ad;font-weight:700;font-size:1rem;padding:0 4px;text-transform:uppercase;text-shadow:0 0 1px #000}.children .new_posts+a:hover,.topic_table a[id*=newicon]:hover{text-decoration:none;border-color:#55677b;transition:border-color .1s step-end}}
The only part you have to change if you do not want English is where it says content;'new';
The screenshots show how the theme looks when running live in Pale Moon with the Stylem add-on. Do note that at this stage there is no support for RTL languages.
Looks very nice :) Tested in Stylus, no problems reported.
This actually looks like fun - styling up this site like that. :D
It has been quite good fun, although the code you have to work with is pretty damned horrendous in places. It gets you thinking though, because you are forced to use what's there and can't do any of the usual stunts like rewriting anything that's a PITA.
I came up with a range of handy little tricks, including such things as declaring a 50% border-radius on the default smiley gif's to make them look decent on a dark background. And then there's the playing with filters to re-style existing icons. That's quite handy. I remember when we were first talking about CSS filters and we thought there wouldn't be much use for them in practice. Turns out there is. :)
This is stunningly good work! I switched to Stylus from Stylish, the only issue being that I could not find many public templates for third sites (i.e. github, linkedin).
The same code will run in any of these add-ons. It's all just CSS with an @document header to define the domain(s) you want it to work on. You can grab the guts out of any user style and apply it to any domain (although obviously it may not look good on the wrong sites).
Quote from: spiros on June 18, 2020, 02:56:24 AM
This is stunningly good work! I switched to Stylus from Stylish, the only issue being that I could not find many public templates for third sites (i.e. github, linkedin).
They're the same thing, except for one being a fork of the other with all the "report on all your browsing" removed.
Ok, here's an update of the theme that was posted back here (https://www.simplemachines.org/community/index.php?topic=573662.msg4060914#msg4060914).
Updated version is about as good as I can make it, given what I have to work with. Should be free of bugs (the earlier version had a few) and is a bit more refined in general. Contains even more cunning trickery and eye candy, and even more rampant abuse of !important to shortcut horrendous strings of selectors.
Zip contains a fully formatted CSS file (if you want to mess around with it) and a minified CSS file (if you just want to use the thing) and a readme (which you should read*).
Code can be dropped into Stylus (https://add0n.com/stylus.html) (for Chrome, Firefox and Opera) or Stylem (https://addons.palemoon.org/addon/stylem/) (for Pale Moon).
*(...but probably won't :P ).
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?
... ... ... already explained why not.
Quote from: Antechinus on June 22, 2020, 06:54:25 AM
Ok, here's an update of the theme that was posted back here (https://www.simplemachines.org/community/index.php?topic=573662.msg4060914#msg4060914).
Updated version is about as good as I can make it, given what I have to work with. Should be free of bugs (the earlier version had a few) and is a bit more refined in general. Contains even more cunning trickery and eye candy, and even more rampant abuse of !important to shortcut horrendous strings of selectors.
Zip contains a fully formatted CSS file (if you want to mess around with it) and a minified CSS file (if you just want to use the thing) and a readme (which you should read*).
Code can be dropped into Stylus (https://add0n.com/stylus.html) (for Chrome, Firefox and Opera) or Stylem (https://addons.palemoon.org/addon/stylem/) (for Pale Moon).
*(...but probably won't :P ).
Darn. Now you got me hooked too. :P
Very nice indeed, genuine dark(ish) version of the site..and even with the distinct top/bottom links added. :D I will need to study the css abit but already tried the target-anywhere option.
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?
Its a little work to setup to begin with - but start using Stylus/Stylish and you won't regret it. Used it on some sites that need quick fixes(and using to develop new sites even)..or just for the fun of it. But its always going to be a manual affair, I doubt any site will promote any use of styling their content.
Target anywhere? Maybe I need more coffee, but I don't understand that at the moment. :)
You won't stay hooked. Trust me on that. The code here is bloody horrible. :D But turning it into a stand-alone custom theme is going to be fun. That's the pay-off. I figured out most of the detailing I want while doing this thing, so the theme is 99% sorted.
Hey funny thing about board index layout. The Mutant Curve uses a max-width of 88em, simply because that suits my preference for a post content area around 1000px max on desktop. I find once it starts getting over that sentences start getting irritatingly long. You can still read them just fine, but there's a subtle niggle compared to shorter ones.
So Mutant's board index layout was developed for that width (and for ease of stacking on narrower screens) and it looks well-balanced at that width. This one uses 104em max-width, because I was using a more traditional board and message index layout (due to not wanting to go full bananas on the CSS) and that looks most balanced around 104em wide. At 88em it looks a tad stunted, while at 104em the Mutant layout looks a tad lost in space.
Sentences in posts are still ok at 104em wrapper width, but are definitely nudging the outer limits. Not that most people will notice, because they're used to it being stupid wide* so will regard the annoyance as a normal web experience.
*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite. :D
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?
I can always add the thing to the downloads for my Mutant Curve. Or I suppose (if you can talk the team into it) there could even be a sticky in this board for in-browser dark variants, or even for any variants at all. If anyone wants to promote the flexibility of SMF theming this wouldn't be such a bad way of doing it. Provided, of course, that support for said variants was not dumped on the SMF team (who wouldn't want to know about it).
I have even considered using something like Greasemonkey to inject a viewport meta tag into the DOM. That would open up scope for doing genuinely responsive variants on smf.org, although obviously running a custom script is an extra hoop for newbies to jump through, so probably a tad too scary.
Quote from: Antechinus on June 22, 2020, 06:11:07 PM
Target anywhere? Maybe I need more coffee, but I don't understand that at the moment. :)
You won't stay hooked. Trust me on that. The code here is bloody horrible. :D But turning it into a stand-alone custom theme is going to be fun. That's the pay-off. I figured out most of the detailing I want while doing this thing, so the theme is 99% sorted.
Hey funny thing about board index layout. The Mutant Curve uses a max-width of 88em, simply because that suits my preference for a post content area around 1000px max on desktop. I find once it starts getting over that sentences start getting irritatingly long. You can still read them just fine, but there's a subtle niggle compared to shorter ones.
So Mutant's board index layout was developed for that width (and for ease of stacking on narrower screens) and it looks well-balanced at that width. This one uses 104em max-width, because I was using a more traditional board and message index layout (due to not wanting to go full bananas on the CSS) and that looks most balanced around 104em wide. At 88em it looks a tad stunted, while at 104em the Mutant layout looks a tad lost in space.
Sentences in posts are still ok at 104em wrapper width, but are definitely nudging the outer limits. Not that most people will notice, because they're used to it being stupid wide* so will regard the annoyance as a normal web experience.
*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite. :D
target-anywhere as in targeting any attribute of a node..but yes, agreed on 90% width is just plain silly on wide displays. I actually gone another route of applying a padding at the sides of 10vw, going down to 5vw below 1400px and finally staying with 1rem below 1200px, that seems to work out fine for me.
Yes, the code is difficult..but we know that from starting every new theme copying the default code, nothing new under the sun and for me at least, its a code I know very well having mangled it so many times :) Yes, I am still hooked, as in nearly finishing my first ever SMF-site styling for Stylus/Stylish. :)
Quote from: Antechinus on June 22, 2020, 06:32:22 PM
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?
I can always add the thing to the downloads for my Mutant Curve. Or I suppose (if you can talk the team into it) there could even be a sticky in this board for in-browser dark variants, or even for any variants at all. If anyone wants to promote the flexibility of SMF theming this wouldn't be such a bad way of doing it. Provided, of course, that support for said variants was not dumped on the SMF team (who wouldn't want to know about it).
I have even considered using something like Greasemonkey to inject a viewport meta tag into the DOM. That would open up scope for doing genuinely responsive variants on smf.org, although obviously running a custom script is an extra hoop for newbies to jump through, so probably a tad too scary.
Thats a great idea..well, maybe a tad bit off the top for most users to add in Greasemonkey(or Tampermonkey) to add the needed meta tag..and I guess its a whole new level to tackle when making it phone-friendly.. I think I'll rather change the template too then and then its out of scope for this particular project anyway.
Quote*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite. :D
Finally, someone that understands :D
Honestly, this is why we should start using some of that space to add menus or other such things, instead of stacking everything vertically then stretching a 100% width ON-YOUR-FACE image and then adding a title with 3 words that occupies all that space.
People, a site isn't a ******ing billboard. I have taken to using things at 80% size lately to make it more bearable.
And btw, this is looking quite good :)
Even 80% is too much, IMO. My 2c is max-width is the one to use and % is irrelevant, since what I am primarily wanting to do is keep lines of text to a reasonable length. This is basic typography stuff. Lines of text five miles long are a PITA to read, so size content to a reasonable maximum line length. The most logical unit to use is em (or rem, if you prefer) since that relates to number of characters, which is the relevant thing to measure against. :)
And yes, it is looking quite good. I knew that. :D Icons are a tad sucky, but for general distribution I thought I should stick with default icons (although I did consider loading a folder of custom ones online and calling those).
Just an idea to reduce image use in the themes proper you are working on, replacing blockquote image, I implemented FA on Timeless theme:
.bbc_standard_quote::before {
content: "\f10d";
font-family: 'Font Awesome 5 Free';
color: gray;
position: absolute;
font-weight: 900;
left: 4px;
top: 2px;
}
You could use pure css of course:
.bbc_standard_quote::before {
content: "\201C";
font-family: 'Georgia';
color: gray;
position: absolute;
left: 4px;
top: 10px;
font-size: 30px;
}
That requires calling Font Awesome, which is not part of this site. The idea with these is to run CSS-only on top of this site's code. FA is a whole 'nother ball game. Sure, you can use FA for a custom theme if you want to, but that's not the same thing as these overrides.
And frankly you don't even need FA for basic things like a quote mark. You could do it just with html.
See: https://www.toptal.com/designers/htmlarrows/punctuation/
(TBH I only left the quote mark image in because it was already there. I've never liked it much, and would probably ditch it for my own use.)
The 2nd version is pure css. I used FA well, because it was already there as part of the theme.
Fair enough.
Quote from: Antechinus on June 27, 2020, 05:21:38 PM
Even 80% is too much, IMO. My 2c is max-width is the one to use and % is irrelevant, since what I am primarily wanting to do is keep lines of text to a reasonable length. This is basic typography stuff. Lines of text five miles long are a PITA to read, so size content to a reasonable maximum line length. The most logical unit to use is em (or rem, if you prefer) since that relates to number of characters, which is the relevant thing to measure against. :)
And yes, it is looking quite good. I knew that. :D Icons are a tad sucky, but for general distribution I thought I should stick with default icons (although I did consider loading a folder of custom ones online and calling those).
Oh, I mean I'm scaling sites down to 80% scale, not the max width. Got confusing there. I think the readability limit is somewhere around 1200px, which is what I set 2.1 to. I'd prefer smaller, myself.
But pretty much. Not to mention when one thing is in one side and the equivalent thing is on the other side riiiiiight there and you have this effing huge white space in the middle :P
Yup. My preference is around 1000px max for actual post content, but I'm even perfectly happy with 800px. El Darko Magnifico is set to 1200px post content, which as you say is about the upper limit for anything approaching sanity.
Pretty much.
I wish cm/mm was a usable unit sometime soon, it would make sense to measure some things according to their (approximate as it may be) real size. Specially as px is getting out of hand with every monitor having a different size.
But it would require screens to report their physical size, and that the browser somehow knows that size and the resolution to calculate it against. So who knows how that's gonna go.
Maybe if it could be made into a manual input... but who's gonna be arsed to grab out a ruler and configure their screen size? :P
It'll go badly because the Windows display API can't get this right. Better on Linux, incidentally.
I can't see anything wrong with using em and rem. Things on the web are generally sized around making them readable, so em and rem seem like the logical units to use.
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
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.
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
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 (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.
If this site used 2.1, you'd have it out of the box. Time was when this site ran dev versions.
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.
Looks like we need an upgrade for 2.1...
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
At least this one is mobile-friendly by default, but I am sure I have seen around some pretty appealing 2.1 themes :)
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.
SMF_21_Light_variant.jpg
A dark variant will follow (probbaly soonish).
Since someone was evil and killed my other attachment (not mentioning any names :P ) here are some SFW screenies. ;)
SMF_21_Light_index.jpg
SMF_21_Light_message.jpg
SMF_21_Light_display.jpg
Added some more refinements. :)
Yes, even better :)
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. */
/* ------------ */
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
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.
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
Woo hoo! Got a fix for the flickering sidebars. Turns out it can be done with CSS only. Code in this post (https://www.simplemachines.org/community/index.php?msg=4095463) 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
Even more betterer, with cooler looks, and fewer and less gnarly gremlins. 8)
Yes, ok, will start on the dark one soon. ;D
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.
I'm finding the same bug with quick reply preview here, but that's something to do with the guts of 2.1 RC4 as far as I know (or possibly a site issue). It's nothing to do with this theme. :)
And the sidebar option could easily be done as a theme variant for any custom theme. It's something I'd be keen on doing myself anyway, as I much prefer the sidebars.
Waiting on your dark theme.
Nother 20 sec preview load. Doesn't happen on clean install.
If I want preview I just use "Reply" instead of the quick reply. It's faster at the moment. Copy the QR content to clipboard > hit "Reply" > paste clipboard content to textarea > hit "Preview". Fast and easy.
And TBH I'm having a lot of fun fine tuning the light theme. It's "the 2.1 theme as I wanted it, before everyone else made me compromise, and then frigged around with it after I left".
But yes, I want a dark one too. :)
ETA: I should set up a 2.1 RC4 test site online. Then I can run these variants live there, with a simply selector to switch variants.
This doesn't really count as a bug in the 2.1 RC4 default, but IMO the user menu drops look much better with content presented like this.
_Profile_PM_Alerts_Menus.png
This is still standard markup (although that could be simplified). The CSS is simple too, and doesn't need anything extra for responsive.
Maybe put the code in a repo? Much more practical to follow.
I hate GitHub. :P This way is easier for me, and I'm the one doing the work, so... :D
Although I have thought I could start a "Theme Previews" thread and put the files there. Problem is there's still the editing time limit here, which means updating the OP would be impossible and files would still end up strewn through the thread.
Other option is to put it on a domain of my own on a handy page, but that seems a bit daft when it's specific to this site. Best option may be to link the latest files from my sig, and keep that updated.
Anyway, the attached files are where it is up to. The _variant file is heavily commented, if anyone wants to dig into how this thing is put together.
Ok, first crack at a dark version. :)
It's still a bit mutant gnarly WIP for detailing in some spots. Will improve it as I find things that annoy me. :P
I am looking at some right now. :D
Have improved quite a bit since I posted the last files. It still needs work on some buttons, the drop menus, and the pop-up menus, but is otherwise pretty close. Should have it fully sorted by next week. Will post another CSS file in a day or two.
I wonder what happens if I just paste Lunarfall's CSS right here... (requires s* ton of fixing).
Off to a good start though. My initial move was to just paste in the CSS for my old Chocolate Curvaceous 2.0.x variant, and see how that looked. It mostly looked ok, so I went from there. :)
Ok, next version. This is generally pretty decent. Still needs some work.
Main menu buttons and drop menus are still a bit crude for my taste. Pop-up menus still have the light colour scheme. Some minor eye candy tweaks are needed in the profile and PM areas. Apart from those details it should be good to go.
Although do note that I have not tested it much on the Customize Site yet, due to that still being in beta. And of course I don't have access to moderation and admin functions here either, so there may be some odd bits in place I can't see.
I rely on markup changes to offer something relatively different (not big but some) and that creates massive headache to me in situations like this :P
Lol. I love hacking markup (and go nuts on it sometimes) but in this case no can do. I have to get sneaky, instead of just going troppo with a chainsaw. :D
And god said: let there be darkness!
Okey dokey, I am calling this thing finished for now. :)
The forum itself should be fine everywhere for most members.
Caveats:
1/ I have not tried to make this compatible with RTL languages (can do, if there is enough demand).
2/ I have not checked moderation or admin areas (obviously) so don't know about issues there.
3/ Areas outside the forum itself (ie: Customize Site, etc) have been left alone, as these are still a bit beta after the recent site upgrade.
If anyone finds any bugs they want fixed, let me know. I might even fix them. :D
Quote from: spiros on September 03, 2021, 11:11:38 AMMaybe put the code in a repo? Much more practical to follow.
I had an idea about this. We have a sort of non-GitHub repo: the Themes Site right here. Since these are just Curve 2 variants, and since I already have an "Ant's Curve Variants" page there (with associated support thread) the sensible option is to add these Stylus override files as extra downloads on the Themes Site. Easy to keep track of, and easy to update.
And while I'm at it, I might as well make these two into actual installable themes. Most of the work is already done anyway. :)
Brilliant idea. Especially the installable themes :)
Thanks for the good work!
A bug: in forum index only the top (go to top) arrow appears.
That's not a bug as such. Remember I can't touch the markup here. The "Go down" button only appears on certain pages, and not on the board index. ;)
ETA: Although bear in mind that you may encounter some genuine bugs. They are still updating the "RC4" this site is running, so the code I am trying to override keeps changing. For example, just now I noticed some details which were not borked before, but are now.
I will try to keep up wwith the changes, but TBH this is one reason themers hate dev builds and only want to deal with stable code. ;)