How do you prioritise the order of a widget when it's being shown 'only in single column mode' ?

Could you customize the Theme and a new set of wrapping formats and then use the classes to hide and show widgets depending on media queries?

I'm not sure I follow, but this would be better handled via widget control due to the different knowledge/experience levels of those who have the permission(s) to change the layouts.

This would be done via widget control, the theme defines the options in the widget dropdowns.

Is there an example of this?

Hi Christopher 

So in the theme editor there is a section called "Body Script", you would need to do this for all themes (site, group and apps)

In this file you will see the ootb wrapping options (the other selector in the widget header)

#set ($minWidthUnit = $core_v2_theme.GetUnitValue('minWidth', '670px', 10))
#set ($minWidth = $core_v2_utility.ParseInt($core_v2_utility.Replace($minWidthUnit, 'px', '')))


#set ($wrappingFormats = [])
#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithNoSpacing'),CssClass='no-wrapper',IncludeHeader='false'}"))
#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacing'),CssClass='no-wrapper with-spacing',IncludeHeader='false'}"))
#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacingAndHeader'),CssClass='no-wrapping with-spacing with-header',IncludeHeader='true'}"))
#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-TopBorder'),CssClass='top-border with-spacing',IncludeHeader='false'}"))
#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-TopBorderAndHeader'),CssClass='top-border with-spacing with-header',IncludeHeader='true'}"))

#set ($options = "%{ WrappingFormats = $wrappingFormats, DefaultWrappingFormatWithHeader = 'top-border with-spacing with-header reponsive-1', DefaultWrappingFormatWithoutHeader = 'no-wrapper responsive-1', LayoutReflowMinWidth = $minWidth }")

$context_v2_themeBody.RenderHeader($options)
$context_v2_themeBody.RenderPage($options)
$context_v2_themeBody.RenderFooter($options)

You can create duplicates of the ones you use and add the extra tags such a responsive into the class

So for example 2 entries for no border with spacing but also with responsive elements 

#set ($priority1 = " (priority 1)")
#set ($priority2 = " (priority 2)")

#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacing')$priority1,CssClass='no-wrapper with-spacing responsive-1',IncludeHeader='false'}"))

#set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacing')$priority2,CssClass='no-wrapper with-spacing responsive-2',IncludeHeader='false'}"))

Once added 

When you use the page editor you will now see 2 new options 




In essence all these options do is add classes to the widget when rendered on the page so you could also add other custom classes if required

Obviously it would be better if you could just extend the responsive options as you can the wrapping ones but this is a clean work around

Thanks, I'll have to see if the dev's consider it a clean workaround and if it's persistable between site upgrades.

Thanks for this, it looked quite promising. Unfortunately there are side effects in the Responsive format menu, where it ends up looking like you have 2 options selected at once;

Ideally, this is an option we'd love to have added to the core platform & would live in the Responsive Behaviour menu.

How have you defined the new wrapping formats ? 

I copied and pasted the lines from your example.

Matt said:

Ideally, this is an option we'd love to have added to the core platform & would live in the Responsive Behaviour menu

Yes, the menu options here should govern "cssClassAddition"

These are the parameters you have to edit/insert in manually but they should really be handled by the GUI:

responsive-shown responsive-1 ("Only shown in single column mode, Priority 1 in single column mode")
responsive-shown responsive-2 ("Only shown in single column mode, Priority 2 in single column mode")
responsive-shown responsive-3 ("Only shown in single column mode, Priority 3 in single column mode")

At the moment you have to export the XML of the theme, edit them manually and then re-import the XML of the theme.

Matt said:

Ideally, this is an option we'd love to have added to the core platform & would live in the Responsive Behaviour menu

Yes, the menu options here should govern "cssClassAddition"

These are the parameters you have to edit/insert in manually but they should really be handled by the GUI:

responsive-shown responsive-1 ("Only shown in single column mode, Priority 1 in single column mode")
responsive-shown responsive-2 ("Only shown in single column mode, Priority 2 in single column mode")
responsive-shown responsive-3 ("Only shown in single column mode, Priority 3 in single column mode")

At the moment you have to export the XML of the theme, edit them manually and then re-import the XML of the theme.