All Landing Page blocks, both those that come out of the box and custom ones, can have multiple templates. This allows you to create different styles for each block and let the editor choose them when adding the block from the UI. The templates are defined in your configuration files like in the following example, with
special being the template names:
1 2 3 4 5 6 7 8 9 10
Some blocks can have slightly more complex configuration. An example is the Collection block, which requires an
This key defines which Content Types can be added to it.
See this example from the Studio Demo:
1 2 3 4 5 6 7 8 9 10 11 12 13
Custom Content Type icons¶
The Content Type to which a Content item belongs is represented graphically using an icon near the Content item name. Essentially, the Content Types are project-specific so the icons can be easily configured and extended by integrators.
Font icons + CSS¶
Icons in the PlatformUI interface are provided by an icon font. For Content Types, the idea is to expand that concept so that while generating the interface, we end up with a code similar to:
With such classes, the
h1 is specified to display a Content Type icon. The class
ez-contenttype-icon makes sure the element is styled for that and gets the default Content Type icon. The second class is specific to the Content Type based on its identifier and if it's defined in one of the CSS files, the element will get the custom Content Type icon defined there.
Adding new Content Type icons¶
The extensibility of Content Type icons is tackled differently depending on the use case, but it relies on the ability to embed a custom CSS file in PlatformUI with
To prevent the need to configure/extend the system, we provide several pre-configured icons for very common Content Types such as:
There are three ways of choosing Content Type icons:
Pick an icon for a custom Content Type from existing icons¶
In such a case you need to pick the icon code using an icon font. In these examples we use the Icomoon application. To ease that process and the readability of the code, we'll use ligatures in the font icon so that the CSS code for a custom Content Type could look like:
1 2 3 4 5
Add custom icons¶
If the icons we provide do not fit a custom Content Type, then a new custom icon font has to be added. To generate the icon, the Icomoon app can be used (or another icon font generation tool). Then, using a custom CSS stylesheet, this font can be included and the
ez-contenttype-icon-<content type identifier> can be configured to use that font.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Completely override the icon set¶
The solution for this use case is very close to the previous one. A custom icon font will have to be produced, loaded with a custom CSS file, and then the
ez-contenttype-icon style has to be changed to use that new font.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
1 2 3 4 5 6