Theming in MenaPro

All you need to know

Create a theme for MenaPro is pretty simple, but must have in count some details.

 

1. Where

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:

 Theme
    |_assets
    |_views
         |_content
         |_layouts
    |_blocks
    |_imgs
    |_js
    |_css

3. The files: CSS and JS

Due to MenaPro is based on Yii you´ll need to create a file in your theme folder assets called ThemeAsset.php. In this file you can define which css and javascript files will be included when your theme is at work. You can use relative url or external url (i.e. google fonts).

Always use this method to add css and javascript, otherwise the compressor will ignore this files and javascript will not be moved to bottom.

Javascript files are stored into js folder and css files into css folder. This is not required, you can use another folder, but remember to point it in your ThemeAsset.php

If you have the need of register some javascript code inside the template better use Yii registerJs method.

4. The views

There are a few view files in MenaPro. Those are:

  1. Layout
    1. This is the main wrapper for all your content. Here goes header and footer.
  2. Procms
    1. This is the first step when rendering content starts. It parse the structure and renders all the rows. 
  3. _row
    1. This is the row view. It returns a row fulfilled with all the columns.
  4. _col
    1. 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:

[class*="TextToImage"]

This will match all of this examples:

TextToImageToText
IconToTextToImage
VideoToTextToTextToImage

6. Working on

Before start working on a new theme you should:

Disable css and javascript minifiers. (config->general)

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

This is the same for javascript and css files of each block.