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

Scott Reed
Mar 14, 2023
  1855
(3 votes)

Restoring Help Text For Description in Latest Optimizely CMS

It's been a well known CSS hack for a while to force the showing of the description text for a property in to the editor view rather than a hover as per these articles

https://buildoptimizely.com/episerver/optimizely-cms-12-help-text-and-expanded-input-text-boxes/ 

https://talk.alfnilsson.se/2014/12/18/display-help-text-in-on-page-editing/ 

However in a recent version of CMS this broke due to updated UI around the all properties view.

With the following replacement CSS this will restore a similar features

div.dijitTabPaneWrapper div:has(div.oui-pop--over) {
    display: block !important;
}


div.dijitTabPaneWrapper div.click-area {
    display: none !important;
}

div.dijitTabPaneWrapper div.oui-pop--over {
    border: none !important;
    max-width: 600px;
    font-style: italic;
    color: red;
}

With this applied you'll get an interface that looks like this

This is working in Chrome and Edge and will restore the inline text and remove the popup icon, only for the main properties area.

I've highlighted it red but feel free to modify.

As per the previous guides this needs to be placed in a CSS file such as this editmode.css

And then registered in a module.config in the application root (not wwwroot) such as

<?xml version="1.0" encoding="utf-8" ?>
<module>
	<clientResources>
		<add name="epi-cms.widgets.base" path="Styles/editmode.css" resourceType="Style"/>
	</clientResources>
</module>
Mar 14, 2023

Comments

Mike Malloy
Mike Malloy Sep 15, 2023 06:27 PM

Did this break again? I saw it working on EPiServer.CMS 12.20.0, upgraded to 12.22.6 and now the icon is hidden but the Description doesn't display.

Bartosz Sekula
Bartosz Sekula Oct 12, 2023 10:50 AM

Mike, can you please share a screenshot? I can see help icons next to each property:

Bartosz Sekula
Bartosz Sekula Oct 12, 2023 10:53 AM

OK, sorry, I did not read the post clear enough. Why the icon does not work for you and you need the help text to be visible?

Mike Malloy
Mike Malloy Oct 12, 2023 12:11 PM

Correct. I would like to hide the icon and always show the Description.

Eric Petersson
Eric Petersson Oct 23, 2023 02:21 PM

I stumbled upon a breaking change when upgrading from Optimizely CMS 12.12 to 12.23 with my previous registered custom dojo scripts and styles.

Simply moved the containing folder from WebProjectFolder.Name/ClientResources to wwwroot/ClientResources

And my module.config looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<module>
	<clientResources>
		<add name="epi-cms.widgets.base" path="Styles/editmode.css" resourceType="Style"/>
	</clientResources>
	<dojo>
		<!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
		<paths>
			<add name="alloy" path="Scripts" />
		</paths>
	</dojo>
</module>

Please login to comment.
Latest blogs
Video Guides: Image Generation Features in Optimizely

The AI Assistant for Optimizely now integrates seamlessly with Recraft AI, providing advanced image generation capabilities directly within your...

Luc Gosso (MVP) | Dec 1, 2024 | Syndicated blog

DAM integration new major version, performance improvements and Library Picker folder selection

As you might already have seen we have decided to delist the EPiServer.CMS.WelcomeIntegration version 1.4.0 where we introduced Graph support....

Robert Svallin | Nov 29, 2024

Adding Geolocation Personalisation to Optimizely CMS with Cloudflare

Enhance your Optimizely CMS personalisation by integrating Cloudflare's geolocation headers. Learn how my Cloudflare Geo-location Criteria package...

Andy Blyth | Nov 26, 2024 | Syndicated blog

Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog