Welcome to the LimeSurvey Community Forum

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

Customising the yes/no buttons

More
7 years 7 months ago #142084 by Linoa
Customising the yes/no buttons was created by Linoa
Hi there,
I am customising a template based on the Limesurvey "Default" template, and am trying to modify the yes/no buttons.

This is what the "default" yes/no buttons look like:
[img


I have modified the css as follow to modify the buttons:
Code:
div.yes-no .btn-primary {
    background-color: #FFF;
    color: #000;
    line-height: 10px;
    border-width: 1px;
}

With the following result:


I also wanted to have a space between the 'yes' button and the 'no' button + change the button widths but haven't found how to do this yet.

Anyhow what bothers me most is what the "clicked" button looks like:
[img


We can barely see the difference with the 'unactive' button, there is only a discrete shadow on the yes button. What also happens is that the active button (only the active one) becomes dark grey when the mouse pointer enters the element, but gets white again (with the shadow) when the pointer leaves it.
I have tried to modify the btn-primary:active css which does not work.

Here is the entire 'btn-primary' code in the flat_and_modern.css file:
Code:
.btn-primary {
  color: #ffffff;
  background-color: #2c3e50;
  border-color: #2c3e50;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #ffffff;
  background-color: #1a242f;
  border-color: #000000;
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #1a242f;
  border-color: #161f29;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #1a242f;
  border-color: #161f29;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #ffffff;
  background-color: #0d1318;
  border-color: #000000;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #2c3e50;
  border-color: #2c3e50;
}
.btn-primary .badge {
  color: #2c3e50;
  background-color: #ffffff;
}

Would you have any idea what I need to change for the button to remain let's say dark grey (#2c3e50) when we have clicked on it?

Thanks very much for your help,
Linoa
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago - 7 years 6 months ago #142233 by tpartner
Replied by tpartner on topic Customising the yes/no buttons

I also wanted to have a space between the 'yes' button and the 'no' button + change the button widths but haven't found how to do this yet.

Add something like this to the end of template.css:
Code:
.btn-group-justified {
  max-width: 200px;
  border-spacing: 10px;
}
 
div.yes-no .btn-primary {
  border-radius: 4px !important;
}

We can barely see the difference with the 'unactive' button...

Add something like this to the end of template.css:
Code:
div.yes-no .btn-primary {
  background-color: #FFF;
  color: #000000;
  line-height: 10px;
  border-width: 1px;
}
 
div.yes-no .btn-primary:hover {
  background-color: #F0F0F0;
  color: #000000;
}
 
div.yes-no .btn-primary:active,
div.yes-no .btn-primary.active {
  background-color: #2C3E50;
  color: #FFFFFF;
  box-shadow: none;
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 7 years 6 months ago by tpartner.
The following user(s) said Thank You: Linoa
The topic has been locked.
More
7 years 6 months ago #142602 by Linoa
Replied by Linoa on topic Customising the yes/no buttons
Hi tpartner,
Sorry for my late answer, I did not receive the notification.
Have just seen your message and have just tried it, it works perfectly, thanks so much for your help!
Linoa
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source