Responsive layout (work in progress)

[RobinHood]

I love this Arty! Really clean and some great use of shadows. Love the responsiveness too!

Would you mind explaining how you edited certain elements to make them responsive?

Did you have to edit particular templates at all or is it all done using css media queries and and then restyling parts of the page based on the screen size?

 

[Andy.N]

Yes, it can. In this style if you set fixed width to @pageWidth property, it will use that fixed width in normal desktop window, but will scale down if browser window becomes smaller than fixed width setting. I'll set fixed width when I'll update preview website with latest version to show it in action.

Interesting.
I'm mostly interested in making my fixed width Flexile style more responsive so it works in mobile device instead of having a desktop and mobile style.
For example, I like to remove sidebar when on mobile devices.
Without installing your style, how easy is it to modify the current style to achieve that effect?
Thank you.

 

[Arty]

Its not easy.

I've customized almost every single css template, including account management, forms, overlays. You need to change way elements work, so they would fit in small area. If something requires certain width, such as overlays, its layout has to be completely altered. There should be no fixed width elements with width wider than small browser window. Sidebar menus (such as account management menu) have to be changed to work as popups. All irrelevant information should gracefully hide when browser window is below certain amount.

I'll most likely release something like that for default style too as add-on, which would make it possible to customize other styles. Just as soon as I'll finish rebuilding my website using XF engine (its taking way too long )

 

[Andy.N]

Its not easy.

I've customized almost every single css template, including account management, forms, overlays. You need to change way elements work, so they would fit in small area. If something requires certain width, such as overlays, its layout has to be completely altered. There should be no fixed width elements with width wider than small browser window. Sidebar menus (such as account management menu) have to be changed to work as popups. All irrelevant information should gracefully hide when browser window is below certain amount.

I'll most likely release something like that for default style too as add-on, which would make it possible to customize other styles. Just as soon as I'll finish rebuilding my website using XF engine (its taking way too long )

Thank you. That's great help of yours and I'm looking forward to your addon.

 

[Forsaken]

Its not easy.

I've customized almost every single css template, including account management, forms, overlays. You need to change way elements work, so they would fit in small area. If something requires certain width, such as overlays, its layout has to be completely altered. There should be no fixed width elements with width wider than small browser window. Sidebar menus (such as account management menu) have to be changed to work as popups. All irrelevant information should gracefully hide when browser window is below certain amount.

I'll most likely release something like that for default style too as add-on, which would make it possible to customize other styles. Just as soon as I'll finish rebuilding my website using XF engine (its taking way too long )

This is why I wouldn't tackle this for a released style .

Keeping it updated would require more work than all of my current styles.

 

[DRE]

Dope! Only two things I don't like is you haven't made the whole forum node list block and thread list block clickable like on Russ Mobile theme and I agree with Forsaken about the sidebar info going to the bottom of the forum instead of near the top as an overlay.

 

[Arty]

I've updated style. It is lighter now and has fixed width for testing purposes.

 

[Arty]

and I agree with Forsaken about the sidebar info going to the bottom of the forum instead of near the top as an overlay.

Unfortunately that's not possible.

Sidebar is absolutely positioned and there is no way to know if sidebar is taller than content, so if it is aligned to bottom, part of sidebar might get cut off. If its aligned to top, browser automatically extends page height to show it.

 

[DRE]

Unfortunately that's not possible.

Sidebar is absolutely positioned and there is no way to know if sidebar is taller than content, so if it is aligned to bottom, part of sidebar might get cut off. If its aligned to top, browser automatically extends page height to show it.

Sidebar stuff looks great on the bottom in both regular PC themes and mobile themes. Might as well move regular stuff to the bottom even in the regular theme so that when it switches to mobile it flows easier on the eyes since it's essentially the same.

 

[RobinHood]

It would be nice if the user avatars on the thread list switched to the medium or small version when viewing a thread and the screen is small.

Or possibly disappear completely and just leave the username text.

 

[Andy.N]

I'll most likely release something like that for default style too as add-on, which would make it possible to customize other styles. Just as soon as I'll finish rebuilding my website using XF engine (its taking way too long )

Any update, Arty?

 

[Arty]

Any update, Arty?

It is close to completion. I've converted (about 3 hours before your post ) my website to XF, but some parts are not complete yet. It shouldn't take too long to finish the rest of it.

 

[Allan]

It is close to completion. I've converted (about 3 hours before your post ) my website to XF, but some parts are not complete yet. It shouldn't take too long to finish the rest of it.

No wait

Good job Arty

 

[dojo]

Really good job. It's light, elegant, simple. Keep up the good work

 

[Sheldon]

I think I am going to hold off any more changes on my site until this is released. I cannot wait for this.

 

[Robert F Schmitz]

Nice clean look. I always liked the reddish color for link hovers. The shadows give the appearance of a sheet of paper with the edged slightly raised. Good job.

 

[Shark]

This is actually one of the best themes i've seen so far as I LOVE simple websites, great job!

 

[Andy.N]

Just came across this which reminds me of this thread: VB 5 is replacing mobile style with a responsive design
https://www.vbulletin.com/forum/showthread.php/407848-Missing-Feature-Status

 

[a legacy reborn]

Nice use of shadows, along with just an overall pleasant theme. This definitely makes me want to buy a design from your company .

 

[fattony69]

I've been looking for a responsive theme for quite a while. I believe this is the future of mobile, hands down. My homepage is responsive, but unfortunately my forums are not. You are starting the future.