Agree?
If yes, then this post is for you. Try Adding below code to a text area and then have a look at notifications again-
<style id="AlienBox">
.sf-modal-dialog-content textarea {
color: azure;
background-color: brown;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-modal-dialog-footer {
font-size: 14.5px;
background-color: #1e264e;
color: #BDBFC3;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-modal-dialog-header {
background-color: #134373;
}
.sfc-default-theme.sf-element-modal-dialog {
background-color: #772323;
}
.sf-element-modal-dialog .sf-element-modal-dialog-header-title-text {
font-size: x-large;
color: blanchedalmond;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-modal-dialog-header .sf-element-modal-dialog-header-close {
color: #ffffff;
font-size: xx-large;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-button.sfpc-secondary {
background-image: linear-gradient(to bottom, #7b3939, #206bb7);
border-top-color: #234996;
border-right-color: #4d6ba7;
border-bottom-color: #AFB2B7;
border-left-color: #586d96;
border-bottom-color: #546580;
color: #ffffff;
font-size: large;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-button {
background-image: linear-gradient(to bottom, #7b3939, #206bb7);
border-top-color: #234996;
border-right-color: #4d6ba7;
border-bottom-color: #AFB2B7;
border-left-color: #586d96;
border-bottom-color: #546580;
color: #ffffff;
font-size: large;
}
</style>
For HTML Sanitization, I have a JavaScript code too -
if(!$('#AlienBox').length){
$('body').append($(`<style id="AlienBox">
.sf-modal-dialog-content textarea {
color: azure;
background-color: brown;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-modal-dialog-footer {
font-size: 14.5px;
background-color: #1e264e;
color: #BDBFC3;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-modal-dialog-header {
background-color: #134373;
}
.sfc-default-theme.sf-element-modal-dialog {
background-color: #772323;
}
.sf-element-modal-dialog .sf-element-modal-dialog-header-title-text {
font-size: x-large;
color: blanchedalmond;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-modal-dialog-header .sf-element-modal-dialog-header-close {
color: #ffffff;
font-size: xx-large;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-button.sfpc-secondary {
background-image: linear-gradient(to bottom, #7b3939, #206bb7);
border-top-color: #234996;
border-right-color: #4d6ba7;
border-bottom-color: #AFB2B7;
border-left-color: #586d96;
border-bottom-color: #546580;
color: #ffffff;
font-size: large;
}
.sfc-default-theme.sf-element-modal-dialog .sf-element-button {
background-image: linear-gradient(to bottom, #7b3939, #206bb7);
border-top-color: #234996;
border-right-color: #4d6ba7;
border-bottom-color: #AFB2B7;
border-left-color: #586d96;
border-bottom-color: #546580;
color: #ffffff;
font-size: large;
}
</style>`, {
id: 'AlienBox'
}));
}
This is what I got with my code -
