Left and Right Sidebar on Right of Content

DaveOzric
935 Posts
DaveOzric posted this 20 February 2016

Hello, Artisteer and many other templates I have seen allow you to have the left and or right columns together on one side or the other. I have a couple sites that the right columns need to be different widths depending on the page. So I frequently use the system where the left is 200px and the right is 300px but both are on the right side of the template.

Is something like this possible? I was not able to drag the left sidebar to the right side. I would prefer not to have to create a bunch of templates for this since I rarely use the left sidebar because of responsive layouts pushing the content under the left.

Thanks

Hello, Artisteer and many other templates I have seen allow you to have the left and or right columns together on one side or the other. I have a couple sites that the right columns need to be different widths depending on the page. So I frequently use the system where the left is 200px and the right is 300px but both are on the right side of the template. Is something like this possible? I was not able to drag the left sidebar to the right side. I would prefer not to have to create a bunch of templates for this since I rarely use the left sidebar because of responsive layouts pushing the content under the left. Thanks
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 24 February 2016

Hi,

Sorry for the delay.
One of the future Themler updates with support changing of Sidebars order using FlexOrder option. Currently it works for Columns control only.
Most probably this will be a next update after upcoming update.

Thank you,
Olivia

Hi, Sorry for the delay. One of the future Themler updates with support changing of Sidebars order using FlexOrder option. Currently it works for Columns control only. Most probably this will be a next update after upcoming update. Thank you, Olivia
DaveOzric
935 Posts
DaveOzric posted this 24 February 2016

OK thanks, would mostly be useful for blog pages that use that share a template to have different width columns.

OK thanks, would mostly be useful for blog pages that use that share a template to have different width columns.
Support Team
Support Team posted this 25 February 2016

So please follow the news.

Sincerely,
Hella

So please follow the news. Sincerely, Hella
DaveOzric
935 Posts
DaveOzric posted this 25 February 2016

Hello, can you explain what column control and flexorder is? I am trying to learn as much as possible about this product and the more advanced features.

Thanks

Hello, can you explain what column control and flexorder is? I am trying to learn as much as possible about this product and the more advanced features. Thanks
Support Team
Support Team posted this 26 February 2016

Hi,

You can read about the flex properties here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sincerely,
Hella

Hi, You can read about the flex properties here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Sincerely, Hella
DaveOzric
935 Posts
DaveOzric posted this 23 July 2016

Hello, is there a way to do this yet? Thanks

Hello, is there a way to do this yet? Thanks
Support Team
Support Team posted this 24 July 2016

Hi,

Flex order option now works for the sidebars as well.

Sincerely,
Hella

Hi, Flex order option now works for the sidebars as well. Sincerely, Hella
DaveOzric
935 Posts
DaveOzric posted this 24 July 2016

Do you have any instructions for using this specifically in Themler?

Do you have any instructions for using this specifically in Themler?
Support Team
Support Team posted this 24 July 2016

Open the Left Sidebar options in the right panel and set the flex-order property to 1.
That should work fine.

Sincerely,
Hella

Open the Left Sidebar options in the right panel and set the flex-order property to 1. That should work fine. Sincerely, Hella
DaveOzric
935 Posts
DaveOzric posted this 24 July 2016

Thanks,

Is there some guidance to how this can be used overall? Can this be used to set orders in responsive vs desktop views? E.g. have one column above content other on bottom, etc.

Can this be set for anything? Sorry, not super aware of this kind of stuff.

Thanks

Thanks, Is there some guidance to how this can be used overall? Can this be used to set orders in responsive vs desktop views? E.g. have one column above content other on bottom, etc. Can this be set for anything? Sorry, not super aware of this kind of stuff. Thanks
Support Team
Support Team posted this 25 July 2016

Hi,

This property works for flexbox containers only: Columns, Sidebars.
Yes, you can change the order of sidebars in responsive mode separately.
Flex order does not work for "Content" sidebar and works inside, let-say, one row only:

Left Sidebar Above CMS Content
Content
Under CMS Content
Right Sidebar

For example: for

Left Sidebar
Right Sidebar
Above CMS Content
Content
Under CMS Content

use flex-order "-1" for right and "-2" for left.

And for

Above CMS Content
Content
Under CMS Content
Left Sidebar
Right Sidebar

use "1"for left and "2" for right.

Check the Sections like this:
http://templates.themler.com/Themes/Detail/2872955/Six-Columns-icons?statisticsID=49033487&containsInPage=False
Here you can see flex-order applied to Columns.

Thank you,
Olivia

Hi, This property works for flexbox containers only: Columns, Sidebars. Yes, you can change the order of sidebars in responsive mode separately. Flex order does not work for "Content" sidebar and works inside, let-say, one row only: <table class="table table-bordered"> <tr> <td>Left Sidebar</td> <td>Above CMS Content<br>Content<br>Under CMS Content</td> <td>Right Sidebar</td> </tr> </table> **For example:** for <table class="table table-bordered"> <tr> <td>Left Sidebar</td> </tr> <tr> <td>Right Sidebar</td> </tr> <tr> <td>Above CMS Content<br>Content<br>Under CMS Content</td> </tr> </table> use flex-order "-1" for right and "-2" for left. And for <table class="table table-bordered"> <tr> <td>Above CMS Content<br>Content<br>Under CMS Content</td> </tr> <tr> <td>Left Sidebar</td> </tr> <tr> <td>Right Sidebar</td> </tr> </table> use "1"for left and "2" for right. Check the Sections like this: http://templates.themler.com/Themes/Detail/2872955/Six-Columns-icons?statisticsID=49033487&containsInPage=False Here you can see flex-order applied to Columns. Thank you, Olivia
You must log in or register to leave comments