Joomla! template prerequisites for easySDI

You can customize your EasySDI client with Joomla! templates (have a look at http://easysdi.org/en/references)
but your template needs to match the next prerequisites:

  • Use the Joomla! JUI version of Bootstrap, because EasySDI makes use of base classes, and included icon pack.
  • Use a template that supports radio buttons as button groups. Most templates have this script integrated (and Protostar does).
    If your template doesn't, add the following script:
    /**
     * 
     * radios from Templates.protostar
     */
    $('*[rel=tooltip]').tooltip()

    // Turn radios into btn-group
    $('.radio.btn-group label').addClass('btn');
    $(".btn-group label:not(.active)").click(function ()
    {
        var label = $(this);
        var input = $('#' + label.attr('for'));

        if (!input.prop('checked')) {
            label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
            if (input.val() == '') {
                label.addClass('active btn-primary');
            } else if (input.val() == 0) {
                label.addClass('active btn-danger');
            } else {
                label.addClass('active btn-success');
            }
            input.prop('checked', true);
        }
    });
    $(".btn-group input[checked=checked]").each(function ()
    {
        if ($(this).val() == '') {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
        } else if ($(this).val() == 0) {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
        } else {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
        }
    });

This will allow radio buttons to be rendered like this:

  • Add some overrides for good presentation:
    • for toolbars (less syntax):
      .btn-toolbar {
          .btn-wrapper {
              display: inline-block;
              margin: 0 0 5px 5px;
          }
      }