Aller directement à la fin des métadonnées
Aller au début des métadonnées

 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.

 

 

 

 

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.

 

  • form-group is used for spacing in between labels,
  • control-label is used to control spacing of each label and

  • col-sm -3 is the size of each label.


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.

  • form-group is used for spacing in between input fields,
  • col-sm-6 is the size of input fields

  • col-sm-offset-3 give a space of 3 before input fields andcol-sm-pull-3 pulls 3 towards left the input fields.

 

 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

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

          

  • text  for input-text field and

  • select for dropdowns.

  • form-control is used to give Bootstrap fields.

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

 

 

 

  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.

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.

     


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’

 

  •  form-group is used for spacing between two labels.
  • col-sm-2 is the width of the label

  • col-sm-6 is the width of input-text-field

  • In bootstrap each row should contain 12 elements, so col-sm-offset-4 is used to give 4 spaces between label and input text field.

  • col-sm-pull-2 is used to pull the input text field bt two places. This is done to ensure good scaling.

 

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.

 

  • form-group is used for spacing between two labels.
  • col-sm-2 is the width of the label

  •  col-sm-6 is the width of input-text-field

  • In bootstrap each row should contain 12 elements, so col-sm-offset-4 is used to give 4 spaces between label and input text field.

  • col-sm-pull-2 is used to pull the input text field bt two places. This is done to ensure good scaling.

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.

 

 

 

 

  • form-group is used for spacing between two labels.
  • col-sm-2 is the width of the label
  •  col-sm-6 is the width of input-text-field
  • In bootstrap each row should contain 12 elements, so col-sm-offset-4 is used to give 4 spaces between label and input text field.
  • col-sm-pull-2 is used to pull the input text field bt two places. This is done to ensure good scaling.

 

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.

   

  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.

 

  • form-group is used for spacing between two labels.

  • col-sm-2 is the width of the label

  •  col-sm-6 is the width of input-text-field

  • In bootstrap each row should contain 12 elements, so col-sm-offset-4 is used to give 4 spaces between label and input text field.

  • col-sm-pull-2 is used to pull the input text field bt two places. This is done to ensure good scaling.

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.

 

 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.


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


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


 

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    

                                  

 

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

          

 

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

 

Étiquette
  • Aucun
  1. Aug 17, 2014

    Nina Reyes dit :

    Hi Teja,

    This looks good.  Could you review the first section about the Drupal Bootstrap theme and include something for users who might already have a Bootstrap-based custom theme for their site?  As the Bootstrap framework would already be loaded, they wouldn't need to download and install the basic Drupal Bootstrap theme.  As some people have asked about this, it might be helpful to include.

  2. Sep 15, 2014

    Hi, I would like to help with merging Teja's patches. I raised the topic on IRC, and had a quick discussion on IRC with JP-Ezod and lobo. In short:

    • Joomla: currently uses bootstrap 2.x, but lots of people create their own theme using bootstrap 3.x. The grid system in 2.x and 3.x is different.
    • Ideally, CiviCRM should not distribute Bootstrap core. The front-end theme should already be using it. For "standalone", it could be an extension.
    • If the front-end theme is not bootstrap-based, we should "degrade" gracefully. i.e. civicrm forms should not be completely broken, just maybe not as nice as with bootstrap (i.e. the current status quo).
    • I will study more in detail, but I have mixed feelings about the duplication of the civicrm.css/bootstrap.civicrm.css file. I guess it assumes that we always load boostrap, but I'm afraid there will be times where that may interfere too much with the front-end theme.
    • Patches would go in CiviCRM 4.6
    • I would like to get the most basic patches in asap (ex: classes on inputs and buttons), then see as we go. I would really like some of the basic things to be backported to 4.5 eventually, to encourage adoption.

    @   Nina , Teja, what do you think?