Theming in MenaPro
All you need to know
Create a theme for MenaPro is pretty simple, but must have in count some details.
All themes are stored in themes folder, inside your MenaPro installation.
By now themes are not registered in database, so you can make a theme work by placing it in your themes folder and selecting on your general configuration
2. The pieces of puzzle
Each theme have multiple files, but no one is required, so if you are not gonna customize some file you can skip.
A theme have the next folder structure:
3. The files: CSS and JS
4. The views
There are a few view files in MenaPro. Those are:
- This is the main wrapper for all your content. Here goes header and footer.
- This is the first step when rendering content starts. It parse the structure and renders all the rows.
- This is the row view. It returns a row fulfilled with all the columns.
- This is the column view. It renders the content of the column with parameters received from _row view.
5. The views, part 2
In all the views you receive additional information, like current row number, current col number, structure..
Play with this information to make your theme reactive.
The default _row view adds a composite name css class, it tells you from which to which column is going the row. I.e. TextToText, TextToImage, TextToImageToText
Using this information you can create advanced css rules to make content look different when different blocks are combined. If you want to apply a css rule when an image is next to a text use:
This will match all of this examples:
6. Working on
Before start working on a new theme you should:
Disable cache (config->general)
The best way to start is copy the starter theme and rename it.
Some code you must respect
In layout file there are some lines of code that are strictly required, like $this->beginPage(), $this->head(),$this->beginBody(), $this->endBody(),$this->endPage().
7. Template engines
Template engines are not currently supported but in the incoming versions of MenaPro will be available. It is probably that twig will be used. You can do your own research to make it working (it should be pretty simple, because yii2 has support for this). If you do this make it public adding a pull request on our github repository
8. Additional information
In MenaPro you can choose a theme for the whole web and a theme for a single page.
All blocks views can be overrided
To override a block view create a folder in your theme called blocks, then inside create another folder with the block name you want to override. Inside the block folder create another called views, and here place the view file. Normally called equal than the block. So this is the end route you will get: theme/blocks/icon/views/icon.php