Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Version 6.3.0
Own server or LimeSurvey hosting: LS hosting
Survey theme/template: Fruity
==================

Hello,

I read this solution on the forum: [url] forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity [/url]

However, I would like the bootstrap button to stay in the yellow colour after it is selected. How can I achieve that result ? I added the syntax below in the Configuration -> Advanced -> Theme -> Theme Editor -> custom.css file

The attachment includes the results I get.

/******************
    User custom CSS
   

---

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Change bootstrap buttons */
/* Normal */
 
.btn-primary  {
  border-color: rgb(12,123,220) !important;
  color: black !important ;
  background-color: white !important;
  font-weight: bold !important;
}
 
/* Active */
 
.btn-primary.active, .btn-primary:active {
  background-color: rgb(255,194,10) !important;
  color: #FFC20A !important;
  border-color: rgb(255,194,10) !important;
}
 
/* Normal and mouse over */
 
.btn-primary:hover {
  background-color: rgb(255,194,10) !important;
  color: #FFF !important;
  border-color: rgb(255,194,10) !important;
}
 
/* Active and move the mouse over it */
 
.btn-primary.active:hover {
  background-color: rgb(255,194,10) !important;
  color: #FFF !important;
  border-color: rgb(255,194,10) !important;
}
 

Hi,
always investigate with the webdevelopment toll of your browser.
Here you see that the class of the active item is a bit different now.

So, if I use
I get  (second item selected, fourth item hovered)
 

Was it a typo in your code that color and background-color if an active item are the same?

Joffm

​​​​​​​

Hello Joffm,

Thank you very much for your help. Just in case someone wanted to use it, here is the syntax (below) that works for a plan hosted on www.limesurvey.org .

I pasted the syntax in a copy of the Fruity theme, Theme editor, custom.css

I am also trying to modify the pale green colour of the border / emphasis that appears when the button is clicked. What is the syntax used to modify this color ?

Regards, 

/******************
User custom CSS

---

In this file you can add your own custom CSS
It will be loaded last, so you can override any other property.
Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Change bootstrap buttons */

/* Normal */

.fruity .btn-primary {
border-color: rgb(12,123,220) !important;
color: black !important ;
background-color: white !important;
font-weight: bold !important;
}

/* Active */

.fruity .btn-check:active+.btn-primary, .fruity .btn-check:checked+.btn-primary {
background-color: rgb(255,194,10) !important;
color: rgb(12, 123, 220) !important;
border-color: rgb(255,194,10) !important;
}


/* Normal and mouse over */

.fruity .btn-primary:hover {
background-color: rgb(255,194,10) !important;
color: #FFF !important;
border-color: rgb(255,194,10) !important;
}

/* Active and move the mouse over it */

.fruity .btn-primary.active:hover {
background-color: rgb(255,194,10) !important;
color: #FFF !important;
border-color: rgb(255,194,10) !important;
}