Skip to main content ↑ ↓
Topic: Thoughts for 2.0 Theme (Read 775 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Thoughts for 2.0 Theme

I've been doing a little more playing with things we may want to think about / experiment with in 2.0, so I'll post  them here for commentary and the like.

This builds on the work already completed (and active) and outlined here: https://www.elkarte.net/community/index.php?topic=5992.0

To help understand, I've also installed a theme20 on the site.  This has most of the changes listed below (light only!) so go to your profile and give it a spin

  • Sticky top menu.  As you scroll, once the menu gets to the top, it stays there
  • Info center moved to the right side, folds below when the screen narrows.  With wide screens you end up with a tremendous amount of white space, so using it with the info center makes some sense.  There are some updated styles as well.
  • Quick login bar is gone, it just feels redundant as there is a login button as well.  To make this feel less disruptive I moved the initial login screen in to a "popup" overlay so you don't navigate away (unless of course you fill in the form wrong at which point you end up on the standard login page)
  • Search bar is now in the main menu and expands out when you click on it.  This takes up less room and with the sticky menu is always available.
  • 3&4 help clear up the header area so you can add whatever picture, logo, tagline you want and not have to worry about the login and search bars.
  • There is a collapsible (and the site should remember your choice) sticky topics section.  This allows you to collapse those long lists of sticky topics that some admin's insist on filling the page.  Face it they are generally an annoyance anyway.
  • Enhanced a bit, the info card flyout on the topic page (the one when you hover over the posters name)
  • Stats.  I spiced up the stats page with some chart.js goodness.  The main stats horizontal bar charts are somewhat the same but they do have bar hovers and fill up the space now.  The real goodie is the yearly stats section which is now a line chart with interactive buttons to plot the various items.  I removed the older stats tabulation section, the only thing no longer available is the by day stuff.
  • Profile Stats.  Similar to above, just updated the charts to look a bit more modern and make them easier to read.  TBH I'm not sure the profile stats serves any purpose, but its been updated to hopefully look better. Added like counts in there as well as they were missing.

Already added was the collapsed/show more quote item.

That's all I remember so far, could be some other changes. You can test for yourself by choosing the theme20 in your profile.  Most of these items are not "new", I've done several of them in my other themes, but thought we should consider pulling some items into 2.0.  Other ideas and thoughts?
Last Edit: March 27, 2022, 04:09:14 am by Spuds
Be safe, Be kind, Happy Programing

Re: Thoughts for 2.0 Theme

Reply #1 –

One other item.

Several tables now have sticky headers as well, an example would be the members listing.  Now the table header does not scroll off the page such that you are not sure which column is which.

Re: Thoughts for 2.0 Theme

Reply #2 –

1. Great! I like, this was only available on BeSocial variant, and is one of the main reason I use BeSocial.
2. Nice, but for people using portals will be a way to add other blocks there or modify the right side?
3, 4 Nice, I like it!
6. First time I see this feature on a forum and I like it, I have to admit some sticky topics are annoying.
7. Nice, need to be checked also on mobile
8, 9 Very nice, specially the yearly stats.

With all these modifications Elkarte looks more modern, congrats for your work!

As you know I am a fan of BeSocial variant, I understand that maintaining two themes needs more work and at this point I am wondering if we really need two variants. Instead of BeSocial variant why not use a dark style of Light variant?

Re: Thoughts for 2.0 Theme

Reply #3 –

Already liked all of them.

Re: Thoughts for 2.0 Theme

Reply #4 –

Thanks for the comments!  I'm trying to move it along in the right direction.

I did make some updates/fixes to beSocial, but I don't spend enough time using that theme to notice all the problems.
I was also considering having a dark variant of the _light version, I'll see how that goes !

Re: Thoughts for 2.0 Theme

Reply #6 –

With the site update (done today 4/11) there were some additional tweaks made to the 2.0 theme (you have to choose the 2.0 theme in your profile look and layout),  The changes were mostly minor adjustments in a few areas.  However two things were added:

1) A dark variant is available for testing and feedback.  This variant was 95% done by simply changing the color definitions at the top of the CSS file.  It was a good test as it made me "break out" a few more areas to allow for easier theming.   The rest of the changes were simple things in that same CSS file to get things adjusted, for example the top menu bubble counters are simple indicators in this variant.

2) On the topic display, the print/share/unwatch options are now in a dropdown, again for feedback.  It just shifts a few less used items out of the way.

Re: Thoughts for 2.0 Theme

Reply #7 –

Ooooo the dark theme is rockin!!!

Re: Thoughts for 2.0 Theme

Reply #8 –

:cool:  Glad you like it 

It was a fun to put together.

Re: Thoughts for 2.0 Theme

Reply #9 –

Some good changes, but
Quote from: Spuds  - 
  • Sticky top menu.  As you scroll, once the menu gets to the top, it stays there
This one I'm not a fan of. Especially on mobile, where screen space is already limited. If it was lower it wouldn't be as bad, but consider making it optional entirely.
Just IMO. I'm sure some people like it.

Re: Thoughts for 2.0 Theme

Reply #10 –

That was actually an oversite ... it was supposed to go un-sticky once the menu changed to the touch icons.  Should be fixed now.

If someone really hates it, they just have to comment out one line in the CSS ;)
 

Re: Thoughts for 2.0 Theme

Reply #11 –

Continued to do some cleanup here and there on the theme.  

Converted the last (2) png sprite's to use SVG graphics.  I also updated a couple of the SVG icons to ones that had a better overall look.

Changed the board icons to something with more presence then the old font awesome folder. 

Padding/shadow/blabla tweaks abound

More mobile fixes

Changed the reveal / rollup of the top menu dropdowns so they feel more snappy but still provide a decent hover intent.

Hard to notice, but if you collapse the top header (to hide the logo / tag line) then it becomes a sticky top menu.

Cleaned up the signature / custom icons above signature / likes / other cruft that gets jammed in there so it looks somewhat consistent / acceptable across all the things that can, and do, end up there.

Cleaned up some of the contrast issue on the dark varient.

Still lots to do!:frowning_face: