Skip to main content ↑ ↓
Thoughts for 2.0 Theme Started by Spuds · · Read 20199 times 0 Members and 1 Guest are viewing this topic. previous topic - next 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 26, 2022, 10:09:14 pm by Spuds

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?
sorry for my bad english

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 #5 –

Looks good, I like it!  :)

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:

Re: Thoughts for 2.0 Theme

Reply #12 –

Some thoughts after being gone a while and setting up a forum for the first time in forever. Here's my theme thoughts.

- I really like the _custom.css thing.

- I don't know what the up/down arrow thing is on the left is for? What is its function?

- I dragged font-awesome back in using @import because it's so easy (I dunno how to make a web svg data thing) maybe theres some easier way I'm missing. Can we still use icon packs any other way?

- Some of the variables in the css are named -medium-green etc, which doesn't make sense if I apply a new colour, maybe css variable names without colours are needed?


- I ended up using only a few colours to generate the whole forum. Maybe 5/6 hex codes in total. We could perhaps include a 'simple_custom.css' variant that's just a 'light' copy but there would only be 5 colours/palette you picked as highlights which would let it seem very easy to customise but essentially is just to get a colour match so it can easily fit with most sites.
(Possibly worth adding a hex colour picker in theme settings in admin panel if this idea is not bad).

- As powerful as the theme system is, I believe most people just want a quick way to colour match their site.

- SMF has an official mod for it, but I think a smaller version (less options) would do a lot for integration.

Re: Thoughts for 2.0 Theme

Reply #13 –

Quote from: Trekkie101 – I really like the _custom.css
I agree, its a great way to modify the main .css files w/o having to change those files.  That also makes updates a lot easier as well (its kind of like the no source edits for CSS)
Quote from: Trekkie101 – I don't know what the up/down arrow thing is on the left is for? What is its function?
They should act as page top/bottom scrolls, quick way to navigate to the bottom or back to the top.  Are they not working for you?
Quote from: Trekkie101 – I dragged font-awesome back in using @import because it's so easy (I dunno how to make a web svg data thing) maybe theres some easier way I'm missing. Can we still use icon packs any other way?
Not really, I think at this point (most) everything has been converted to SVG icons, which being vector images, scale up/down with no loss of quality.  There are also accessibility items they address.
I wrote a quick guide of sorts Here that I need to update as I've found a somewhat more streamlined way and give some more examples.  Maybe this weekend.

In 2.0 all of the svg icons are in the file icons_svg.css at the bottom of that file are the color filters so make changing the icon colors, should you want to, easier.  If you just want to change some of the icons, you can override them in your variant icons_svg_besocial.css for example. You can really grab any SVG image you want and place its contents in the css, the image can be complex or simple, one color or multiple, etc.
Quote from: Trekkie101 – Some of the variables in the css are named -medium-green etc, which doesn't make sense
Agree.  I've been updating those as time permits.  When I did the conversion to use the vars I first used colors and realized that was a really bad idea:exploding_head:  I've been changing them to be descriptions of where they are used.  There is also an ongoing "fix the inconsistency's" of where things were used, odd things like a single button somewhere having a different border color or whatever.
Quote from: Trekkie101 – - I ended up using only a few colours to generate the whole forum. Maybe 5/6 hex codes in total. We could perhaps include a 'simple_custom.css' variant that's just a 'light' copy but there would only be 5 colours/palette you picked as highlights which would let it seem very easy to customise but essentially is just to get a colour match so it can easily fit with most sites.
(Possibly worth adding a hex colour picker in theme settings in admin panel if this idea is not bad).

- As powerful as the theme system is, I believe most people just want a quick way to colour match their site.

- SMF has an official mod for it, but I think a smaller version (less options) would do a lot for integration.
Glad you were able to make most of the changes with just a few edits, that was kind of the goal of placing all of the color definitions in one place (and trying to apply them consistently).  We could create a pretty flat palette theme that only lists the most likely areas that people change.  As you point out, although there are many areas you could change the colors, most only change a select few primary backgrounds of headers etc,  Maybe a color picker, side project though :smiley:

The entire reason I did the dark variant was simply to test how well the color vars worked, or did not, in adapting a theme.

Re: Thoughts for 2.0 Theme

Reply #14 –

To derail everyone completely. I've started a hunt on the future themes of other software to see any good ideas.

To start with 'Chameleon for phpBB 4'.