How to Use the Entity Class Formatter Module in Drupal 9

One day, you will be confronted with the task of theming a particular node or maybe two of them with additional CSS styles that should not apply to the rest of the nodes of that type. 

The way to do this in Drupal would be to find the data-history-node-id attribute of that particular entity and apply CSS styles to it. For example:

article[data-history-node-id="67"] code span,
article[data-history-node-id="117"] code span {
  color: white;
}

The Entity Class Formatter module for Drupal 9 provides the ability to add a class to the entity directly in the edit form of that entity. That way, you write the CSS styles only once, and you can apply them anywhere you want. This is handy if you have multiple editors working on the content because of the freedom and the granularity it provides.

This tutorial will explain the usage of this module. Keep reading to learn how!

Step #1.- Install the Module

• Open the terminal application of your system.
• Position the cursor in the main folder of your Drupal installation (the file composer.json is located there.
• Type: composer require drupal/entity_class_formatter 

• Click Extend.
• Search for the module, enable it and click Install.

Step #2.- Configure the Entity

• Click Structure > Content Types > Article > Manage fields.

• Add a field type List(text) called Style picker.

This field can be either a list, a boolean, a text line, or an entity reference (a particular style for entities referencing a particular term, for example).

• Click Save and continue.

• Enter 3 style names according to your needs. I will use colors.
• Limit the number of allowed values to 1.
• Click Save field settings.

• Mark this field as Required.
• Click Save Settings.

• Click the Manage display tab.
• Hide the title for the Style picker field.
• Change its FORMAT to Entity class.
• Click Save.

Step #3.- The CSS Styles

I am working with a subtheme of Bootstrap Barrio: If you do not know yet, how to create a subtheme, refer to this link: 

• Open style.css in your preferred code editor.
• Add these styles:

.blue {
background-color: rgba(138, 138, 243, 0.2);
padding: 1rem;
}

.green {
background-color: rgba(142, 243, 138, 0.2);
padding: 1rem;
}

.yellow {
background-color: rgba(248, 246, 94, 0.2);
padding: 1rem;
}

Step #4.- Create the Nodes

• Click Content > Add Content > Article.
• Create an Article, add an image and pick a CSS Selector.
• Click Save.

If you do not see a change, just clear the cache.

As you can see, the particular class is applied to the <article> element.

Step #5.- Other Configuration Options

• Click Structure > Content types > Article > Manage display.
• Click the cogwheel right next to the Style picker field.

You have 3 options here:

1. You can add a prefix before the inserted class.
2. You can add a suffix after the inserted class.
3. You can use an attribute to apply your CSS styles instead of using a class.

Other Use Cases

Entity Class Formatter works on all entity types. That way, users with the proper permissions could customize their user profile according to a particular predefined style. It also works with Drupal Paragraphs. 

This practical module will ease the development process of your site. I hope you liked this tutorial. Thanks for reading!