Skip to content
flack edited this page Sep 26, 2019 · 4 revisions

MidCOM's style system consists of several layers:


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:


The application (i.e. Component) output can be included by using the reserved name 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:



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).



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.


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:


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.