Quick Tip: Skinning Customer Portal Modal Dialogs

When skinning Customer Portal it is easy to forget the YUI-based modal dialogs unless one happens to pop up during your working session. Most commonly it is the Form Expiration dialog which reminds me that I have additional work to ensure a unified brand experience. This dialog will appear after 5 minutes, which is a long time to wait when testing CSS changes.

This quick tip shows how to manually initiate a modal dialog using your browser's JavaScript console. With this technique you can make quick updates to CSS styles and not have to rely on framework events (such as the 5 minute form timeout) to see your changes.

Enter and Run the following JavaScript snippet in your browser's console.


RightNow.UI.Dialog.messageDialog(
  RightNow.Interface.getMessage("FORM_EXP_PLS_CONFIRM_WISH_CONTINUE_MSG"),
  {icon: "WARN"}
);
    

For the 'icon' option key, you can substitute the following values to simulate different types of modal prompts:

  • HELP
  • WARN
  • TIP
  • ALARM
  • BLOCK
  • null

Comments

hi Andy,

Is there any config verb (either hidden or public) to change this 5 mins value ?

Kind Regards,
Vignesh Kasargod

Form expiration can be adjusted upwards, but it can't be set below 5 minutes.

From the FormSubmit widget's controller file:
'formExpiration' => 1000 * (min(60 * \RightNow\Utils\Config::getConfig(SUBMIT_TOKEN_EXP), $idleLength) - 300)

If you customize the FormSubmit widget, you might be able to change this behavior.

thanks Andy

Which files and css elements apply to this modal dialog?

Thank you

I'd suggest getting familiar with the Chrome "Inspect" tool. If you use it while in CP Dev Mode, it will tell you what SCSS files are used for these core item styles.

In this case, most of the specific styles are in the _dialogs.scss file (found in the themes folder). Note: you'll have to set-up your IDE/environment to recompile the dynamic CSS.

You can also just define your own overriding styles in any other CSS file included in your theme or on your page. Again, use the Chrome Inspect functionality to see the resulting HTML and applied classes.

See Image:

Zircon - This is a contributing Drupal Theme
Design by WeebPal.