How to enhance the unpublished view of a node

22 October 2025

Change this:

Image
default view of an unpublished node in drupal

into this:

Image
enhanced view of an unpublished node in drupal

 

Step 1 - install the https://www.drupal.org/project/asset_injector module

Step 2 - configure CSS

  • go to admin/config/development/asset-injector/css
  • click on + Add CSS Injector
  • give it a meaningful name like "Unpublished"
  • check the Enabled box (if not already)
  • paste the following CSS rules in the Code field
.node--unpublished {
  background-color: transparent;
  border-left: solid 3px orange;
  padding-left: 15px;
}
.gin--dark-mode li.entity-moderation-form__item,
.gin--dark-mode li.entity-moderation-form__item label {
  color: black;
}

The .node--unpublished part is important, the rest is optional.

  • Under 'Conditions' you can select the Content types that this rule applies to
  • and finally, hit Save