Making CiviCRM Bootstrap 3 Compatible

For one of my latest projects, I was setting up a Joomla site with a Bootstrap 3 theme. It was a custom theme, so I used T3 Framework. This works great until you get to non-core extensions. One of these extensions this project required was CiviCRM.

CiviCRM, while an amazing customer relations management software, is not the prettiest girl at the prom. Out of the box, the UI pretty dated looking and definitely was not suited for the custom theme we were implimenting on this site. It does, however, work on all major content managment systems: Wordpress, Joomla, and Drupal.

After a bit of searching around, I stumbled upon a 2014 Google Summer of Code project that implimented a BS3 UI onto CiviCRM.

I thought, "Great! Throw on this theme and call it a day. Project done!" Alas, that was quite what transpired. The documentation was somewhat spotty (which is the pot calling the kettle black I guess), but more importantly, the code base was a fork of an old version of the CiviCRM code base. I had a newer version and just needed the template.

I started by forking this initial project. From there, I removed all the core files from the repository. I uploaded and included the assets (css/images) to my Joomla client template. Since this template already has BS3 built in, I did not use the BS3 that came with the repo. I uploaded the CRM directory full of Smarty files to <path to civicrm>/civicrm/templates/bs3/ and added <file path to civicrm>/civicrm/templates/bs3/ the "Custom Template" settings (Administer -> System Settings -> Directories).

Next I disabled built in CiviCRM styles (Administer -> System Settings -> Resource URLs -> "Disable CiviCRM css" to yes). Since this seemed to affect both the admin and client side and Joomla's default admin template used Bootstrap 2, I wanted to keep the admin CiviCRM styles. I did this by adding the stylesheet directly to my Joomla administrator template.

Finally, I starting going through the client side smarty templates and customizing them to my liking. I had some issues with certain layouts and classes (clashing with BS3 classs). I did not, nor do I have any intention to work on the admin templates.

See the GitHub repo for source files and bee looking out for the helper component and module we created for integrating Joomla with CiviCRM. These use the api to give much more flexibility interfacting with the CRM.

Tags: theme, responsive, joomla, civicrm, crm, customer relations, template

Contact Us To Setup A Meeting

Feel free to call or email anytime to setup a meeting. We would love to discuss your project to see if we can help!

contact us