Skip to content

Instantly share code, notes, and snippets.

@pigeonflight
Last active November 29, 2017 12:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pigeonflight/8835a2521749526e5b3049243c00ada3 to your computer and use it in GitHub Desktop.
Save pigeonflight/8835a2521749526e5b3049243c00ada3 to your computer and use it in GitHub Desktop.
Fullwidth for plone.app.mosaic

This assumes that you're using collective.themesitesetup. I don't recommend that you use this fullwidth implementation on pages where side portlets are enabled, it tends to look "wonky".

  • Include the fullwidth-for-mosaic.less file with your theme, it needs to be included as part of one of the files that gets compiled to css.
  • Create a folder in your theme and name it install then place the registry.xml in the install folder.
  • Add the line below to your manifest.cfg file
[theme:genericsetup]
install = install
/* ====== overrides for fullwidth ====== */
.mosaic-grid-row-fullwidth {
padding-left: 0;
padding-right: 0;
}
/* make the containers 100% by default */
.outer-wrapper > .container{
width:100%;
}
/* set a max width so that it doesn't look weird on super large
desktop screens */
footer{
max-width:1536px;
margin:0 auto;
}
.outer-wrapper{
max-width:1536px;
background-color:white;
margin:0 auto;
padding: 16px 32px;
}
/* give it a background color to frame everything (only
useful on super large desktop screens */
#visual-portal-wrapper{
background-color:black;
}
#content {
/* default behaviour is to have a 32px margin on both sides of
the standard mosaic grid row */
.mosaic-grid-row {
margin-left: 32px;
margin-right: 32px;
}
/* zero the padding for the full width mosaic grid row */
.mosaic-width-full {
padding-left: 0;
padding-right: 0;
}
/* Use a negative margin on the fullwidth row */
.mosaic-grid-row-fullwidth {
margin-left: -32px;
margin-right: -32px;
}
}
/* navbar container class reset (otherwise content in the navbar appears
to be too narrow */
body .plone-navbar .container{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* I don't want any margin at the bottom of the content
probably up to your taste
*/
#content {
margin-bottom:0;
}
<?xml version="1.0"?>
<registry>
/* adds a custom fullwidth action */
<record name="plone.app.mosaic.default_available_actions">
<value purge="False">
<element>grid-row-fullwidth</element>
</value>
</record>
<records interface="plone.app.mosaic.interfaces.IFormat"
prefix="plone.app.mosaic.formats.grid_row_fullwidth">
<value key="name">grid-row-fullwidth</value>
<value key="category">row</value>
<value key="label">Full width</value>
<value key="action">row-toggle-class</value>
<value key="icon">true</value>
<value key="favorite">false</value>
<value key="weight">100</value>
</records>
</registry>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment