November Happy Hour will be moved to Thursday December 5th.

Praful Jangid
Oct 19, 2019
  3617
(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
AsyncHelper can be considered harmful

.NET developers have been in the transition to move from synchronous APIs to asynchronous API. That was boosted a lot by await/async keyword of C#...

Quan Mai | Dec 4, 2024 | Syndicated blog

The search for dictionary key

Recently I helped to chase down a ghost (and you might be surprised to know that I, for most part, spend hours to be a ghostbuster, it could be fun...

Quan Mai | Dec 4, 2024 | Syndicated blog

Shared optimizely cart between non-optimizley front end site

E-commerce ecosystems often demand a seamless shopping experience where users can shop across multiple sites using a single cart. Sharing a cart...

PuneetGarg | Dec 3, 2024

CMS Core 12.22.0 delisted from Nuget feed

We have decided to delist version 12.22.0 of the CMS Core packages from our Nuget feed, following the discovery of a bug that affects rendering of...

Magnus Rahl | Dec 3, 2024