Styled checkboxes
Posted: 2018-10-14 10:07
I stumbled upon https://hunzaboy.github.io/CSS-Checkbox-Library which is a css only library for styling checkboxes.
Using their css file and a couple of code-lines in footer-extras.php I've modified my AppGini checkboxes:
Default checkboxes
Styled checkboxes
Instructions
Have a nice day!
Regards,
Jan
PS: See also: https://forums.appgini.com/phpbb/viewto ... 8550#p8550
Using their css file and a couple of code-lines in footer-extras.php I've modified my AppGini checkboxes:
Default checkboxes
Styled checkboxes
Instructions
- Create a subdirectory checkboxes under resources
- Download their css-files from github:
https://github.com/hunzaboy/CSS-Checkbox-Library - Copy checkboxes.min.css into resources\checkboxes folder
- In footer-extras.php (or header-extras.php if you like) reference the css file with a link-tag like
Code: Select all
<link rel="stylesheet" href="resources/checkboxes/checkboxes.min.css">
- In footer-extras.php create a <script> to turn the original checkboxes into new ones according to their documentation here:
https://hunzaboy.github.io/CSS-Checkbox ... how-to-useCode: Select all
$j('input[type="checkbox"]').each(function() { var input = $j(this),fg = input.closest('.form-group'), right = fg.children('.col-lg-offset-3'); var container = input.closest('div.checkbox'), oldlabel = container.find('label'); input.prependTo(right); oldlabel.prependTo(fg).append(' ').addClass('control-label').addClass('col-lg-3').append(container.find('i.glyphicon')); container.find('.help-block').prependTo(right); container.remove(); var newlabel = $j('<label />').attr('value', 0).attr('for', input.attr('id')).css('font-size', '1em'); right.removeClass('col-lg-offset-3').addClass('ckbx-style-8 ckbx-large').append(newlabel); })
Have a nice day!
Regards,
Jan
PS: See also: https://forums.appgini.com/phpbb/viewto ... 8550#p8550