Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Scott Reed
Mar 14, 2023
  942
(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
Optimizely DXP - Leader in Forrester Wave Q4 2023

There are many reasons why its nominated as leader including below but not limited to: Developers friendly - devs and architect love to implement i...

Yagnik Jadav | Dec 11, 2023 | Syndicated blog

Live on Optimizely CMS 12 and .NET 8

"Better late than never" is a fitting saying here. We've finally gotten around to updating the CodeArt.dk website to Optimizely CMS 12 and .NET 8!

Allan Thraen | Dec 10, 2023 | Syndicated blog

Date property editor

The Optimizely CMS has built-in DateTime property. When editing, the Editor selects both the date and the time. Sometimes we would like to configur...

Grzegorz Wiecheć | Dec 9, 2023 | Syndicated blog

Update related content

In this article, I will show simple code that allow to replace linked content with other content selected by the Editor. When deleting content whos...

Grzegorz Wiecheć | Dec 8, 2023 | Syndicated blog

Getting Started with Optimizely SaaS Core and Next.js Integration: Content Areas and Blocks

The blog guide elaborates on improving content rendering by exploring content areas and blocks within the Optimizely CMS. It walks through setting ...

Francisco Quintanilla | Dec 8, 2023 | Syndicated blog

Maximize performance by uploading your external data to Optimizely Graph

Learn to integrate external data into Optimizely Graph for improved performance, covering data preparation, synchronization, and effective querying.

Surjit Bharath | Dec 6, 2023 | Syndicated blog