Optimizely CMS 12 – Help Text and Expanded Input Text Boxes

This article is already out of date. A couple of weeks after publishing this article updates were made to the editors in CMS 12 to utilize to Optimizely-OUI NPM package. This update has major changes to the fields in All Properties view.

I am going to revisit an oldie but a goodie. A long while ago Alf Nielson created some CSS to enable the description to show beneath a label for a property in the All Properties view. The CSS has changed slightly in CMS 12 and hopefully, this quick article will help you update it if you plan on using this approach in CMS 12. I have also included the CSS to expand the text input boxes.

Here is Alf’s original article: Display Help Text in All Properties.

Creating the CSS File

Our first step in the process is to create a new CSS file that we named editorStyles.css. This file was added to the folder wwwroot\ClientResources\Styles\editorStyles.css

The following CSS was then added to the file:

/* The following classes remove the help '?' and show 
the description below the field title in all properties mode */
.Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after {
  content: attr(title);
  display: block;
  font-size: 0.8em;
  font-style: italic;
  margin: 0.3em 0 0 0;
  width: 100%;
  height: auto;
  text-align: left;
  background-color: #ffffff;
  color: #000000;
  font-weight: 400;
  border: 0;
}

.Sleek .dijitTabPaneWrapper .epi-formsRow label[title]:hover:after, .Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:hover:after {
  background-color: #ffffff;
  border: 0;
}

/* The following classes expand the size of the 
input text boxes in all properties mode */
.Sleek .dijitTextBox, .Sleek .dijitTextBox .dijitInputContainer {
  min-width: 45%;
}

.Sleek {
  font-family: Inter,sans-serif;
  color: hsl(241,77%,12%);
  font-size: 14px;
}

Adding the CSS will remove the “?” and the tooltip that is displayed when the user hovers over the “?” and move the tooltip underneath the property’s label.

Before:

After:

The last two CSS selectors expand all text boxes so that they are not so small.

Before:

After:

Updating the Module.config file

The last part of this exercise is to include the CSS File. This is done in the modules config as shown below. Please note that CMS 12 runs in the DXP in a Linux environment and that paths to files are case-sensitive.