- Posts: 3
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Color changes | custom.css | V3.28
- NKC_CZ
- Topic Author
- Offline
- New Member
Less
More
1 year 8 months ago #231207
by NKC_CZ
Color changes | custom.css | V3.28 was created by NKC_CZ
LimeSurvey version:
Version 3.28.24
Own server or LimeSurvey hosting: Limesurvey Cloud
Survey theme/template: fruity
==================
Dear all,
I am afraid I need quite basic help with changing colors in the template to suit our project colors. If I understand well, there is no easy option, how to change default color of the basic graphic items (e.g. like theme fruit variations do in one step, but with my own chosen color). After hours of reading the manual and previous Q/As in English, Deutsh and even Dutch I was sucessfull in changing the buttons (next, previous), color of the text of questions, survey title and welcome text, color of question help text, color of the progress bar and I have uploaded logo in header. However, some items still remain challenge.
I would like to change the color of:
- buttons in radio, array, check box (basicaly all these items that shows the choice)
- text witten by respondents as an answer (long text/short text...)
- border/shadow of the active text box (when someone is typing)
- star (when Q is labeled as mandatory) - I have only found how to hide it
- the text of the instruction (appears just below the question and before response window: e.g. "! Choose one of the following answers") - I have only found how to hide it
I have tried these in the "custom.css" in the extended fruity template, however, no changes occured (neither in the preview box below neither when I try preview a test survey).
Ad buttons: this forums.limesurvey.org/forum/german-forum...r-matrix-%C3%A4ndern and this forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity do not work.
.checkbox-item {
color:#351B6F;
}
.radio-item {
color:#351B6F;
}
.array-item {
color:#351B6F;
}
.asterisk {
color: #3ce1bc;
}
.hint-text {
color: #3ce1bc;
}
.text-primary {
color: #351B6F;
}
Thank you for your time and possible help
Hana
Own server or LimeSurvey hosting: Limesurvey Cloud
Survey theme/template: fruity
==================
Dear all,
I am afraid I need quite basic help with changing colors in the template to suit our project colors. If I understand well, there is no easy option, how to change default color of the basic graphic items (e.g. like theme fruit variations do in one step, but with my own chosen color). After hours of reading the manual and previous Q/As in English, Deutsh and even Dutch I was sucessfull in changing the buttons (next, previous), color of the text of questions, survey title and welcome text, color of question help text, color of the progress bar and I have uploaded logo in header. However, some items still remain challenge.
I would like to change the color of:
- buttons in radio, array, check box (basicaly all these items that shows the choice)
- text witten by respondents as an answer (long text/short text...)
- border/shadow of the active text box (when someone is typing)
- star (when Q is labeled as mandatory) - I have only found how to hide it
- the text of the instruction (appears just below the question and before response window: e.g. "! Choose one of the following answers") - I have only found how to hide it
I have tried these in the "custom.css" in the extended fruity template, however, no changes occured (neither in the preview box below neither when I try preview a test survey).
Ad buttons: this forums.limesurvey.org/forum/german-forum...r-matrix-%C3%A4ndern and this forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity do not work.
.checkbox-item {
color:#351B6F;
}
.radio-item {
color:#351B6F;
}
.array-item {
color:#351B6F;
}
.asterisk {
color: #3ce1bc;
}
.hint-text {
color: #3ce1bc;
}
.text-primary {
color: #351B6F;
}
Thank you for your time and possible help
Hana
Please Log in to join the conversation.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
1 year 8 months ago #231211
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Color changes | custom.css | V3.28
Hi,
did you take this in account?
Meaning adding the class ".fruity"
[url] forums.limesurvey.org/forum/dutch-forum/...abloon-fruity#209996 [/url]
did you take this in account?
Meaning adding the class ".fruity"
[url] forums.limesurvey.org/forum/dutch-forum/...abloon-fruity#209996 [/url]
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- NKC_CZ
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
1 year 8 months ago #231213
by NKC_CZ
Replied by NKC_CZ on topic Color changes | custom.css | V3.28
Hello, yes, I tried it, but with no success.
Please Log in to join the conversation.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
1 year 8 months ago #231233
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Color changes | custom.css | V3.28
Well, you did not show us what you really did.
Your css is not sufficient.
Therefore the usual thing:
Investigate your page with the webdevelopment-tool (included in each modern browser (usually F12).
Here you see which classes aree affected, and you may try out the effects.
Here some examples for your questions
With only this
Now you know how you find out further things.
Joffm
Your css is not sufficient.
Therefore the usual thing:
Investigate your page with the webdevelopment-tool (included in each modern browser (usually F12).
Here you see which classes aree affected, and you may try out the effects.
Here some examples for your questions
With only this
Code:
/* color of text in text boxes */ .fruity textarea.form-control, .fruity input[type="text"] { color:red; } /* color of asterisk .asterisk .text-danger { color: green; } /* color of help text */ .fruity .text-info { color: red; } /* colors of active radio-buttons, checkboxes */ .radio-item label::before { border-color: black; } .radio-item input[type="radio"]:checked + label::before { border-color: red; } .radio-item input[type="radio"]:checked + label::after { background: red; } .checkbox-item label::before { border-color: black; } .checkbox-item input[type="checkbox"]:checked + label::before { border-color: red; } .checkbox-item input[type="checkbox"]:checked + label::after { background: red; }
Now you know how you find out further things.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- NKC_CZ
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
1 year 7 months ago #231876
by NKC_CZ
Replied by NKC_CZ on topic Color changes | custom.css | V3.28
Dear Joffm, thank you very much for your quick help and sorry for my late response.
Best regards.
Hana
Best regards.
Hana
Please Log in to join the conversation.