I'm currently toying with the theme, haven't had much time due to the admin refactoring... It's a slightly modified version of Ema's white theme :)
Edit: Ups, can someone move this to http://www.elkarte.net/index.php?board=5.0, should fit in better...
/me likes the color of the buttons! O:-)
The green isn't so bad either :)
It really looks great! Clean and easy to parse. And yes, fwiw, that grey-ish look of buttons, is more elegant somehow.
Thank you all, this is a newer version with a slightly different color sheme ;) Hope you like it ...
I'll setup a demo-site soon..
Edit: Demo is online, check
www.elkarte.demo (http://www.elkarte.de)
Oh nice! Color set wise, it's already easier on the eye than the bit too bright white-ish, more of a pleasure to browse for me!
I'd kinda think of a more sober green... not sure. (please ignore this thought if it's only me /old-fashioned)
Small quick note, http://www.elkarte.de/index.php?action=profile;u=1
Atm, as you reduce the screen size, the membergroup name is cut. Also just a thought, perhaps at some point, we don't need to display the text 'Online'/'Offline', only the icon?
oki, green is a little bit darker now.. Made a PR to the themes repository :)
That's a pretty good solution, but raises a question: why do you need a seperate mobile theme?
This isn't a separate mobile theme.
I know that. I can recognise my own markup and css y'know. :D Point was that if you can get one theme to do the job, do you actually need the seperate mobile theme that also exists? Does it offer significant performance and/or usability advantages in practice?
By the way, I actually prefer the look of that version to the original SMF 2.1 version. With a little more tweaking it could be a very slick unit indeed.
The current look (was a temporary placeholder for testing variants) is still the old SMF color sheme, it's already replaced in the repo ;)
Well I rather like the green board names version.
By the way, are you guys intending to ship the default theme with more than one variant? Or were the extra ones just for testing?
yep, that's the idea.. ship it with just one theme, but that theme should have some variants by default .. It's still an experiment.. I'd love to see a variant from you (I'm not a designer as you can see). ;)
the green one is my favorite, too :D
Oh goody. ;D TBH I think shipping with one good light (default) variant and one good dark one would be best, for a vanilla package. Some people can't handle light themes (migraines etc) but most office environments require a light theme. One of each would cover all bases.
Oh and since Norv is refactoring the back end into something totally unrecognisable, I think the front end could benefit from a moderate amount of something similar. It would be much easier to build a clean front end if not worrying about inherited SMF 2.0.x crud. That's how I was able to get my other theme so light on CSS: I was able to build the interface using only what was needed.
yep, agreed.. the front-end needs refactoring, too.. I've suggested that a few weeks ago..
http://www.elkarte.net/index.php?topic=354.0
Don't know if we should do that before Elk is going 1.0 final, it's a lot of work and would delay the relase date ... (Elk shouldn't go Vaporware, IMO)
Problem is, we'd need developers in order to help... Interested? ;D
As long as I don't have to use GitHub. :P
Seriously, if I have to pig around with that thing a) it'll waste time and b) make me grumpy. That means a) less time for coding and b) I'll decide there are other things I can do that are more fun. I just know this will happen. Been there before.
If you just want me to write code, that's not so bad. Writing code I can do.
Here's an alternative: use SVN with the repositories, and yet participate to a similar workflow as we do:
https://github.com/blog/1178-collaborating-on-github-with-subversion
Sorry. That looks like more GitGibberish and more trouble. I'll wriite code. I'll post code either here or in the GitHub issues chat thingy. I'll attach files anywhere you like, and download files from anywhere you like. I will not use Git itself. Just wont. Not interested. If that's required, you'll have to ask someone else.
Have you read it? It's SVN. It's that SVN thingie of yours. I have searched for it specifically.
You are welcome to write code and/or attach files if you want. Just please note there's no guarantee we can get to all of them, not because we don't want to, but it makes things time consuming. At least try to submit small and consistent changes, please, and keep your repo/installation updated. Last times we have tried that, there were many changes in batches - very hard to merge. The pace of github is usually very fast, and we have quite some work to still do.
Ok, well in that case it may be less annoying for everyone if I don't get involved too much. I'm really going to want to rewrite most of the front end anyway, just to get markup and CSS down to saner levels, apart from anything else. With the other stuff I've got going on in life, that's not going to be a quick process. TE wants to skip it as much as possible, just so you can get something out the door. I'm sure the basic software will be perfectly competent for a first version, however you release it.
The one thing I would suggest is some a11y improvements for the drop menu system, and other collapsible elements. I can give you those sometime in the form of easy replace/paste code for the templates, if TE doesn't have time to look at it. Also happy to give an opinion if you want front end bugs thumped later.
That sounds great, thank you! :) Feel free to play around with stuff, that's what we're doing after all.
"Rewrite most of the thing" is not a bad thing per se, don't get me wrong there. We have already been doing just that on some core components, and - some silly bugs apart - the thing works, and looks better on the inside. (lol) Because, we try to do it in small or manageable and always-working chunks, even backwards compatible. (where possible)
But, anyway, my hope is that for themes we can make things easier for custom theming. You know, like as easy as possible to make, update, not be too bothered by them mods, stuff. I'd have another suggestion too, here (please shut it if inappropriate): make a custom theme per your liking, and grumble at anything which makes it difficult or bad.
Ant, I would personally love to help you on this. If you want to post files, go forth to your hearts content. I will help move your code into my repo, and merge into elkarte repo's if you want. I'd suggest starting another topic. I'll find it, mark it as notify for me and try to keep tabs on it.
Umm, yeah. Small and manageable and backwards compatible is no fun at all. :P I like coding like a wombat digs burrows: stubbornly going in the chosen direction, with fudge nuggets flying everywhere. ;D
TBH I'm probably not the best person to ask about difficulty. I frequently recode mods slightly before installation, just to suit my presentation preferences, or just install them on the default theme to have the db sorted and then write my own template/css stuff in the custom theme without even bothering to actually install the mod on it. IOW, I've pretty much forgotten what difficult is like, as far as basic front end stuff goes.
That said, I had thought of doing a custom theme at some point. It's a good way to get a feel for the app. I don't expect it to be any more difficult than theming for SMF. Can't see how it would be, so that's ok. Anyway that's better as a seperate, personal project rather than as part of the current dev cycle. I'll try to keep dev suggestions at this stage down to stuff that is easily implemented.
However, a custom theme would probably be a good interface testbed for Elk 1.1, or 2.0 or whatever you're intending to call it.
ETA: Hmm. Had a thought. One ideal test case would be a theme that uses light and dark variants, with completely different accent colours. If anything is going to cause trouble, it'll probably be stuff that makes that degree of css detail within one theme difficult or impossible. This is also a good test case for a default theme, since ideally the app would probably ship with a light theme and a dark one (which would probably be better as variants rather than seperate themes).
It's actually necessary during today - Elk 1.0 stable.
Bloc has already tried to, with not so good results:
http://www.elkarte.net/index.php?topic=353.0
Oh, that. Well I think that partly comes down to getting a tad ruthless on markup, to get rid of as much shiz as possible. That will help to reduce the amount of css required.
However, the current css is a mess though (mainly coz someone left it like that). It would be a nightmare to work with, because there are conflicting declarations in umpteen places, just because it was WIP and stuff was getting added where it would override other stuff some deranged couldn't be bothered searching for at the time. :D
Once that is rationalised, it shouldn't be too bad.
Y'know one obvious place to save css would be buttons. If they're all made the same for special fx then that could be handy. Obviously people could still do custom styling in their own themes just by using the classes seperately, but if you want the simplest default theme then that is one place to start. They could all be listed together by default:
.quickbuttons, .main_menu, extra_stuffz {color: purple;}
.quickbuttons:hover, .main_menu:hover, extra_stuffz:hover {color: orange;};D
Thinkings again (meh) - a lot of the css crud in the 2.1 files you inherited was down to trying to export that admin centre theme to the rest of the forum without changing 2.0.x markup.
If people were sensible enough to not give a rat's about 2.0.x markup in the admin centre, or about keeping bits of the 2.1 Alpha theme, things could be (lots) simpler. Admin, in particular, ended up being pretty convoluted css just to get that look over 2.0.x markup. It could be done with equally clean looks and less code to run it.
Elk Hunt works really well, actually. I'd like to see it :)
Hey quick run around with that palette. Used some bits of it, but not others, just to get stuff that went with the flow and all.
Methinks this is a rather cool look, in general.
ETA: Done a bit more with it:
(http://i.imgur.com/LikxfmV.png)
I recde the js so the header collapse gets rid of the logo etc up top too.
The whole Elk idea is fun, but maybe the images(the on off) and this particular colorset might seem a bit gloomy? That elk symbol reads like a celtic symbol of some sort...I would suggest something a bit more "childish" perhaps, a cartoon elk for example or just something to play on the wordgame.
Though I might have misinterpreted the whole idea behind ElKarte. :D I read it like El karte.Almost like "A la carte" :D If thats the case you should aim for something more elegant in both symbol and colors - IMHO of course.
At the moment they're still messing around with logos. I just grabbed Ich Bin's latest effort and made it green to match the palette, since people seem to be over the blue moose. :D I expect logos will still change.
I like the general colour scheme though. It's not gloomy IMO. It has balls.
Eliana thought it looked pretty damned good.
Damn, there's still no like button.
Oh and this is with header collapsed. Figured get rid of the lot. Peeps over at CEMB are always grumbling that logos are a giveaway when they're trying to sneak on the forum during work hours. :D
(http://i.imgur.com/cG4Bx2A.png)
Here ya go, Bloc. More chirpy icons for ya. :D
(http://i.imgur.com/vErnXPR.png)
ROFL
Ok, just before I trundle off to bed, I had a very quick play with a dark version on the same basic palette. Has potential.
(http://i.imgur.com/4G3CR5A.png)
Might play with it some more during the week.
Here's a thought. Traditionally, most light themes had the category headers in a fairly walloping sort of colour, that stood out like dog's balls against the light background. To slightly reduce the sense of being walloped, the bars were made fairly small in height. This is turn means small heading text in them, if its not to look cramped.
That buggers the visual heirarchy in a sense, because it feels more natural (IMHO - subject to change without notice) if the category headings are bigger, with sizes down the heirarchy getting smaller until they reach standard body font size.
The light and dark versions above are a good indication of this. I think the category headers are very elegant and well-proportioned as they are, but on the light background they smack you in the face a bit when there are a lot of them. This breaks up the page and makes it less scannable. On the dark variant, the category headers are still elegant and well-proportioned, but the lesser contrast against the background means the page feels more scannable on the whole.
Conclusion here is that, if you are considering pages where there are likely to be a lot of header bars without a hell of a lot of space between them (board index being an obvious example) you shouldn't have too much contrast in tone between the bar and the background. This was the basic problem with SMF 2.0.x default admin pages, before I broke the longstanding rule that "nobody ever themes admin". :P Ha. Just when you think nobody will do it, some crazy bugger will do it. :D
Anyway, this is going to place limits on theme colour schemes if adhered to, and pretty much rules out the stone age idea of "effin dark blue header bars on a white or, even better, dingy morbid pale grey background".
By comparison, here's something I threw randomly at the SMF guys yesterday after fiddling with the 2.1 Alpha theme a bit more. Works better than what it was before IMO, but could still be tweaked a bit more. I'm mostly over tiny text for the last post stuff.
(http://i.imgur.com/uhUpSM6.png)
I usually don't think too much on these things - just go with the feeling of what "feels right" with bars/colors/texts/etc. :D Design is not an exact science IME.
But you are right in the stuff about contrast - if thats the look you are after(this theme which is rather light looks better with it, true). Sometimes you really want strong contrasts though, to quickly see the board names for example. It all depends on the whole.
Yes but board names are another thing. Point is that if the category headers draw too much attention, then that tends to make the board names less easy to scan.
ETA: Although, having said that, the board index of the light variant still looks better, in terms of visual appeal at a glance, with the dark green bars. It's still less usable on the whole though, because of the distracting effect.
This wont be such a problem for other pages that have very few header bars. Unread and replies (arguably far more important that board index) will be fine.
I wrote wrong lol, not actually the board names, but the category names of course. If you use logic to determine if you want dark or light catbars - then having dark ones helps distinguish the categories, like when you want to see the boards about knitting quickly from all the other spare time interest categories. :D Just as much as it distracts if you only have one or 5 categories and they all are about ...knitting in some sense. :P
Point is, light/dark have both heir uses - if you see it logically. Design-wise it all depends on how they fit together with the rest(of course text should readable etc.) Conclusion: light look better here, but isn't necessarily better usability-wise.
Yes but (IMFO) having the larger category names gives the visual hierarchy that's needed anyway, so they're still easy to find (for me). Using text size rather than smack-you-upside-the-head dark bars is, I think, in general a better compromise for pages that have lots of said bars on a light background.
Larger names are great - used them myself, so no arguing there. its just visual preference/design choice more than anything else. :)
General question. :)
There seems to be a desire to get away from the SMF colour scheme, and also to do something a bit different to the other major players in forum apps. Everyone, but
everyone, does blue. I've looked over the theme variants that were in the repo the other day, and in general I really like the green/light grey/white combo. It's fresh and cool and easy on the eye. Sort of calming, but with enough pep to not be dull. I find it very easy to work with.
So, for the moment that's what I'm working with on local, just because colours are easy to change, and for now I'd like to use something that makes me happy when I look at the screen.
Would there be general agreement on going with this colour scheme as default?
ETA: I'm planning on doing a complementary dark variant once the front end codebase is mostly sorted, or as soon as I need a break from serious stuff (whichever comes first).
PS: Although I have removed the topmenu class from the main menu on local, which will break all variants currently in the repo. Adding an additional class to a ul which already had one class and one id, and was the first child of another id, was just bloat. No need for it. ;)
I like that color scheme too.
Yep, I'd vote for the green variant, too :) It's "business-ready", and replacing that green colors (if someone doesn't like them) is just a matter of cosmetics..
I've seen it, IMHO it's too dark, however I'm fine with what the majority likes :)
Yeah I don't mind if it goes a bit lighter for default either. Piece of cake to tweak it to suit yourself. :)
I think green should one one of the colors, but not the main color. I think light/dark shades of brown should be the main colors in conjunction with green .
You want a colour scheme based on poo? Ummmm.
yep...
manure actually, because the little undigested blades of green grass give it a nice touch.
I was playing with the "buttons", opinions?
I think they are a bit too many... but that's what we have to deal with...
Well there are lots of buttons ;D
We could hide all the buttons in a drop down, but I'm not sure at what point responsive ends and mobile theme begins at that point. What you show looks to be very usable! I guess we could try to make the buttons smaller and try and get three across if you want to take less vertical space up.
I think it would be good to hide a couple of those buttons depending on the resolution. My mobile phone's resolution is 800x480.. Maybe hide all admin /moderation tasks and other not so important buttons (add poll, print, merge, split and such stuff) in portrait mode (480px) an diplsay them in lanscape (800px)?
I regulary visit this site from my mobile phone and some of the dropdowns, especially the one on display template which shows poster's details) are somewhat annoing. Maybe we can disable the poster details dropdown for those devices completely?
Methinks we need a full mobile theme..
LOL
Indeed!
Well...the fact is not mobile doesn't mean it shouldn't look nice! :P
Good ideas!
Possible...
it's not a full mobile theme but I've spend some hours to make Elk usable in 480px mode.
See for yourself ;D
Looks very :+1000: !
Looking great! :D
Thank you :D
It's based on your former work and ideas.. Just some re-arrangements and a lot of display: none;
https://github.com/elkarte/Elkarte/pull/1060/files
I still need to check & improve the profile page and some other common areas but at least the important actions (Boardindex, messageindex, displayTemplate, unread and unreadreplies) are working pretty well on my Huawai Y300.
If you design mobile first, it will make things alot easier for plugin developers. Using max-width requires too many queries to get it looking right.