Updates – Bootstrap for CiviCRM UI

Published
2014-07-09 11:58
Written by

As I have been working to customize CiviCRM CSS to Bootstrap CSS. In the process, to change labels like input text, dropdowns I have made changes in \civicrm\packages\HTML\QuickForm\input.php , But found that this is not the correct way to customize because if HTML-QuickForm is updated the entire changes to the code will be lost . So to overcome this problem I found another location within the CRM where this customization is done and the location is civicrm\CRM\Core\Form\Renderer.php (For initial stages, I have been testing on form and the location will change depending on the element taken). Special thanks to Emily in sorting the things out.

With this I can now customise the input-text fields, dropdowns and many more without making anychanges to the HTML_QuickForm.

Snapshot of the Update is as follows:-

In the above snapshot, the input-text fields and dropdowns are customized to bootstrap CSS.

Upcoming Goal:-

I was able to change the code in Renderer.php and able to reflect it on front-end. But many suggested that the Bootstrap CSS should be in another folder so that in long term changes to the code will be easy.  

I am writing a separate file which is bootstrap specific, it contains all the functions of the bootstrap CSS which are used in CiviCRM CSS.

Will keep you updated.

Filed under