How to change color of Request Response dialog box

Awesome! That worked perfectly! I could not have fixed this without your help (I tried everything). Thank you so much 😀

Hi @Tom_1842 

Thank you so much for this answer. It was super helpful for me as well. 

I was wondering if there’s a way to get rid of the warning triangle icon in the message?

In general I’m looking to either replace it with something more friendly or remove it at all. Maybe change it to listening icon like the one here

THANKS!!

@deveer One way to change the symbol that displays next to the Request Response message for Classic layout is to add the below CSS to the Style section of the Look & Feel, updating the URL as needed:

.JFEScope .PageErrorDialog .ErrorIcon.Warning {
    background: url(https://uploads-us-west-2.insided.com/qualtrics-us/attachment/eb57b3e8-f510-40eb-aff7-7c8d6374853b.png) no-repeat !important;
background-size: 100% 100% !important;
}

The CSS code didn’t work for me. Do I need to change something? 

Thank you @Tom_1842  for your kind response… I’m actually going to leave here the CSS code that I’m using now so if it helps someone I’m happy:

By Copy Pasting this code to the Java Script of a question you’ll get the option of request a response dialog that is customized and with translations (taking into consideration surveys with more than one language). 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    jQuery("#NextButton").click(function() { 

if("${e://Field/Q_Language}" == "VI") {

setTimeout(function() {
jQuery("#ErrorMessage > span").html("Chúng tôi hiểu rằng bạn đã dành công sức để chia sẻ ý kiến! Vậy nên, Đội ngũ Trải Nghiệm Checkout của chúng tôi sẽ đọc ý kiến một cách cẩn thận. Chúng tôi rất mong đợi đọc ý kiến chi tiết từ bạn."); 
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(1)").html("Câu hỏi tiếp theo");
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(2)").html("Tôi sẽ để lại ý kiến của mình"); 
}, 5);  

};

if("${e://Field/Q_Language}" == "EN" ) {

setTimeout(function() {
jQuery("#ErrorMessage > span").html("We know writing feedback requires effort. The Checkout Experience Team reads every comment. We’re looking forward to reading your detailed one too."); 
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(1)").html("Next question");
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(2)").html("Sure, I'll provide feedback"); 
}, 5);  

};

if("${e://Field/Q_Language}" == "ZH-S") {

setTimeout(function() {
jQuery("#ErrorMessage > span").html("我们了解填写意见回馈耗时费力。 Checkout Experience 团队将仔细阅读每一则评论，我们也期待阅读您详细的评论。"); 
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(1)").html("下一个问题");
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(2)").html("当然，我会提供反馈"); 
}, 5);  

};
        
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

Also, I’m putting here the colors CSS + as bonus changing the look and feel of an NPS questions so the buttons are square and not small rounds.+ Changing the icon and color of force response and validation error. 

.Skin .ValidationError::before {
  content: "\00a0"; /* Adding one non-breaking space for minimal space */
  display: inline-block;
}

.Skin .ValidationError {
  background: url(https://payoneer.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_SvLMHSzh2ze23Hy) no-repeat left top !important;
font-size: 16px; /* Adjust the font size as needed */
}

.Skin .ValidationError {color: #da54d8 !important
}

#SurveyEngineBody .Skin .MC .MAHR table.ChoiceStructure td,#SurveyEngineBody .Skin .MC .SAHR table.ChoiceStructure td,#SurveyEngineBody .Skin .NPS table.ChoiceStructure td {
    text-align: center
}
#SurveyEngineBody .Skin .LabelWrapper {
    width: 100%;
}
#SurveyEngineBody .Skin .MC .QuestionBody label {
    vertical-align: 1px;
}

#SurveyEngineBody .Skin label.MultipleAnswer, #SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer {
    cursor: pointer;
    background: #f1f1f1!important;
    background: rgba(0,0,0,.06)!important;
    border: none;
    transition: background .2s ease-in-out;
    display: block;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
span.LabelWrapper label>span {
    display: inline-block;
}#SurveyEngineBody .Skin .MC label.q-checkbox, #SurveyEngineBody .Skin .MC table.ChoiceStructure label.q-radio {
    display: none;
}
#SurveyEngineBody .Skin .MC .QuestionBody table.ChoiceStructure label {
    vertical-align: 1px;
}
#SurveyEngineBody .Skin label.q-radio {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
#SurveyEngineBody .Skin label.q-checkbox, #SurveyEngineBody .Skin table.ChoiceStructure label.q-radio {
    border: 2px solid #111;
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    background: 0 0;
}

#SurveyEngineBody .Skin label.MultipleAnswer.q-checked, #SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer.q-checked {
    background: #0092f4!important;
    border-color: #000;
    color: #fff;
}
#SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody {
    color: #000;
    font-size: 16px;
    overflow-y: hidden;
    padding: 0 20px 20px 20px!important;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px){
#SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody {
    padding: 0 10px 10px 10px!important;
}
}

.JFEScope .PageErrorDialog {
background-color: #ffffff !important;
color: #ffffff !important;
}

.JFEScope .PageErrorDialog .ErrorContainer {
color: #000000 !important;
}

.JFEScope .PageErrorDialog .ErrorTitle {
background: inherit !important;
background-color: #caeaff !important;
color: #000000 !important;
}

.JFEScope .PageErrorDialog .ErrorButtons button {
background: inherit !important;
background-color: #caeaff !important;
color: #000000 !important;
font-size:13.5px;
}

.JFEScope .PageErrorDialog .ErrorButtons button:hover {
background: inherit !important;
background-color: #edfcf5 !important;
color: #000000 !important;
font-size:13.5px;
}

input[type="text"], textarea{

font-size: 22px!important;

}
 

Here how all looks like

When hovering

Error: