Stuff for playing with (here be mutants)

[Antechinus]

So this is the basis for a revamp of some of my old themes. Yes, I know, everyone is going bonkers about flat design and whatever these days, but some of us really don't like it all that much. The best of it is very good, like the best of any genre, but it's not the be all and end all of aesthetics IMO. I still like depth and shading and texture and whatever. YMMV.

Anyway, this is basically a front end coding playground for me at the moment. Some of these things are stuff I have already posted as "Tip and Tricks", some is stuff I wrote for 2.1, and some of it is new. The idea is to incorporate a range of tweaks to the basics of 2.0.x, to make the thing more useful these days and to encourage people to try stuff.

So this means responsive CSS and markup, at least to the stage of making the most commonly used pages pleasant enough to use on a phone. This only requires a few kilobytes of additional CSS. The default 2.0.x CSS is also a bit all over the place, and needs some cleaning up, commenting and re-ordering to make it less of a pain to edit.

Also, click activation of drop menus is useful on touchscreen. Improvements to the sidebar menu can be made by adding flyouts (to hold all the content available through the drop menus). The old huge and complex 2.0.x  images can disappear and be replaced by a combination of CSS and a few small, light images. Avatars, etc can be resized on the fly with CSS, for display in different areas and different screen resolutions. Blah blah blah.

What it should end up being is a sort of "2.0.x default theme" that is still compatible with the vast majority of mods, but offers behaviour people would like. This stuff can then be ripped off by other people, and they can play around with it to make it look how they want it to look. I'm not possessive about this stuff. People will be actively encouraged to rip it off and use it for their own nefarious purposes.

All of the changes between pix are just done with CSS tweaks to the same markup. These will be in the finished theme, either selectable by use of the 2.0.x variant system, or just appearing automatically as screen size changes.

Screenies of current progress are below. Grab your rotten tomatoes and start throwing.

[Diego Andrés]

I like it, nice work

[ARG01]

Looking good. 

[Biology Forums]

Incredible work.

[margarett]

Very nice!

I'm also not very fond of flat... And is that responsive? Cool!

(Nice avatar, btw )

[Bloc]

Looks nice so far. I like the possibility to make the columns change places, makes for nice variations. For example making last post appear left-most.

[Antechinus]

And is that responsive?

Well, at the moment bits of it are responsive, and other bits aren't. The header is, post pages are, and other tweaks have been added for parts of profile and admin. However, I just threw the new board index coding into it and tweaked that for looks, to go with the feel the whole theme is developing, so haven't yet added the media queries for the new code.

I already had basic responsive CSS for the default (table-based) board index, but it's very limited as to what you can do with that.

Looks nice so far. I like the possibility to make the columns change places, makes for nice variations. For example making last post appear left-most.

Yeah it should be fun to play with. I haven't fully explored all the possible CSS options, and of course I also have the "unorthodox" usage of the variant system to call on (like I talked about in the PM's) if I want to take it that far. Not sure how far I'll push this yet.

I had the idea of the last post over at the left as a sort of "content first" thing. Once you know your way around a site, the boards often become less important than the topics, so in some ways making the post the primary thing on the index makes sense. It sort of turns the board index into a recent posts listing first, with the board listing being secondary.

Dunno if it will ever catch on, but I thought it was worth trying.

[kat]

Purty, tiz.

[Bloc]

Recent posts on top doesn't sound bad at all - that actually gave me some inspiration.

[Antechinus]

Oh cool. Wotcha gonna do then? Move that info centre section up? That's not a bad idea, come to think of it (which I didn't). I could see it working though.

Oh and I did have an idea about menus. Currently there's a thing for moving user menu items out of the site menu. It must be totally awesome, because Farcebook and Sh!tHub do it, and everyone is raving about it, so obviously it's the best idea ever.

[/cynical old bastard who has seen many fads come and go]

Anyway, assume doing this just via theme, without mods as such. If some people want to keep a more traditional layout, with avatar etc in the header, you can still do this quite easily.

I've linked the header avatar to profile anyway, so that makes it a profile button. Could easily add a droppy off it if I wanted to (dunno if I will). So all you need is a PM button there too, which can be done with the old PM notification/count text that SMF used to have there anyway.

Then all you have to do is add a notification pop-up to the admin and moderation buttons (which could be done in the template while still calling the current menu array from Subs) and use a bit of basic CSS to hide the profile and PM buttons in the main menu (just because this is "doing it by theme" without hacking Sources).

So if you do those all those simple tricks, you effectively have separation of user menu stuff and site menu stuff, in a more traditional layout that some people may prefer.

[Antechinus]

Ok, so tried out the recent posts idea, just for fun. Not bad. Kinda makes more sense there than down the bottom. Screeny attached.

Has a new toggle defined, so is collapsible just like the "News" section. Just copied the old recent posts stuff from info centre, then commented out the original. Needs a wrapper div added to keep a nice margin to the category below when the recent posts are collapsed.

Basic responsive CSS is sorted for it too (just drops board name column, then date column, as screen gets narrower). Is ok down to 320 wide.

Also threw in this tweak, since it was so easy: Easy mod idea (multi language support stuff)

No screeny for that, but it's basically the same code we used in 2.1 and Elk.

[Bloc]

Oh cool. Wotcha gonna do then? Move that info centre section up? That's not a bad idea, come to think of it (which I didn't). I could see it working though.

Oh and I did have an idea about menus. Currently there's a thing for moving user menu items out of the site menu. It must be totally awesome, because Farcebook and Sh!tHub do it, and everyone is raving about it, so obviously it's the best idea ever.

[/cynical old bastard who has seen many fads come and go]

Anyway, assume doing this just via theme, without mods as such. If some people want to keep a more traditional layout, with avatar etc in the header, you can still do this quite easily.

I've linked the header avatar to profile anyway, so that makes it a profile button. Could easily add a droppy off it if I wanted to (dunno if I will). So all you need is a PM button there too, which can be done with the old PM notification/count text that SMF used to have there anyway.

Then all you have to do is add a notification pop-up to the admin and moderation buttons (which could be done in the template while still calling the current menu array from Subs) and use a bit of basic CSS to hide the profile and PM buttons in the main menu (just because this is "doing it by theme" without hacking Sources).

So if you do those all those simple tricks, you effectively have separation of user menu stuff and site menu stuff, in a more traditional layout that some people may prefer.

I was thinking like you actually..recent posts on top. The idea could be to add attachments(or at least avatars which I do UrbanLife) for a semi-blog experience. But I see your works great, it feels natural to see it there.

he-ey..profile avatar with drop under is what I use lol Its exactly what I have done in UL, putting a user menu under the avatar, a small notification blob top right corner for unread messages, and also divided the man menu some more, for better space requirements.

Another thing..I have been wrestling with something: in the news section I have I used the upshrink feature to exchange CSS classes instead of just display:none. So it works fine, the two classes use transitions on the height to achieve a nice sliding effect. But heres the thing, that only works on a set height. I can't get it to work with auto-height.U know of other ways to make the transition work? It don't have to be the height, as long as its sliding up and down.

I thought margin and overflow:hidden perhaps..but haven't tried that yet, seeing as the height scenario is perfect so far...(other than having to have a fixed height on it, which in this case isn't so bad, but still..)

[Bloc]

Ok, so tried out the recent posts idea, just for fun. Not bad. Kinda makes more sense there than down the bottom. Screeny attached.

Has a new toggle defined, so is collapsible just like the "News" section. Just copied the old recent posts stuff from info centre, then commented out the original. Needs a wrapper div added to keep a nice margin to the category below when the recent posts are collapsed.

Basic responsive CSS is sorted for it too (just drops board name column, then date column, as screen gets narrower). Is ok down to 320 wide.

Also threw in this tweak, since it was so easy: Easy mod idea (multi language support stuff)

No screeny for that, but it's basically the same code we used in 2.1 and Elk.

Yep, using a CSS buton makes very much sense - no more gif'fy problems in other languages.

[Antechinus]

Dunno about the height transitions. Haven't played with those much. IIRC the only time I tried those was on a drop menu, which of course doesn't have a set height, so not much help for you there (no, they didn't work). Nice idea though.

And wotcha mean YOU did a profile droppy off the avatar? Who put profile droppies off avatars in 2.1 and Elk then? Well, ok, actually they came off the username just above the av, but it's all li's and anchors anyway so makes no diff (TBH I haven't looked closely at UL yet).

It makes sense off the avatar up top, if trying to separate user and site menus. TBH though I'm not keen on having the log out button in said droppy. I prefer that at the end of the main menu where it has always been. Saves looking for it when I've spent too long on a forum and need to get back to work in a hurry.

[Antechinus]

Hey that just gave me another idea. Even if using the basic js toggle for the collapse biz, it'd be easy to swap something other than the display attribute. The could save the need for excess wrapper divs, since you could just set the existing content div to your nominal margin height and zero opacity.

(of course, you couldn't then just define a new SM toggle, since that aint set up for fancy business)

[Bloc]

Agree, logout belongs at the end of main menu.

Yeah, I know its used in Elk D it just coincided with..err, well, probably a mix of influences then (*whistle*)

Actually, using height between 200px and 4px, which is what I use, works fine when also using a background image(not an image, it will shrink horribly so next better be just text I guess..though its not superimportant)..and some negative margins to hide the 4px too. But it should really be x in height, not just 200...still, with an theme option on the height its not so bad. Still researching on it.

Hey that just gave me another idea. Even if using the basic js toggle for the collapse biz, it'd be easy to swap something other than the display attribute. The could save the need for excess wrapper divs, since you could just set the existing content div to your nominal margin height and zero opacity.

(of course, you couldn't then just define a new SM toggle, since that aint set up for fancy business)

Yes. I had to write a modified js bit for exchanging CSS classes.

[Antechinus]

Yeah IIRC I nicked the profile droppy idea from Xenforo, after someone raved about that feature. Thievery FTW. If an idea is worth using, it's worth stealing.

I would have thought transitions would work with auto height, but they don't. However, a quick DuckDuck* gives you a solution.

http://css3.bradshawenterprises.com/animating_height/

"This is a really common thing to want to do, and when you know the trick it's really easy! The short version is, you can't animate from 0 to auto using transitions. You have to have a height at the end. However, all is not lost...

So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need."


*/me is not using Google any more.

You might also want to read this: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto

Seems it can change transition speed.

[kat]

+1 for the duckduck!

[Antechinus]

Played with it some more. I have the index.template.php markup trimmed down to the minimum it needs to give the exact Curve look on the wrapper graphics, and without requiring main_block.png. At the moment it uses CSS3 gradients instead. This got rid of one div (class="frame") up in #header, and two divs inside #content section (another .frame, plus #main_content_section). This simplifies the CSS as well as the markup, which is all good.

This new configuration will handle banners of any size without them looking stupid over the background graphics. The second, inner, gradient around the user area, etc will now just move down the header to accommodate the banner above it.

The footer now doesn't include the lower graphics for the theme wrapper. Those graphics are just handled by #wrapper and #content_section. The footer is now independent, and has its own internal wrapper which also calls the forum width setting from admin. This means that by just tweaking CSS a bit, you can now get a full width footer bar in the modern style, for whatever content you like.

Just to prove it would work with the new markup, I also adapted the code from the full-width banner tutorial I wrote today and threw that in for a trial run. This could easily be included as another variant. The actual banner image is 1893px x 441px, and scales just fine on any res. Examples are given for 1280 and 320 wide screens.

The 320 shot also shows how the recent posts respond to that width, by dropping the less important columns. And yes, I know things are slightly misaligned on the small screen. I haven't tweaked the responsive CSS to match the new markup yet.

[kat]

What a clever boy you are!