- Posts: 2
- Thank you received: 0
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
Less
More
6 months 1 day 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.
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;
}
Attachments:
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12942
- Thank you received: 3979
5 months 4 weeks ago #251613
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
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
Less
More
- Posts: 2
- Thank you received: 0
5 months 4 weeks 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,
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.