Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Changing colour of bootstrap answer buttons?

  • phoebus
  • phoebus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 1 month ago - 3 years 1 month ago #211983 by phoebus
Hi, how do I change the colour of boostrap answer buttons? I've searched the forums but the answers don't work and I can't find the options in my CSS (I'm using Vanilla that I've extended to allow modification).

https://forums.limesurvey.org/forum/attachment/24110?download=1

As you can see, 'Female' is selected but its colour is not that much different from the unselected ones. 

I'm on Version 4.4.1+210201 which I know isn't the most stable recent version but hoping that will help. May explain why some solutions don't work, eg I don't see Options as suggested in this answer .

Edit: image appears in preview but not when saved. Why?
Attachments:
Last edit: 3 years 1 month ago by phoebus.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 1 month ago #211984 by Joffm
Hi,
did you read and try this?
[url] forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity [/url]

It is from the Duch forum, but you should be able to translate the few words.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: phoebus
The topic has been locked.
  • phoebus
  • phoebus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 1 month ago - 3 years 1 month ago #211991 by phoebus
Replied by phoebus on topic Changing colour of bootstrap answer buttons?
Thank you. No I'd not thought to search Dutch forums (!). For those looking here is the solution, added to Custom.css. Obviously change the colours to whatever works best.


Code:
/* Normal */
 
.btn-primary  { 
  border-color :  #3d1100;
  color :  #3d1100; 
  background-color :  #702000; 
}
 
/* Active */
 
.btn-primary .active ,  .btn-primary : active { 
  background-color :  #3d1100; 
  color :  #3d1100; 
  border-color :  #3d1100; 
}
 
/* Normal and mouse over */
 
.btn-primary : hover { 
  background-color :  #3d1100; 
  color :  #3d1100; 
  border-color :  #3d1100; 
}
 
/* Active and move the mouse over it */
 
.btn-primary .active : hover { 
  background-color :  #3d1100; 
  color :  #3d1100; 
  border-color :  #3d1100; 
}
Last edit: 3 years 1 month ago by phoebus.
The topic has been locked.
  • phoebus
  • phoebus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 1 month ago - 3 years 1 month ago #211992 by phoebus
Replied by phoebus on topic Changing colour of bootstrap answer buttons?
And to add that if you want to check the accessibility of the colours for the text ('color') and background ('background-color') I suggest using snook.ca/technical/colour_contrast/colour.html
Last edit: 3 years 1 month ago by DenisChenu. Reason: Remove direct link
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 1 month ago #211995 by DenisChenu
Replied by DenisChenu on topic Changing colour of bootstrap answer buttons?
You have webaim.org/resources/contrastchecker/ too.

And if needed a A11Y solution : check extensions.sondages.pro/themes-and-templ...a11y-and-usuability/

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
More
1 year 9 months ago - 1 year 9 months ago #229536 by MSouad
Thanks for the solution.

It didn't work at first because of how CSS applies the styling, had to be more specific to get a higher priority.
It worked by changing the .btn-primary by .fruity div.btn-primary


Another way of making it work is by adding an !important modifier, just like specified in the Dutch forum :
forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity
Last edit: 1 year 9 months ago by MSouad.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose