Style Engine

flack edited this page Dec 7, 2016 · 2 revisions

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

Symlink Content Topic

While midcom-substyle and dynamic_load can be used to load an individual object into a different style, some [Components](MidCOM Components) also offer the possibility to create a completely separate "view" of a particular Topic by creating a Symlink Content Topic. This is a Topic which has its own Style but reuses data available under a different topic, thus allowing to create a completely separate Look and Feel while keeping all data centralized in one spot.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.