Welcome to the LimeSurvey Community Forum

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

Increase Size of Checkbox & Radios

  • marcgold
  • marcgold's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 9 months ago - 3 years 9 months ago #202395 by marcgold
Increase Size of Checkbox & Radios was created by marcgold
I know this one has been around the houses a bit, but all the options im finding seem to be really old and for older versions of LS.

I have increased the font size of all text so make things a little easier on the eye, both on web and Mobile. The result is that the checkbox and the radio's are little out of line now. No biggee but would be nice to be perfect.

I do find the checkboxes and radios a little small and ideally would like to increase them to 17px to match the text. This is ideal, if not I would like to at least make them line up so they dont look so weird.

Is there still no way to increase the checkboxes and radio sizes in LS3 - Template is Fruity

Version 3.22.24+200630

Thanks in advance
Last edit: 3 years 9 months ago by marcgold. Reason: forgot the template variant
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 9 months ago #202396 by DenisChenu
Replied by DenisChenu on topic Increase Size of Checkbox & Radios
I think best solution is to create your own theme for this.

You can try extensions.sondages.pro/themes-and-templ...reate-your-own-theme
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 9 months ago #202400 by Joffm
Replied by Joffm on topic Increase Size of Checkbox & Radios
Hi,
maybe an option.

Theme "tfr-retro" from our dutch friends "tools for research".
github.com/toolsforresearch/TFR-retro



Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 9 months ago #202401 by DenisChenu
Replied by DenisChenu on topic Increase Size of Checkbox & Radios
I like to find a way to get theme by url or cookies ;)
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • marcgold
  • marcgold's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 9 months ago #202412 by marcgold
Replied by marcgold on topic Increase Size of Checkbox & Radios
Great Shout Joffm,

Back in the "Good old Days" of LS 2.6 I religiously used the TFR template. it was superb, great to see that they have finally have it under dev for V3. Hopefully V4 wont mess with it too much and it will stay around.

Saying that, the look and feel of Fruity is really modern so if there is way to easily adjust the checkboxes and radios this would be ideal.

Thanks
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 9 months ago #202413 by Joffm
Replied by Joffm on topic Increase Size of Checkbox & Radios
Well, in my opinion the adaption of fruity should easy.

with these thre statements
Code:
.radio-item label {
  padding-left: 20px;
  padding-top: 3px;
}
 
.radio-item label:before {
  width: 30px;
  height: 30px;
  border-color: #aaa;
  margin-right: 20px;
}
 
.radio-item label::after {
  background-color: #702000;
  width: 20px;
  height: 20px;
  left: 5px;
  top: 5px;
}

you get


So a search for checkbox in tfr-Retro will give you what you need

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • marcgold
  • marcgold's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 9 months ago #202441 by marcgold
Replied by marcgold on topic Increase Size of Checkbox & Radios
Hi Joffm

So looking at the progress of the TFR template for version 3, its not really as good as I would have hoped, now where near as nice as the original - but then this is a work in progress so here's hoping.

However, you advice lead me to the solution I was looking for. By adopting the CSS from the custom.css file in the TFR Retro I was able to achieve exactly what I was looking for within the Fruity template. Every post I read said this wasn't possible without replacing with images - but it works well.

The changes I made are as follows and I hope this helps others trying to achieve the same.

Thanks for the help :laugh:

This is based on a Question / Body Text size of 17px :
Code:
.checkbox-item label,
.checkbox-item label.ls-label-xs-visibility {
  padding-left: 30px;
  padding-top: 3px;
}
 
.checkbox-item label::before,
.checkbox-item label.ls-label-xs-visibility::before {
  width: 30px;
  height: 30px;
}
 
.checkbox-item label::after,
.checkbox-item label.ls-label-xs-visibility::after {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  padding-top: 0px;
  padding-left: 5px;
  background-color: #702000;
  color: white;
  font-size: 24px;
  line-height: 27px;
}
 
.checkbox-item .ls-label-xs-visibility {
  width: 30px;
  height: 30px;
}
 
.checkbox-list .input-sm {
  height: 32px;
  font-size: inherit;
}
 
.othertext-label-checkbox-container {
  padding-top: 0;
}
 
.radio-item .ls-label-xs-visibility {
  width: 30px;
  height: 30px;
}
 
.radio-item label {
  padding-left: 25px;
  padding-top: 3px;
}
 
.radio-item label:before {
  width: 30px;
  height: 30px;
  border-color: #aaa;
  margin-right: 20px;
}
 
.radio-item label::after {
  background-color: #702000;
  width: 20px;
  height: 20px;
  left: 5px;
  top: 5px;
}
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 9 months ago #202442 by Joffm
Replied by Joffm on topic Increase Size of Checkbox & Radios
Exactly that was the reason for me to advice tfr.

Always behave like a bee, use all sources to suck honey.

And I forgot to mention the skelvanilla theme.
gitlab.com/SondagesPro/SurveyThemes/skelvanilla
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source