XF 2.3 Target widget only in full style

[Old Nick]

Hello, i want to customize all widgets in full style <xf:if is="$style == 'full'">
I use this currently

.block [data-widget-key] {
    .block-container {
        selector: variable;
    }
}

But this code impact widgets on sidebar too, how to target only widget in full style?

Thanks.

 

[Mr Lucky]

Unless you create separate widgets for full and sidebar, wouldn’t it make sense to do it the other way round? ie style the widget with what you want for full then target the widget within sidebar container p-body-sidebar ?

Or else if you include it in the template add a container with a unique class for the widget that is in full style?

 

[Old Nick]

Unless you create separate widgets for full and sidebar

That's generally what we do, isn't it? But I don't want to target all the widgets created one by one, I would like to target all the widgets in full mode, so each widget created in this mode would be automatically targeted by the Less code.

wouldn’t it make sense to do it the other way round? ie style the widget with what you want for full then target the widget within sidebar container p-body-sidebar ?

It's a bit convoluted, modifying all the widgets and then un-modifying the sidebar ones?

Or else in the template add a class for the widget that is in full style?

Too many templates to edit and I don't want to modify them, but leave them original, it makes upgrades easier. No I believe that if there is a simple Less selector that solves the problem in one line of code.

 

[Old Nick]

p-body-sidebar ?

That's a clue... maybe i can use p-body-content or p-body-pageContent?

 

[Mr Lucky]

That's a clue... maybe i can use p-body-content or p-body-pageContent?

Yes you can but it may still target anything in sidebar as p-body-sidebar itself is contained within p-body-content, hence I suggested the other way round or else just create two of the same widget so they each have a separate id.

Somebody much more expert than me in css and less may have a more elegant solution

 

[Old Nick]

p-body-sidebar itself is contained within p-body-content

Nope.

 

[Mr Lucky]

Nope.

View attachment 305977

There you go then use p-body-content.

 

[Old Nick]

It works like a charm, thanks @Mr Lucky