Material Theme colors and patterns

Grid and Block backgrounds

The Material theme comes with 21 color presets that you have use in order to color the background of your grids or blocks. In order to use these color presets you need to add at your User Defined CSS Class the desired color class out of the following 21 color presets:



You can add any of the above color classes directly inside the User Defined CSS Class as in illustrated in the example below. If there are other CSS classes inside your custom css class field you can separate them by leaving a space.

 

Colorful block titles

The same 21 color presets that apply as a background color for your grids and blocks can also be applied to titles of your blocks that place them in a centered position above the block when selected the mainbox general wrapper.

These presets have the same names with the color pallete above, with the added prefix of central- so that it is identified as a title. In the same manner the color presets for titles are applied as central-white, central-black, central-red, central-pink and so on.

In some cases, text inside a colored grid or block sometimes is hard to read when the background is dark so we threw in there an extra set of two classes that you can use on your User Defined CSS Class which turns the text either black or white. By default, text is black so if you want to make it white just add the custom class whitetext along with the rest of the custom classes that you define in that box.