Regarding Responsive Design (Extremely important)

[Jade Elizabeth]

How exactly is SMF becoming responsive?

More importantly, if I wanted to make my forum 3 column (which I am sure every portal ever is going to ask) or 2 column, how would I go about doing that without breaking the hell out of it.

What I plan on is having two columns on the outsides, much like my current site (exactly like it ha ha). Some areas will ONLY have a left bar and I need to make them work too....so what is a safe plan? What steps should I take to make this work nice?

[Gwenwyfar]

I faced that problem on my forum, though it only has two columns (one sidebar), in the end I just decided the sidebar wasn't important enough and removed it for smaller widths, it just doesn't fit without scrolling. There are people using my forum with even 240px wide phones. The one part which had important info I simply moved into the normal "main column" flow, but I imagine a expand/hide button could work too depending on what it is expected in content from your sidebars, or to leave them available. I'll probably do that later.

But besides those two I don't think there are that many options, you can remove it, make it expandable, or have a min-fixed width and be scrollable (kills the point of being friendly to phones though)

[Kindred]

well, if you define the column as a column to the CSS, it can be moved to above or below the main content when the screen size reaches a certain point, like any of the other blocks

[Gwenwyfar]

Yeah, moving it under would be a good way as well (moving it above would require just more scrolling to get to actual content, unless you add a jump button, which you'd then need to press every time).

[Jade Elizabeth]

Hmm thanks for that hint Kindred. The problem is for this section the sidebar is a menu and it is critical...so maybe I will add it to the bottom. How do I get it to add to the bottom if it's supposed to be on the left?

[Antechinus]

You can always have it sliding in and out on narrow screens, like a normal flyout menu but as a slidey side panel on top of the other content. That's pretty common. Just toggle the bugger when you want it.

I did this for the old 1.1.x sidebar menus on a phone theme ages ago.

[Gwenwyfar]

Yup, that's what I meant with expandable Can be all CSS too

[Jade Elizabeth]

But this is a HUGE menu... the sub items (blue/italic) are just there right now so I can see it, and all of them are just examples, the real thing could be bigger or smaller....either way it would be scrolled whether it pops out the side or not....is that possible?

[Antechinus]

Of course it's possible.

[Jade Elizabeth]

Do you have any tutorials or info I could read up on it?

[Gwenwyfar]

Mine is even larger 

Since it has many "categories" you could make a main button that would show more buttons to expand each "category" inside, with only one active at a time.

For css you can do this with inputs (basically the buttons would be checkboxes or radio buttons), for JS I imagine lots of tutorials will appear on google on any search you make about it

Just keep them as they are, then put a fixed position on them for when it goes down to mobile size.

[Antes]

So Hero Kitty saves the day again?

https://github.com/Antes/smfcurve/tree/2.0.0 < sidebar goes down & content stays up on small screens (only made for 480p at this point). But It'll give you the idea to make things work

[Antechinus]

Mine is even larger 

Oh here we go. That's what they all say.

Since it has many "categories" you could make a main button that would show more buttons to expand each "category" inside, with only one active at a time.

For css you can do this with inputs (basically the buttons would be checkboxes or radio buttons), for JS I imagine lots of tutorials will appear on google on any search you make about it

Just keep them as they are, then put a fixed position on them for when it goes down to mobile size.

Yup. She just needs a standard accordion/slideout menu. Obvious example: http://www.stunicholls.com/menu/stunicholls-sidebar.html

[Antechinus]

So Hero Kitty saves the day again?

https://github.com/Antes/smfcurve/tree/2.0.0 < sidebar goes down & content stays up on small screens (only made for 480p at this point). But It'll give you the idea to make things work

Funnily enough, last night I was playing around with my own idea for the sidebar. The plan is to use a media query and a bit of CSS3 to hide the menu below a certain screen width and turn it into a flyout overlay panel, with a js toggle to show/hide. Seems like an obvious thing to do with the existing sidebar in a 2.0.x theme.

[Antes]

I actually never tried that inside SMF 2.1 smfcurve is Wiki theme project of ours.

* antes finds that interesting...

[Antechinus]

Just got it working nicely. The sidebar toggle (which is just a styled span*) is set to position: absolute; z-index: -9; by default, and the sidebar menu is in its normal position.

A media query the changes the sidebar to position: absolute; overflow: hidden; width: 0; opacity: 0; when the screen is 800 px or less in width, and also sets the sidebar toggle to position: static; and normal z-index (not applied to static anyway, so doesn't need to be re-declared).

The toggle thingy uses jQ addClass and removeClass to do a width/opacity transition on the sidebar, and switch the overflow to visible (so the second level flyouts I'm using still work). It's quite cool. Well, at the moment I think so anyway.


*I ditched the standard SMF menu toggle. That code is all commented out, and menu choice is by profile setting only.

[Illori]

*I ditched the standard SMF menu toggle. That code is all commented out, and menu choice is by profile setting only.

it no longer exists in 2.1 anyway.

[Antechinus]

I know that. It does exist in 2.0.x (which is what I'm playing with) and it could easily be put into a custom 2.1 theme. Which is something I'm likely to do at some point, just not right now.

[Jade Elizabeth]

Yup. She just needs a standard accordion/slideout menu. Obvious example: http://www.stunicholls.com/menu/stunicholls-sidebar.html

I thought the SMF menu would have that already? I will definitely look into that, thank you!

So Hero Kitty saves the day again?

https://github.com/Antes/smfcurve/tree/2.0.0 < sidebar goes down & content stays up on small screens (only made for 480p at this point). But It'll give you the idea to make things work

I will give that a go, thanks . I wish SMF still had sidebars, it was so much quicker and easier for me to find stuff.

[Antechinus]

The difference between the sidebar menu and the drop menus is just a bit of CSS*. It's a fairly simple matter to switch one into the other. In basic terms, the old style sidebar was just a droppy system with the second level permanently displayed, and the first and second levels stacked down the page.

*Well, markup was slightly different in 2.0.x but it didn't need to be.