Custom Mosaic Templates

Plone Support Theming
1

I am trying to apply a client template using Mosaic on Plone 5 and cannot find much documentation in customizing Mosaic templates and the formatted that Mosaic produces.

Here is a quick example. I created a layout within mosaic and saved it. Within the Site Setup -> Layouts Editor (@@layouts-editor), Mosaic’s layout for the row and tile combination looks like:

<div data-panel="content"         data-max-columns="4">
  <div class="mosaic-grid-row">
    <div class="mosaic-grid-cell mosaic-width-full mosaic-position-leftmost">
      <div class="movable removable mosaic-tile mosaic-IDublinCore-title-tile">
      <div class="mosaic-tile-content">
      <div data-tile="./@@plone.app.standardtiles.field?field=IDublinCore-title"></div>
      </div>
      </div>
    </div>
  </div>
  <div class="mosaic-grid-row">
    <div class="mosaic-grid-cell mosaic-position-leftmost mosaic-width-quarter">
      <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.html-tile">
      <div class="mosaic-tile-content">
      <div data-tile="./@@plone.app.standardtiles.html/5b6755bc-0ebf-4d55-9900-8152ff186a24?content=content"></div>
      </div>
      </div>
    </div>
   </div>
  </div>

Now IF my design requires me to have a bootstrap ‘container’ div (

) around the ‘mosaic-grid-cell’ div. How would I go about adding that so that If I add additional mosaic rows in the Mosaic editing interface, that the container class will be repeated within each row? I guess what I am asking is how can I change the Mosaic-produced HTML structure so that it can be replicated as users add rows and columns to their page.

On another note, is there a way to convert the mosaic classes to native bootstrap classes? Our design and prototypes are using bootstrap and we’de like to keep using that framework within Mosaic to ensure we are hitting the designed template target.

1 Like