1.Theme 

 If you are using Custom Bootstrap theme or any other Bootstrap related theme in Drupal, skip this step.

For those who are not using Bootstrap theme follow this step- Download Bootstrap 3 Theme for Drupal. The link for download is as follows- https://www.drupal.org/project/bootstrap.The zip file should be unrar and folder should be placed in -/sites/all/themes.In the front end set this theme as Default theme.

If you are using other CMS like Word Press, No Need to download any themes for getting Bootstrap. The default theme will also work.

 

 2.CSS Files

CSS file for Bootstrap CSS is located at css/civicrm.bootstrap.css . Custom CSS used is located at css/custom.bootstrap.css. once Bootstrap theme is used, both the civicrm.bootstrap.css and custom.bootstrap.css will be loaded one after another. The settings for loading bootstrap CSS is at CRM/Core/Resources.php

3.Documentation For Profile Pages:

 

1. Profile-Name And Address get’s its source code from

    templates/CRM/Profile/Form/Main.tpl which is again redirected to  templates/CRM/Profile/Form/Dynamic.tpl

 

2. In Bootstrap everything will be contained with in row. so for that on first step  add  ‘row’ to the class.

 

 

 

<div id="crm-profile-block" class="row crm-container-snippet crm-public"> on line 44

 

3.The labels of Profile has to be scaled. In Bootstrap a row can accommodate only 12 items. So for each label give 3 and rest for input-text field.

 

<div class="form-group col-sm-3 control-label label">    on line 142
              {$form.$n.label}
            </div>


4. All labels of Profiles are scaled. 3 were already used for labels, left with 9.Entire 9 becomes too big for input fields reduce it to 6 and necessary items should be added to maintain the input fields scaled.

 <div class="form-group col-sm-6 col-sm-offset-3 col-sm-pull-3 edit-value content"> on line 146

 

 Theses will make the page scaled into bootstrap, with these changes in Dynamic.tpl the labels and background of Name and Address page were changed to Bootstrap. Few changes have to be done to labels and dropdowns to get them bootstraped.

 


5. Customizing input-text field and drop-downs,add few functions to /CRM/Core/Form/Renderer.php

$el['label'] = '<label class="col-sm-10 control-label" for="' . $id . '">' . $el['label'] . '</label>'; on line 113 .  This will align all the labels.

For input- text fields and dropdown to change into Bootstrap, two functions have be added.            

          

 if ($type == 'text') {
           $class = 'form-' . $type . ' ' . 'form-control';
             }
            if ($type == 'select') {
           $class = 'form-' . $type . ' ' . 'form-control';
             }

Adding these functions, the Profiles will be changed into Bootstrap CSS.


6. Buttons, there are mainly two types of buttons in Profile Pages.Save  and Cancel.

The save button will have Green color and Cancel button will have Red color.The buttons get their bas code from-  /CRM/Core/Form.php

 

 

 

if ($isDefault) {
        $attrs = array('class' => 'btn btn-success form-submit default');
      }  on line 474
      if ($button['type'] === 'cancel') {
        $attrs['class'] = 'crm-form-submit form-submit btn btn-danger cancel';
      } on line 484

  Adding the following code, buttons will chang into respective colors.


7. The main changes to Profile pages are done, Scaling of print icon,which was on leftmost was moved to rightmost so that the page look much better.

The base code for that comes from -/templates/CRM/common/drupal.tpl

The following changes should be made to the code.

<div class="col-sm-offset-12 ui-icon ui-icon-print"></div> on line 42
<div class="col-sm-offset-12 ui-icon ui-icon-print"></div> on line 49

col-sm-offset-12 is used to give a space of 12 before the element, which mean the print element was moved from left end to right end..

 

4.Documentation Of Contribution Page:

 

1. First label of contribution page is ‘Contribution Amount’ .The base code for ‘Contribution  Amount’ block comes from -/templates/CRM/Price/Form/PriceSet.tpl.On initial note, ‘row’ should be  again added as all the elements in bootstrap are withheld in rows.

     

<div class="row"> on line 42 and corresponding closing div </div> on line 64


2. To scale  ‘Contribution Amount’ in to bootstrap,  the base code comes from -/templates/CRM/Price/Form/PriceSet.tpl. Following lines of code should be  added to scale the ‘Contribution Amount’

 

<div class="form-group label col-sm-2">{$form.$element_name.label}</div>    
<div class="content {$element.name}-content col-sm-6 col-sm-offset-4 col-sm-pull-2"> on line 42. 

 

3. Now the scaling of ‘Contribution Amount’ is done the Pledge block should to be scaled which consist of radio buttons and drop downs. The source code comes from /templates/CRM/Price/Form/PriceSet.tpl.

Additional code should be added to scale all, i.e radio buttons, dropdowns and input-text fields.

 

<div class="form-group label col-sm-2">{$form.$element_name.label}</div>
 <div class="content {$element.name}-content col-sm-6 col-sm-offset-4 col-sm-pull-2"> on line 71.

with this changes the price block of contribution page was changed to bootstrap.


4. Now the Billing Block which consist of credit card information and Address.The location of this file is as follows- /templates/CRM/Core/BillingBlock.tpl.  For Changing the Address Block into Bootstrap,many additions were done as this file doesn’t use a smarty templates and every label were specified individually.

 

 

 

<div class="crm-section {$form.billing_first_name.name}-section form-group">
<div class="form-group label col-sm-2">{$form.billing_first_name.label} {$reqMark}</div>
<div class="form-group content col-sm-6 col-sm-offset-4  col-sm-pull-2">{$form.billing_first_name.html} </div>
<div class="clear"></div>
 </div>

 

 

The same code should be added to every label with in Address Block.With this the address block was totally scaled into Bootstrap.

5. To make the page more attractive, Bootstrap Component called PANELS were added to Address Block. The Source code for address block comes from-/templates/CRM/Core/BillingBlock.tpl.

   

<fieldset class="panel panel-info billing_name_address-group">
      <div class="panel panel-heading">
          <legend>{ts}Billing Name and Address{/ts}</legend>
              </div>
         <div class="panel-body crm-section billing_name_address-section"> on line 123-127

  Details about the panels or other Bootstrap Components will be available here

 

6. The source code for ‘Billing Block’ is as follows- /templates/CRM/Core/BillingBlock.tpl.

Many additions were done as this file doesn’t use a smarty templates and every label were specified individually.

 

<div class="crm-section {$form.account_holder.name}-section form-group">
<div class="form-group label col-sm-2">{$form.account_holder.label}</div>
<div class="form-group content col-sm-6 col-sm-offset-4 col-sm-pull-2"> {$form.account_holder.html}</div>
<div class="clear"></div>
</div>

With these additions, the ‘Billing Block’ will be totally scaled into Bootstrap.


7.To make the page more attractive, Bootstrap Component called PANELS were added to Address Block. The Source code for address block comes from- /templates/CRM/Core/BillingBlock.tpl.

 

<fieldset class="panel panel-info billing_mode-group {if $paymentProcessor.payment_type & 2}direct_debit_info-group{else}credit_card_info-group{/if}">
 <div class="panel-heading"> on line 37
<div class="panel-body">  on line 61

 Details about the panels or other Bootstrap Components will be available here

 

5.Documentation for adding Custom CSS files in CiviCRM

1. Billing block consist of images like 4 different types of credit-cards, image for CVV number.  added these images into custom css files. These are located at -css/custom.bootstrap.css

The following code was added to get the images.

/* Styles for credit card payment logos */
.crm-container .credit_card_type-section .crm-credit_card_type-icons a {
  display: block;
  float: left;
  width: 50px;
  height: 30px;
  background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
  text-indent: -20000px;
  margin-right: 10px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: 1px solid #FFFFFF;
}


.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa {
  background-position: -50px 0;
}


.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard {
  background-position: -100px 0;
}


.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex {
  background-position: -150px 0;
}


.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover {
  background-position: -200px 0;
}


.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb {
  background-position: -250px 0;
}


.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay {
  background-position: -300px 0;
}


.crm-container .cvv2-icon {
  display: block;
  width: 50px;
  height: 30px;
  background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
}


2. To increase the size of labels some code is added in custom.bootstrap.css, the size of labels was increased to 14px

Following line can be added in css/custom.bootstrap.css to increase the size

 .label {
   font-size: 14px;
          }


3. To make the required field visible, the colour should be changed Red. For that a line of code should be added in css/custom.bootstrap.css

Following line of code can be added to change the colour of label to Red

.crm-marker { 
            color: red;
                 }


 

6.Documentation for CiviCRM Home page:


1. In entire CiviCRM, Home Page is most commonly used ,so to customize it to bootstrap use of Panels which are components of Bootstrap are used.

2.  The code for this template is located at templates/CRM/Contact/Page/DashBoardDashlet.tpl

3.  To use Bootstrap components- Panels corresponding code related to it should be  added in DashBoardDashlet.tpl    

                                  

<div class="panel panel-info">
<div class="panel-heading finalconf-item">

 

4. Following line of code should be added to DashBoardDashlet.tpl  to make the bottons into Bootstrap CSS

          

 <div class="col-sm-2 col-sm-offset-4 finalconf-button">

 

5. Theses lines of code should be added in DashBoardDashlet.tpl to change the Home Page into Bootstrap.