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
  • NKC_CZ's Avatar Topic Author
  • Offline
  • New Member
  • New Member
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

 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #231211 by Joffm
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]

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

  • NKC_CZ
  • NKC_CZ's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #231233 by Joffm
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
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
  • NKC_CZ's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
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

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose