Author Topic: Bootstrap for CiviCRM UI (Read 10621 times)

xavier · July 02, 2014, 08:17:40 am

Hi,

All the external libraries are under package, so
packages/HTML/QuickForm.php and the folder under packages/HTML/QuickForm

From a quick glance, it seems to be QuickForm, not QuickForm 2. Where did you see civicrm was using quickform 2? (I'm not sure if there is a difference, just pointing that out)

I believe it's coleman that suggested you to use and IDE to help you find files, did you follow his advice? What did you do to find quickform files before concluding you can't find it?

In this thread, I pointed you to custom renderer on the 30 of April and you still haven't found where the quickform files are located in Civi. I would suggest you to increase the speed of your progress on the second half of GSoC if you want to succeed, and recommend you to report on a daily basis here on your progress so we can help you faster.

X+

teja-amil · July 02, 2014, 08:38:24 am

Hi

I might have mis-communicated. I am aware of the location of QuickForm folders and have been working on them for the past week.

I understand that packages/QuickForm/Renderer folder has all the renderers and it uses Default.php file to render current forms. I have also tried to write a new renderer Bootstrap.php that extends Default.php to change styles (I inferred this after looking at the documentation). Thought, I have not made changes to all elements, I have seen that QuickForm files have smarty tags for elements. I made some changes to CSS styles here but the changes are not reflected in the front-end.

xavier · July 02, 2014, 10:46:10 am

So are you sure it's using the smarty renderer? the default one isn't smarty, is it?

I'm still not sure I understand what you are trying: changing the renderer so it's your custom one of setting the smarty one.

Anyway, did you find where the qF renderer is called and how to change it so it's using your custom one?

X+

emilyf · July 04, 2014, 07:19:45 am

I think based on our call today that you might want to look at civicrm/CRM/Core/Controller.php - let us know if this gets you in the right direction again

teja-amil · July 04, 2014, 09:54:21 am

04-07-2014
Update:
1. Changing the CSS of input-text fields of form to Bootstrap CSS
Issues:
1.Unable to find the location of classes.

http://i.imgur.com/f9ms1Sz.png

Could someone point me to the location where these classes are generated in the civicrm? Eg. class-'form-text big required'

I am trying to re-style them

emilyf · July 04, 2014, 10:23:27 am

Hi Teja -
Have you looked at civicrm/CRM/Core/Controller.php ? I think this will get you going in the right direction.

teja-amil · July 06, 2014, 11:30:42 am

Update as on 06-07-2014 :

I was going through CRM/Core/Controller.php

Came across 'display' => 'CRM_Core_QuickForm_Action_Display' on line 380 of Controller.php

According to PEAR docs (http://pear.php.net/manual/en/package.html.html-quickform-controller.faq.php & http://pear.php.net/manual/en/package.html.html-quickform-controller.html-quickform-action-display-summary.php) custom actions can be added as a sub-class. Can we include CSS through a function here?

However, how do we identify different elements? Once they are identified, may be we can have a switch case to tag them differently ..

teja-amil · July 09, 2014, 11:59:38 am

Update regarding past two days

GOOD NEWS. For past 2 weeks I have been facing some issue regarding renderer. After daily calls with Emily for last 1 week, I am able to overcome the issue I have been facing. To customize labels like input-text fields,drop-downs,radio-buttons etc I have been changing in Quickform but it was not the perfect solution. I could point out the location where these labels are getting their CSS and I changed some code as a test and i could reflect it in front-end.

The location is civicrm\CRM\Core\Form\Renderer.php
I have posted regarding the same in detail in my blog post.The link to Blog Post- https://civicrm.org/blogs/teja/updates-%E2%80%93-bootstrap-civicrm-ui

Upcoming tasks:-
As suggested, all the code related to bootstrap should be in separate file I am writing a separate file with all the necessary functions which customize the CiviCRM CSS to Bootstarp CSS

Roadblocks:
As the renderer.php is in Classes and objects format I am not able to call the functions directly which is written in bootstrap file to Renderer.php.

teja-amil · July 12, 2014, 12:46:58 am

Update as on 12-07-2014

Hi,
For the past two days I have been working on radio buttons and check-boxes and this has led me to many new things!
I could change the Contribution Page from CiviCRM CSS to Bootstrap CSS too. which this change, the FORM and Contributions pages are converted into Bootstrap CSS (minor changes required like aligning labels).
The changes to the code are committed to github. The link- https://github.com/amilineni/civicrm-core

Upcoming Goal:
All the minor changes to Form and Contribution Pages will be done and will be taking a new page- "Summery Overlay" to convert into Bootstrap CSS

ixokios · July 13, 2014, 10:57:11 pm

thank your for your sharing

Greats post

teja-amil · July 14, 2014, 11:18:18 am

Hi,
I am trying to install CiviCRM 4.5 beta 1 on my local machine with WordPress. I am able to install but there are few errors.

1:- When I try to add Contribution Page with Live page it is giving an error on the front end saying-

'Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\plugins\civicrm\civicrm.php:625) in C:\xampp\htdocs\wordpress\wp-content\plugins\civicrm\civicrm\CRM\Utils\System.php on line 423'

screen shot of the same error is as follows :-http://i.imgur.com/rkSIzua.png

2:- In the back end when I try to add a Profile Page, I came across only three options i.e Name and Address, Supporter Profile, Your Registration Info But there should be more than 6-7 options to select in Profile.

screen shot of the same is as follows:- http://i.imgur.com/V0EPvp2.png

I have tried re-installing many times WordPress and CiviCRM , But there was no result.Can any one help me with this?

emilyf · July 14, 2014, 11:48:33 am

Hi Teja -

- doublecheck the installation requirements on http://wiki.civicrm.org/confluence/display/CRMDOC/WordPress+Installation+Guide+for+CiviCRM+4.5 - make sure your local is correctly running wordpress 3.4 and ensure all the other requirements are met. That means you should double check your local php settings, mysql settings, etc.

I have just installed 4.5 this morning 3 times successfully during and after our call (and I was able to successfully bring in your fork to Civi 4.5 and see the bootstrap changes after the call as well) so I anticipate this is with your local box - please try to go through it again piece by piece even though you have already tried.

1. Download and install a fresh version of the latest wordpress, ensure it is working - do not change to any custom theme and do not use an older download
2. Download the civi 4.5 beta we have been using at http://sourceforge.net/projects/civicrm/files/civicrm-testing/4.5.beta1/
3. Activate the civi plugin
4. Install as usual via /wp-admin/options-general.php?page=civicrm-install - what happens when you go to this page? Are you able to successfully install? Are there any warnings on the requirements check?

Do not try to connect it up to gitify and do not try to bring in your fork until all 4 of these steps are completed. Then test running the civi forms and see if they work. After you ensure all of that is working, then bring in the civi fork you want via gitify

If you are still having problems - wp-content/plugins/civicrm/civicrm/install/index.php exists and that it has execute permissions set

If that still doesn't work, please report what version of php, mysql, and L/MAMP stack you are using, and double check the permissions and what theme you are using. Then let us know exactly where it is failing - on install or after install, etc.

teja-amil · July 22, 2014, 03:16:36 am

Hi

I would like to add a custom preference for CSS in Administer > System Settings > Resource URLs

For this, I have added the corresponding QuickForm element in templates/CRM/Admin/Form/Setting/Url.tpl

Also, I have added the condition to include CSS file in CRM/Core/Resources.php

Here, it refers to CRM_Core_BAO_Setting::getItem() and CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME

I am unable to locate these functions to modify them. Any pointers on where to look?

Thanks

xavier · July 22, 2014, 06:51:15 am

Hi,

What are you trying to add?

You should be able to search the source code, use grep or whatever you want to search for the class name (hint, the class name matches the directory structure).

You seem to have a lot of problem with basic stuff like finding data in a file that should be mostly a trivial task by now. Please describe what is your process when you search, because there is some basic trick that you seem to miss.

X+

emilyf · July 22, 2014, 01:20:36 pm

Per our call today, you are going to need to approach this setting similar to how disable_core_css is approached. You have the majority of it figured out between Url.php/tpl and Core.setting.php, and on the call you also identified that you also need to work with Resources.php to add a new function similar to addCoreStyles or else modify that function to include bootstrap.

However since you are adding a new system setting you need to get that setting into the database as well - this is where using grep will help you from within the civicrm folder:
grep -nr disable_core_css* .

Grep shows that you can find how disable_core_css approaches this by looking at CRM/Upgrade/Incremental/php/FourFour.php. You will need to modify Core.setting.php version for your enable_bootstrap_css variable to be for 4.5 and provide an upgrade clause that reflects this new system setting. You will then need to test if the setting works both through a clean 4.5 installation as well as an upgrade from 4.4 to 4.5 to ensure it gets stored properly.

CiviCRM Community Forums (archive)

News:

Author Topic: Bootstrap for CiviCRM UI (Read 10621 times)

xavier

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

xavier

Re: Bootstrap for CiviCRM UI

emilyf

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

emilyf

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

ixokios

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

emilyf

Re: Bootstrap for CiviCRM UI

teja-amil

Re: Bootstrap for CiviCRM UI

xavier

Re: Bootstrap for CiviCRM UI

emilyf

Re: Bootstrap for CiviCRM UI