This is a new feature in Morph which allows you to easily change and apply predefined block styles to your website. 

Block Styles or BlockFX are similar to ModuleFX but applied to the block containing the Joomla module, instead of applied to the module itself.

With the Mocha themelet users enjoyed the ability to change the module styles and colors (modfx), but struggled to apply the same styles to the actual blocks.

Our members asked to be able to use the colors that they see in the modules on the blocks, so they could change color scheme of the site easier and more importantly without having to dig in the code. Well, this is where blockFX comes in. ;)

Applying block styles

If you use the latest version of Morph, you will see a new option on each block.

Changing style of your blocks is now as simple as adding a style reference in the "Block style" option in Configurator.

Each style is prefixed with a set and number and then the style.

As you see in the screenshot, the bottomshelf1 block has the block style of set1 grunge2

You can see on the demo of the Rational Magic themelet what this looks like, it's the block just above the footer with a grungy background like you see in the image below.

Rational Magic was the first themelet with the block styles implemented, and has been followed by the Emphatic themelet.

These block styles can be applied to any of Morph’s blocks, but work best with the ones that fill the width of the screen or have raw module output.

You will notice on the Rational Magic demo that there are lots of color varieties or styles you can set on all pages or any single page. These same colors have been made available as block styles to apply to the blocks containing the modules.

All colors throughout Rational Magic are made up of a color palette you see below.

A key point about block styles is that its used not only to apply a background color to the block, but the actual elements that are inside the blocks. These are matched using the above color palette!

For example, the green block style’s colors will be used to match up things like buttons, headings, links, inputs and also the module subtext, pretext, twotone etc.

Here is an example of a module inside a block with a green style and elements inside it styled to match:

Applying a color style to a block

Applying one of the color styles is as simple as adding a style to the block in Configurator. Just how we looked at before when adding the grunge style, but this time we use a color.

For example set1 red will set a red color background and matching elements.

Here is an example of what our [bottomshelf] would look if we added a red style to it instead of the grunge and a dark style to the footer while we are at it.

Available Block styles in Rational Magic

There is only one (1) set of block styles in Rational magic. It consists of 2 grunge styles and 7 color styles.

There is also one (1) blue gradient block style used as a background on the block below the logo, where the landscape vector graphic is displayed.

Grunge Styles

• set1 grunge1
• set1 grunge2

Color Styles

• set1 red
• set1 green
• set1 orange
• set1 purple
• set1 blue
• set1 teal
• set1 dark

Background gradient

• set1 bluegrad

Why did we create sets if there is only 1 set?

The most important reason was keep the css file size small. If we just bundled dozens of styles into one set, then it would become bloated. You can enable and disable sets on your site to keep the css to a minimum.

Sets are also meant to be matching color sets from the same color palette so the colors work together or by themselves.

The sets allow you to keep the original set we created and also make your own by creating a set2 for example. You can do this by duplicating the original css file and replacing the set1 with set2.