CSS Help Portal v8.2+ @mention

Brian_Wiest

Attempting to update the custom.css to modify the @mention options as the grey is a little too muted for my community to really know they have someone selected. 
Found the original css (Content\Styles\cireson.mentions-in-keditor.min.css)
Took the class and attempted to update to. 

.atwho-inserted {

    background: #FFFF00 !important;

    color: #000

}

When saved the portal would not pick up the change also attempted to update the original css file directly, also no change.
Also attempted to iisreset to see if the @ function got loaded into memory.
What am I missing?
Thanks 

john_doyle

Hi @Brian_Wiest 
The reason it does not work is because content inside the Action Log Comment box has now been embedded as an iframe on the page and it loads a separate style sheet. Your only option in the CustomSpace would be to inject the style into the iframe using javascript.

});
app.custom.formTasks.add('Incident', null, function(formObj, viewModel) {<br>&nbsp;&nbsp;&nbsp; formObj.boundReady(function() {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $("iframe").contents().find("head").append('<style>.atwho-inserted {background: #FFFF00;color: #000;}</style>');<br>&nbsp;&nbsp;&nbsp; });

Brian_Wiest

Oh boo on you security (they disabled users from clearing their local cache) 
Clearing the cache now loads the new code when updating the direct file. cireson.mentions-in-keditor.min.css. 
Any thoughts why this would not work in the custom.css?

john_doyle

Hi @Brian_Wiest 
The reason it does not work is because content inside the Action Log Comment box has now been embedded as an iframe on the page and it loads a separate style sheet. Your only option in the CustomSpace would be to inject the style into the iframe using javascript.

});
app.custom.formTasks.add('Incident', null, function(formObj, viewModel) {<br>&nbsp;&nbsp;&nbsp; formObj.boundReady(function() {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $("iframe").contents().find("head").append('<style>.atwho-inserted {background: #FFFF00;color: #000;}</style>');<br>&nbsp;&nbsp;&nbsp; });