Plone multitheme

Here's a recipe for doing a fullwidth toggle that doesn't cause side scrolling (an issue I had with other fullwidth implementations).

A full width row only makes sense and looks ok when you don't have portlets available on a page, so please take this into account :wink:

Good catch. I've added a note to the gist.

Actually, portlets do not 'look correct on most themes anyway (because the (CSS) grid does not 'add up').
So if you need portals, you probably have to edit something anyway (?)… at least f you use columns

Is there a way to 'skip the mosaic part of the class'.

I want

 .grid-row-fullwidth

not

.mosaic-grid-row-fullwidth

(because then I can use already declared css)

For example, adding class 'container' to the row would take care of making the width the same as the 'not fullwidth content'

I think that all of this is a bit of a workaround.
The ideal way to do this is to use .container-fluid, this is the ¨proper way" to use bootstrap to get a fullwidth row.
The issue I'm coming across is that barceloneta and barceloneta based themes make liberal use of .container.

Unless I'm misunderstanding how bootstrap works, the ideal scenario would involve using .container and .container-fluid as they were designed. This would require some tweaks to barceloneta.

In the meantime, I think you could get away with using just .grid-row-fullwidth but I have not tested this.

I think this is similar to your approach:

The TB's CSS class .container-fluid is made for exactly this usecase, but:

  • .container-fluid and .container need to be next to each other, not contained
  • a .container-fluid can never break out of the boundaries of a .container
  • a .container-fluid should be used inside a .container to create a nested grid

So, to break out of a .container and get a full width row, you have to use one of the many hacks available.

As you can see in https://github.com/it-spirit/plonetheme.barcelonetang/blob/master/src/plonetheme/barcelonetang/theme/_less/theme.less#L160, the theme only creates a full-width row when there is no portlet defined. But that required some extra classes on the main column to work: https://github.com/it-spirit/plonetheme.barcelonetang/blob/master/src/plonetheme/barcelonetang/theme/rules/content.xml#L10-L15 (see the additional col-md-* classes).

Why can you not just add this to the add-on (in profiles and css )?

I am solving this 'the other way around'.

With less, it looks like you can do:

.mosaic-grid-row-fullwidth {
  .container;
}

Which basically adds all CSS from .container to .mosaic-grid-row-fullwidth class.

(might look a bit odd in (html) code, but maybe more logical that 'fullwidth' starts with fullwidth and you can 'remove it' than the other way around

It can be seen here: http://xweb14d.plana.dk:8081/Plone/sliders

##Fluid / not fluid
The best option could be to toggle between classes 'container' and 'container-fluid', if that was possible ?

@espenmn... funny you mention all of this.. I composed the response below about 2 hours ago but just got around to posting it. Your solution is intriguing, I'll have to look at that.
Regarding themesitesetup, I mentioned it because I'm assuming TTW all the way, but it means they would be on a installation with all those prerequisites.

Exactly, these hacks solve the problem but....
The problem we have is that #content, which is where everything gets rendered is wrapped in a .container. I've thought of using a Diazo rule to kill the wrapping .container but haven't gotten around to the experiment.

What I'd like to see:

It would be nice to make it possible for mosaic to use the .container and .container-fluid as they were designed.
So two options (both I have not explored):

  • Tweak barcelonta to ship with .container-fluid instead of .container by default.
  • Create Diazo rules that remove the .container dynamically when mosaic is enabled.

It would then mean that every mosaic row would be wrapped in a .container by default making each row fixed-width by default.
Then when a user selects fullwidth, it would switch to toggle .container to .container-fluid to make the row become fullwidth. I haven't dug deep enough to know what will happen with such an approach. Best case, the implementation will just work but I'm guessing that something will break with the current mosaic implementation if this is done.

That only works if you have a 1 column layout and no portlets left or right. For a 2 or 3 column layout you need the container class and then apply the grid.

That's the detail I'm probably overlooking, though I tend not to use fullwidth on pages with columns.

So far I have managed to do everything without using diazo.

It could be possible to fix this with CSS flex in the future (which would basically mean no grid at all).

That said: I can not see too many uses of full width with portlets.
The best solution to this could be to drop the portlets from the page and instead use a 'mosaic portlet container'

A diazo 'expert' :nerd_face: :wink: might be able to adjust the CSS classes ?
(I tried adding a 'portlets placeholder tile' and move the portlets there, without luck).

If anyone has a suggestion of how to make a tile a 'portlet provider (or something similar), please let me know....

I might have a solution for this.
http://xweb14d.plana.dk:8081/Plone/fragments/portlets-fragment

I could need some help with the diazo rule to get the css classes right (I need to adjust the ${central} value in default.xml rules

When I adjusted the rules to drop the portlets, I noticed that both left and right porlet managers use id="sidebar'.... this is probably not 'good' (`?)

My change to the rules is just:

(but would it be better to drop something 'earlier in the rules' `

I have 'gotten some way'… there are still a few bugs; 'I can not go back up') ( if you helping with them):

http://xweb14d.plana.dk:8081/Plone/fragments/fullpage/

If ANYONE has some spare time, it would be nice to have a release.

I have put a lot of work into this, but I could need some help with checking the code / the css etc.

Also, I have made some demo videos:

http://xweb14d.plana.dk:8081/Plone

site seems to be down

It's back