Style Engine

MidCOM's style system consists of several layers:

Theme

This contains general and site-specific layout elements, like the HTML header, navigation sections, footers and the like. The entry point is a file with the name ROOT.php which is located in the style folder of the project's theme directory. The root file can include further style elements with the following snytax:

<(name-of-the-element)>

The application (i.e. Component) output can be included by using the reserved name content

<(content)>

Component Styles

Components are shipped with a default set of Style Elements which are used for different views. They can include further elements like this:

midcom_show_style('my-element');

Overriding

To customize a component's output to fit into your particular needs, you can override its style elements by placing an identically-named file in the style directory of your theme. This file will then be used by all instances of the component instead of the builtin one. It is always a good idea to copy the component's style element and modify it instead of writing one from scratch.

If this is not specific enough, you can also assign a style to a Topic, so that the style element will only be used by this particular component instance (for example, you might want to have a customer blog and a developer blog, which both display certain data differently).

Substyles

midcom-substyle

The Topic's Style can be overwritten with a Substyle. This can be done by explicitly naming a Substyle as a parameter for the MidCOM URL Method substyle. This URL method also works when used together with dynamic_load, enabling a Component to load content from another component with a Style specific to this context.

Example

In /topic1, Style element element1 in Style style1 calls the request url /topic2/request_url in topic2 (associated with style2) and requests the Substyle substyle1:

midcom::get()->dynamic_load("midcom-substyle-substyle1/topic2/request_url");`

This calls the Component associated with topic2 and the Style Element responsible for rendering request_url. Because of the use of midcom-substyle, MidCOM's Style Engine will look in /style2/substyle1, if nothing can be found there, it will look in /style2. If both of those don't contain the necessary Style Element, the Component default Style Element will be used.