Access EPA_Taskbox
Service Studio Version
10.0.1110.0

Hello,

I needed to change some CSS on the taskbox (EPA_TASKBOX), is it possible to change using the other eSpaces stylesheets, access the eSpace in some way, or is this change can only be done with a custom taskbox?

mvp_badge
MVP
Solution

Hi Francisco,


I didn't know that, thanks for bringing that up.

I can imagine you can get the elements inside the iframe (you can see here) and override its style via Javascript, but it's far from an elegant solution.


In that regard, EPA_Taskbox is a black box that one cannot change.

An alternative is creating your own taskbox or, even better, use an existing forge component as an accelerator for that. The Taskbox Plus, for instance, sounds promising and you should be able to have a head start and customize it accordingly to your needs.


Kind Regards,
João

mvp_badge
MVP

Hi Francisco,


You can override your CSS, creating CSS as specific or more specific that overrides the one defined by default and placing it in your theme.

You can use Chrome Developer tools, by right clicking the page and selecting the option Inspect (or F12 as shortcut) and select the tab Elements to see the HTML of the page. You can then search for the elements of the EPA_Taskbox, to understand which class and CSS are being applied:

 

For example, if you want to change that color and font-size that comes by default, you can insert on your theme the following CSS (for example):


.EPATaskbox_ExpandedText {
color: red;
font-size: 20px;
}


This will override the default CSS inherited from the Inbox.css file.


Hope it helps.

Kind Regards,
João

Hi João,

Ty for your answer.

I thought about that and that is how i replaced some CSS in other areas, but since the taskbox is inside an iFrame and that iFrame is a specific HTML page, can the "main" CSS theme overide inside the iframe?

I updated the CSS I have on the main page, and the stylesheet is getting loaded (as you can see in the <head> -> 

<link href="Theme.Theme1.css?62995" type="text/css" rel="stylesheet">

But that same stylesheet is not loaded into the iframe HTML that contains the taskbox.



Best regards,

Francisco

mvp_badge
MVP
Solution

Hi Francisco,


I didn't know that, thanks for bringing that up.

I can imagine you can get the elements inside the iframe (you can see here) and override its style via Javascript, but it's far from an elegant solution.


In that regard, EPA_Taskbox is a black box that one cannot change.

An alternative is creating your own taskbox or, even better, use an existing forge component as an accelerator for that. The Taskbox Plus, for instance, sounds promising and you should be able to have a head start and customize it accordingly to your needs.


Kind Regards,
João

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.