How to customize session timeout modal popup in Service Portal without impacting other modals?

[riyashukla6]

Hi Community,

I'm trying to customize the session timeout modal in Service Portal. The goal is to adjust its size and overall look and feel(padding , fonts, colors etc.)

While working on this, I have couple of concerns:

1. I cannot edit HTML directly, so I cannot add or change class names on the modal.

2.If I apply CSS to standard modal classes(like .modal-content or .modal-footer), it impacts all modals across the portal not just the session timeout popup.

My questions are:

1. From where exactly does this session timeout modal originate? Is it tied to some widget or something else?

2. Is there a recommended way to scope CSS so that changes apply only to the session timeout modal without affecting other modals?

I would really appreciate any guidance or best practice on handling this scenario.

Thanks in advance!

[Ravi Gaurav]

Hi @riyashukla6 

You’re correct — if you target .modal-content or .modal-footer, you’ll hit all modals in Service Portal, which is not what you want.

• The timeout modal has unique attributes you can target.

• Example: It usually contains an element with ng-controller="spSessionTimeout".

div[ng-controller="spSessionTimeout"] .modal-content { background-color: #f9f9f9; padding: 20px; font-family: "Open Sans", sans-serif; border-radius: 8px; }