Welcome to the LimeSurvey Community Forum

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

Fruity: Selected button color reverts to standard one (apart from the border)

chantelanuit
Topic Author
Offline
New Member

More

2 years 2 months ago #251549 by chantelanuit

Fruity: Selected button color reverts to standard one (apart from the border) was created by chantelanuit

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;
}

...-bootstrap.pdf

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

2 years 2 months ago #251613 by Joffm

Replied by Joffm on topic Fruity: Selected button color reverts to standard one (apart from the border)

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

Code:

/* 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: #FFC20A !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;
}

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

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

The following user(s) said Thank You: chantelanuit

Please Log in to join the conversation.

chantelanuit
Topic Author
Offline
New Member

More

2 years 2 months ago #251615 by chantelanuit

Replied by chantelanuit on topic Fruity: Selected button color reverts to standard one (apart from the border)

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;
}

Please Log in to join the conversation.

BBSR-SR5
Offline
Senior Member

More

1 day 5 hours ago #273487 by BBSR-SR5

Replied by BBSR-SR5 on topic Fruity: Selected button color reverts to standard one (apart from the border)

Hey I think it's kinda relevant here.

I'm trying to reskin my buttons and I'm failing to change the klicked color from the default fruity23 green to something else.

My css so far:

Code:

/*Buttons*/
 
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem #4883a3;
}
 
.btn-primary {
  background-color: #4883a3;
  border-color: #4883a3;
  color: #ffffff;
  box-shadow: 0 0 0 0.25rem #4883a3;
}
 
.btn-primary:hover {
    color: #ffffff;
    background-color: #4883a3;
    border-color: #4883a3;
}
 
 
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #ffffff;
  background-color: #4883a3;
  border-color: #4883a3;
  box-shadow: 0 0 0 0.25rem rgba(68, 100.3, 216.75, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #ffffff;
  background-color: #4883a3;
  border-color: #4883a3;
}
 
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(68, 100.3, 216.75, 0.5);
}
 
.btn-primary:disabled, .btn-primary.disabled {
  color: #ffffff;
  background-color: #5076FF;
  border-color: #5076FF;
}

With this I managed to change the default color and the hover color, but when clicking it remains green. What do I need to do to also change the clicked color to our CI color?

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

1 day 4 hours ago #273490 by Joffm

Replied by Joffm on topic Fruity: Selected button color reverts to standard one (apart from the border)

Hi,
you also talk about bootstrap buttons?
I do not see an issue if you use the css from above.
As you do not use the "fruity" theme, but "fruity twentythree" you have to remove the additional class ".fruity"

Code:

.btn-primary  {
  border-color: rgb(12,123,220) !important;
  color: black !important ;
  background-color: white !important;
  font-weight: bold !important;
}
 
/* Active */
 
  .btn-check:active+.btn-primary, .btn-check:checked+.btn-primary {
  background-color: rgb(255,194,10) !important;
  color: #FFF !important;
  border-color: rgb(255,194,10) !important;
  }
 
 
/* Normal and mouse over */
 
.btn-primary:hover {
  background-color: rgb(180,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;
}

Joffm

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

The following user(s) said Thank You: BBSR-SR5

Please Log in to join the conversation.

BBSR-SR5
Offline
Senior Member

More

6 hours 18 minutes ago #273507 by BBSR-SR5

Replied by BBSR-SR5 on topic Fruity: Selected button color reverts to standard one (apart from the border)

Thank you, this works partially. It works when I click the button and the mouse hovers over it, but if I keep the mouse button clicked, but move the mouse off the button it changes back to green.

I'm now using this CSS:

Code:

/*Buttons*/
 
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem #4883a3;
}
 
.btn-primary {
  background-color: #4883a3;
  border-color: #4883a3;
  color: #ffffff;
  box-shadow: 0 0 0 0.25rem #4883a3;
}
 
.btn-primary:hover {
    color: #ffffff;
    background-color: #4883a3;
    border-color: #4883a3;
}
 
/* Active */
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: #4883a3 !important;
  }
 
 
/* Normal and mouse over */
 
.btn-primary:hover {
  background-color: #4883a3!important;
  color: #FFF !important;
  border-color: #4883a3 !important;
} 
 
 
/* Active and move the mouse over it */
 
.btn-primary.active:hover {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: #4883a3 !important;
}

Before doing anything':

When clicking button:

When clicked and mouse cursor on button.jpg

When clicked and mouse curor moved off button:

When clicked and mouse cursor away from button.jpg

Not sure how I catch that state with css.

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

4 hours 52 minutes ago - 4 hours 49 minutes ago #273508 by Joffm

Replied by Joffm on topic Fruity: Selected button color reverts to standard one (apart from the border)

So, you don't talk about "bootstrap buttons" or "multiple bootstrap buttons", but about the submit button.

Well, there's no state "btn-primary:active".
Set it and it should be fine.

start