Back to limesurvey.org

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)

More
2 years 3 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;
}
 

Please Log in to join the conversation.

More
2 years 3 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.

More
2 years 3 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.

More
3 weeks 3 days 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.

More
3 weeks 3 days 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.

More
3 weeks 2 days 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 curor moved off button:
 

Not sure how I catch that state with css.
 

Please Log in to join the conversation.

More
3 weeks 2 days ago - 3 weeks 2 days 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
 
hover
 
active and hovered
 
active not hovered
 

Joffm
And why didn't you start in the German part to avoid any language gap?
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 weeks 2 days ago by Joffm.

Please Log in to join the conversation.

More
3 weeks 1 day ago #273519 by BBSR-SR5
Replied by BBSR-SR5 on topic Fruity: Selected button color reverts to standard one (apart from the border)
Because google dropped me here :)

I've been bothering an AI with the info I'm dealing with bootstrap buttons and it ended up coming up with the following (working) solution:
Code:
/* Normal and mouse over */
 
.btn-primary:hover {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: #4883a3 !important;
  box-shadow: 0 0 0 0.25rem #bfd3e3;
} 
 
 
/* Active and move the mouse over it */
 
.btn-primary.active:hover {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: #4883a3 !important;
  /*box-shadow: .16rem .16rem 0.02rem 0.15rem #bfd3e3 !important;*/
} 
 
/* Active, but mouse is *outside* the button */
.btn-primary:active:not(:hover) {
  background-color: #4883a3;
  color: #FFF ;
  border-color: #4883a3;
}
 
/* Release click while outside button */
.btn-primary:not(:hover):not(:active) {
  background-color: #4883a3; /* Revert to original background */
  color: #ffffff;           /* Revert to original text color */
  border-color: #4883a3 ;     /* Revert to original border color */
}

I'm pretty sure it's not meant to be done like this because it's not done like this in the .css for the variant templates (like blueberry). But I failed to find the actual css that is changing the button coloration there.

I tried to change the box shadow for on-click to a color corresponding to our CI, but I failed to reproduce the shadow from the original fruity 23.

Please Log in to join the conversation.

More
3 weeks 1 day ago - 3 weeks 1 day ago #273521 by Joffm
Replied by Joffm on topic Fruity: Selected button color reverts to standard one (apart from the border)
Hi,
Okay, I get this with just this (the active border-color set to "red" to better show the effect)
Without hallucinating AI.
Code:
  .btn-primary {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: #4883a3 !important;
}
 
.btn-primary:hover {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: #4883a3 !important;
  box-shadow: 0 0 0 0.25rem #bfd3e3;
}
 
.btn-primary:active {
  background-color: #4883a3 !important;
  color: #FFF !important;
  border-color: red !important;
  box-shadow: 0 0 0 0.25rem red !important;
}


 
What else do you want?

And "blueberry" is a special case. I remember you had several questions about it a while ago.
A problem could be that in the first releases of 6.x. "blueberry.css" was loaded after "custom.css".
Therefore, declarations were overwritten. But you can add the extras directly in "blueberry.css". (as I did to create the gif)
Just ignore the "Do not touch!"

Joffm

Because google dropped me here

Really? You have more than 50 posts in the German part, and you have to use Google to find the forum?
[img


 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 weeks 1 day ago by Joffm.
The following user(s) said Thank You: BBSR-SR5

Please Log in to join the conversation.

More
1 week 2 days ago #273649 by BBSR-SR5
Replied by BBSR-SR5 on topic Fruity: Selected button color reverts to standard one (apart from the border)
Thank you :)

I think I got it to work the way I need it to. Actually I wanted to get away from just adjusting blueberry, because it turned out that is unmaintainable whenever the base templates are adjusted for bug fixing. So I'm trying to just put all the features I need in the custom .css instead of running a search replace on the blueberry colors.

I do know where the LimeSurvey forum is, but I usually try googling for solutions first before bothering people on the forums. That's how I ended up here :D

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source