Type Style

Summary

Type Style allows users to associate colors and icons with their types. This is an important feature for building rich user interfaces, as content editors can quickly associate iconography and colors with a type. Currently Content types, Custom block types, (core) Media types, Taxonomy vocabularies, and File types are supported, but any custom or contributed type can be supported.

Quick start

To quickly see how this module could work with your user interface, you can enable the "Type Style Example" sub-module. This will automatically configure your Content Types to have a random color and icon, and provide a simple view of content at /admin/type-style-example. This is a great way to jump in and start trying things out.

Use

This module has no dependencies and you can start using it immediately once installed!

Adding style to a type

Type Style adds extra style configuration to type (entity bundle) forms. Anywhere that you edit a type, you should also see a "Style settings" field set. Fill out the color and icon you want to associate with a type and save the form, then you're ready to start styling interfaces.

Styling interfaces with Views

Adding icons and colors to a View is made easier by field plugins provided by this module. For every type available on your site, you should see new style fields, i.e. "Content type color", "Content type icon", and "Content type custom style". These will render configured style values based on the bundle of the entity being rendered in the Views row.

Rendering icons in Views

How the icon is rendered is completely up to you to determine. It's expected that you'll be using an icon font, but ultimately you could use the icon setting in any way you wish (i.e. to contextually render an SVG, add a class, etc.). For a simple use case using Material Icons, add the "Content type icon" field to the "Content" View and rewrite the output of the field to match <i class="material-icons">{{ type_style_icon }}</i>

Rendering colors in Views

Views doesn't allow users to add style attributes to rewritten/custom text, which makes adding a color to a field pretty hard. To get around this limitation while maintaining Views security, Type Style will replace the data-type-style-color and data-type-style-background-color attributes in a Views row with the relevant style code, as long as you add the "Content type color" field to the output as a hidden field.

Using style tokens

This module provides tokens for all entities whose bundles support third party settings. For content, these tokens are: [node:type-style-icon] and [node:type-style-color].

Use with Twig

A Twig function is also available so that specific View modes and administrative pages can benefit from Type Styles. If you have an entity available, you can render a style like this:

{{ type_style(node, 'style_name', 'optional_default') }}

If you don't have an entity, you can load one and render a style like this:

{{ type_style('node', 1, 'style_name', 'optional_default') }}

or since Type Style accepts Bundle entities as well, you could do this:

{{ type_style('node_type', 'article', 'style_name', 'optional_default') }}

Changing the icon font

To make the module usable out of the box without custom code, functionality is automatically enabled that adds the configured icon font to every page. To change the icon font, visit /admin/structure/type-style/settings. Note: The configuration on this page only changes what library is added to pages, and is safe to turn off if you're already using an icon font. This only exists for ease of use and does not affect the functionality of the module in any other way.