I want to make the colors of Yes and No different colors

More
3 months 1 week ago #167183 by toraco
toraco created the topic: I want to make the colors of Yes and No different colors
Hello! All!

I am using LimeSurvey version 2.65.6.

I want to make the colors of Yes and No different colors, but I do not know the method.
I searched the template editor and template js,
Please tell me a good plan.

As an example
<! - Yes -> <label class = "btn btn - primary>
<! - No -> <label class = "btn btn-default> etc ..

Thank you!

Please Log in or Create an account to join the conversation.

More
3 months 1 week ago #167185 by LouisGac
LouisGac replied the topic: I want to make the colors of Yes and No different colors
The HTML of the questions is not inside survey themes.
Since LS3, we have a Question Theming functionality:
github.com/LimeSurvey/LimeSurvey/tree/master/themes/question

In LS 2.50+, we have question view override:
manual.limesurvey.org/Theme_editor#Custo...ws_.28New_in_3.0_.29
The following user(s) said Thank You: toraco

Please Log in or Create an account to join the conversation.

More
3 months 1 week ago #167186 by Joffm
Joffm replied the topic: I want to make the colors of Yes and No different colors
Hi, toraco,

I searched the template editor and template js,


unfortunately you did not search the forum ;)

https://www.limesurvey.org/forum/installation-a-update-issues/114443-color-modification-for-a-yes-no-question

Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: LouisGac, toraco

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago #167344 by toraco
toraco replied the topic: I want to make the colors of Yes and No different colors
Hello LouisGac!
Thank you for the quick reply.

I tried setting the question display override.
However, the question display part is not displayed in the template editor.
Is the following wrong?
· Copy application / views / survey / * to template / {your_view_directory} / survey /
This part (template / {your_view_directory} / survey /) is
I interpret it as (template / {my_template} / {my_view_directory} / survey /) below.

Thank you very much.

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago #167345 by LouisGac
LouisGac replied the topic: I want to make the colors of Yes and No different colors
It's not possible to use the template editor for question templates... even in LS3. It should be available for LS4

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago #167346 by toraco
toraco replied the topic: I want to make the colors of Yes and No different colors
Hello Joffm!
Thank you for the quick reply.
It seems my search was missing. . .
I did not know that there is a way in CSS like this! I will refer to it.
However, since there are over 100 questions, I feel that it is not valid this time.

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago - 3 months 4 days ago #167347 by Joffm
Joffm replied the topic: I want to make the colors of Yes and No different colors
Hi, toraco,

If you set this in "template.css" it affects ALL "Yes/No" questions.
https://www.limesurvey.org/forum/installation-a-update-issues/114443-color-modification-for-a-yes-no-question#166647

Regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last Edit: 3 months 4 days ago by Joffm.
The following user(s) said Thank You: toraco

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago #167350 by toraco
toraco replied the topic: I want to make the colors of Yes and No different colors
I am grateful to Joffm for your kindness.
But, what I wanted to change is the meaning as follows.

When it is YES
.answer-container .btn-group .btn-primary {
    background-color: green;
}
 
.answer-container .btn-group .btn-primary: hover {
    background-color: light-green;
}
 
.answer-container .btn-group .btn-primary: active,
.answer-container .btn-group .btn-primary.active {
    background-color: dark-green! important;
}


When it is NO

.answer-container .btn-group .btn-primary {
    background-color: red;
}
 
.answer-container .btn-group .btn-primary: hover {
    background-color: light-red;
}
 
.answer-container .btn-group .btn-primary: active,
.answer-container .btn-group .btn-primary.active {
    background-color: dark-red! important;
}

Even when it is not active, you want to display YES and NO in different colors.
When it is active, I want to make each color darker.

Is this possible with CSS?

Thank you
Attachments:

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago #167351 by toraco
toraco replied the topic: I want to make the colors of Yes and No different colors
My attached image was wrong.

Attachments:

Please Log in or Create an account to join the conversation.

More
3 months 4 days ago - 3 months 4 days ago #167354 by Joffm
Joffm replied the topic: I want to make the colors of Yes and No different colors
Try this:
#label-answer{SGQ}Y.btn-primary {
  color: #ffff00;
  background-color: green;}
#label-answer{SGQ}Y.btn-primary:active, 
#label-answer{SGQ}Y.btn-primary.active {
    color: #ffffff;
    background-color: darkgreen;}
#label-answer{SGQ}Y.btn-primary:hover, 
#label-answer{SGQ}Y.btn-primary.hover {
    color: #ffffff;
    background-color: lightgreen;}
 
#label-answer{SGQ}N.btn-primary {
    color: #00ffff;
    background-color: red;}
 
#label-answer{SGQ}N.btn-primary:active, 
#label-answer{SGQ}N.btn-primary.active {
    color: #ffffff;
    background-color: darkred;}
#label-answer{SGQ}N.btn-primary:hover, 
#label-answer{SGQ}N.btn-primary.hover {
    color: #ffffff;
    background-color: salmon;}
 

The "Y" and "N" refer to the button.

default:


hover:


active:


Joffm

P.S.
Up to you to set your desired colors


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last Edit: 3 months 4 days ago by Joffm.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!