Try our conversational search powered by Generative AI!

Praful Jangid
Oct 19, 2019
  3265
(12 votes)

Make property help text permanently visible

NOTE: Supported upto CMS version 12.9

In continuous efforts to make editors life easy, it will be helpful to make the property help text (shown in below image) permanently visible.

In reference to this blog post, I would like address one issue that, when we try to create block directly from content area those help text are not visible.

So, Let's start...

We will add CSS properties, that will add title text into html element's :after selector (for elements that contains help text in title attribute).

In Episerver, to add a css you will need module.config file, to be added in main project. Create a module.config file and paste the following lines (don't forget to update the path to your css file)

<module xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <clientResources>
    <!-- Add css file path in path attribute-->
    <add name="epi-cms.widgets.base" path="/ClientResources/epi-cms.css" resourceType="Style" />
  </clientResources>
</module>

The epi-cms.css is our css file, in which we are going to add our own css classes and properties. Copy paste below css into your css file.

/*  Set property descriptions to be visible */
.Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after,
.Sleek .epi-createContent .epi-form-container__section__row > label[title]:after {
    content: attr(title);
    display: block;
    font-size: 0.8em;
    font-style: normal;
    margin: 0.3em 0 0 0;
}

This css class is for the normal edit window and when we create a block in assets pan. The second class is for, when you create a block from content area (by clicking on Create a new block).

And here we got our help text visible

Let me know if you have any question or concern.

Thanks & Regards

Praful Jangid

Happy coding :)

Oct 19, 2019

Comments

Drew Null
Drew Null Oct 21, 2019 04:57 AM

I like it šŸ˜Ž

Praful Jangid
Praful Jangid Oct 21, 2019 05:49 AM

Thanks Drew, it mean a lot for me :)

Luc Gosso (MVP)
Luc Gosso (MVP) Oct 21, 2019 08:40 AM

Great! =)

Praful Jangid
Praful Jangid Oct 21, 2019 09:29 AM

Thanks Luc. Glad you liked ;)

Joakim Megert
Joakim Megert Oct 22, 2019 08:56 AM

Very sleek! Nice work!

Praful Jangid
Praful Jangid Oct 22, 2019 10:38 AM

Thanks Joakim..

Albin Strömberg
Albin Strömberg Apr 23, 2020 08:57 AM

Very nice work!
We use this on several of our customers sites by now.

Much appreciated by editors!

Praful Jangid
Praful Jangid Apr 23, 2020 12:42 PM

Thank you Albin!

Daniel Ekeblad
Daniel Ekeblad Jan 11, 2022 03:52 PM

This is a very nice piece of CSS, but it does not work for pop-ups like when editing elements in an IList<T> so I found the following. I just picked a few css-classes to match on so it may be better choices.

.epi-dialogPaneContent .epi-form-container .epi-form-container__section__row label[title]:after {
    content: attr(title);
    display: block;
    font-size: 0.8em;
    font-style: normal;
    margin: 0.3em 0 0 0;
}

Praful Jangid
Praful Jangid Jan 11, 2022 04:46 PM

Sounds good Daniel, thanks for sharing.

Nitesh
Nitesh Jul 15, 2022 08:31 AM

Very Nice!

Really helpful!

Praful Jangid
Praful Jangid Jul 15, 2022 11:29 AM

Thanks @Nitehs, I am glad you liked it. :)

Ethan Schofer
Ethan Schofer Aug 9, 2022 02:45 PM

Optimizely 12.10 changed the markup of text fields, and this no longer works. Investigating a possible updated solution.

Praful Jangid
Praful Jangid Aug 9, 2022 03:46 PM

I verified on CMS 12.6 and it seems to be working there. But I will check in 12.10 as well. Will post my updates here

Thanks Ethan.

Ethan Schofer
Ethan Schofer Aug 9, 2022 03:49 PM

The markup change was upgrading from 12.9 to 12.10.

Praful Jangid
Praful Jangid Aug 9, 2022 03:58 PM

Well, you are correct. The UI is completely changed. I am afraid this solution will only work with version less than 12.9 in case.

Thanks again Ethan!

Please login to comment.
Latest blogs
DbLocalizationProvider v8.0 Released

Iā€™m pleased to announce that Localization Provider v8.0 is finally out.

valdis | Feb 28, 2024 | Syndicated blog

Epinova DXP deployment extension ā€“ With Octopus deploy

Example how you can use Epinova DXP deployment extension in Octopus deployment.

Ove Lartelius | Feb 28, 2024 | Syndicated blog

Identify Azure web app instance id's for an Optimizely CMS site

When running Optimizely CMS in Azure, you will be using an instance bound cloud license. What instances are counted, and how can you check them? Le...

Tomas Hensrud Gulla | Feb 27, 2024 | Syndicated blog

Introducing Image Transformer - AI Assistant for Optimizely

We've got something super cool to share with you, and it's all about giving your images a fresh spin. Image Transformer, the latest feature from ou...

Luc Gosso (MVP) | Feb 26, 2024 | Syndicated blog