Customizing the plone.app.mosaic package

1

Hey @datakurre, I am creating this topic to ask you a few questions about customizing the mosaic package. Currently, the package is using the theme barceloneta from its github repository. However, I want to customize the theme myself by modifying the barceloneta package on my local and then attach it to the mosaic package (I guess this is how it works). Could you show me how to do that?

Thank you so much.

2

I need little more details, what are you customizing in particular? Mosaic only uses variables and CSS grid macros from Barceloneta.

3

Right now, for example, I want to customize any css elements on my mosaic site. What I came up with is modifying the bower.json in mosaic package

"dependencies": {
    "bootstrap": "~3.3.4",
    "patternslib": "~2.0.11",
    "jquery": "~1.11.2",
    "plonetheme.barceloneta": "https://github.com/nctl144/plonetheme.barceloneta.git"
  },

change the plonetheme.barceloneta to my forked repository and then makes css changes there. Will it work?

4

No.

That bower fetched version of plonetheme.barceloneta is only used for building the CSS with class names supported by Mosaic Editor. Otherwise the visible Barceloneta theme comes from buildout installed plonetheme.barceloneta release.

Please, go through the Plone 5 theming training material on how to copy an editable version of the current theme https://training.plone.org/5/theming/ttw-advanced.html#copy-barceloneta-theme

Alternatively Mosaic repository contains a configuration for my Webpack based theming approach Plone 5 frontend development plugin for webpack, but I have not tried if it still runs directly from the checkout https://github.com/plone/plone.app.mosaic/blob/master/README.rst#webpack-based-frontent-development

5

Thank you so much for the references. I did not know about those :slight_smile:

6

I will work on that right now

7

Hey @datakurre, I have one more question. Having sent my GSOC application for the Improving the Plone Listing customization idea, I have read the materials that you sent me and have quite understanding toward this project. Although I don't really know whether I am actually going to work on it during the summer, I just want to get a closer look at it. Either way, it is a chance for me to learn. Therefore, do you have any suggestion about what I should work on from now to further approach this project idea?

I am also working on building my portfolio using Mosaic and hope that it is going to be finished real soon.