Styled checkboxes

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 219
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Styled checkboxes

Post by jsetzer » 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:

2018-10-14_12-00-00.gif
2018-10-14_12-00-00.gif (21.09 KiB) Viewed 1527 times

Default checkboxes
chrome_2018-10-14_11-49-06.png
chrome_2018-10-14_11-49-06.png (9.88 KiB) Viewed 1527 times

Styled checkboxes
chrome_2018-10-14_11-50-31.png
chrome_2018-10-14_11-50-31.png (19.85 KiB) Viewed 1527 times

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-use

    Code: 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

Moh Youba
Veteran Member
Posts: 40
Joined: 2017-03-12 09:31

Re: Styled checkboxes

Post by Moh Youba » 2018-11-01 11:41

Hello

Thank you for sharing. Can this works with others checkbox fields like the one on the attached screenshot
Attachments
Screen Shot 2018-11-01 at 11.39.44 AM.png
Screen Shot 2018-11-01 at 11.39.44 AM.png (26.74 KiB) Viewed 1341 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 219
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2018-11-01 16:26

Moh Youba wrote:
2018-11-01 11:41
... Can this works with others checkbox fields like the one on the attached screenshot
Should work.

Please post your testing results to help others, thank you.

Regards,
Jan

Moh Youba
Veteran Member
Posts: 40
Joined: 2017-03-12 09:31

Re: Styled checkboxes

Post by Moh Youba » 2018-11-02 07:17

thank you. I am going to test and to you for update...

bescott53
Veteran Member
Posts: 133
Joined: 2013-02-24 00:13

Re: Styled checkboxes

Post by bescott53 » 2018-12-14 14:22

Used this today and it works perfect, went for style 15. thank you jsetzer!
Appgini 5.72

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 219
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2018-12-14 14:49

Good to hear, @bescott53, thanks for testing and posting your results.
thank you jsetzer!
You are welcome!

Best regards,
Jan

Post Reply