CiviCRM Community Forums (archive)

Ok here goes, my 'recipe' of how to get CiviCRM 'Profiles' to look and behave as much like a Drupal 'Page' as possible.   For instance let's say you have a Drupal Menu called "About Us" and in there are three items:  1) Contact Us   2) Our Mission  3) Our Partners.  #1 and 2 are standard Drupal pages, but #3 is what you want to be a CiviCRM Profile.  You want to have all your Contacts in a group "Partners" be displayed on this page and updated automatically whenever the Partners change in CiviCRM.   And you want to have this page look and feel like a Drupal page, not like CiviCRM.

My clients have divided up the Contacts into many Groups and these Groups will be displayed Publicly or Privately (to authenticated users) on their Drupal sites as 'online directories'.   As you can imagine this has great value for a non-profit as opposed to just editing this list by hand or worse yet, printing a flyer every year that needs corrections before the ink is even dry.   

As of the writing of this post (late August 2008), my clients all use Drupal 5.9 and CiviCRM 2.0.5 on standard CentOS on virtual private servers.  This guide assumes you know HTML and CSS and are a web developer with a little bit of experience.

Step 1 is to make a Profile.  This is in Customize in CiviCRM administration.   When you create, make sure in the top you check 'Used for' to include Profile and Search Results.  Then you can restrict it to a particular Group of Contacts (this is the first option in the Advanced Settings) if you want.  Create the Profile.

Step 2 is adding the fields to your Profile.  After the profile is made click "View and Edit Fields".   Add First Name and Last name or Organization name, depending on your needs.  These fields you will want to be "Searchable" probably so click that box.  Also if this is a public page for the world to see, change the Visibility to Public User Pages and Listings.  If you want a field to be displayed in the big list, add it to Selector.

Now add any more fields you want: City, State, Website, etc etc.  You may or may not want these fields Searchable or Selector.  If you add these fields to Visibility "User Only" they will only show up if someone is viewing this Profile as an Authenticated User.   So that's good for potentially sensitive information that you don't want the whole world to see.   Neato huh?

Step 3 is to familiarize yourself with how to view the Profile and that's by using a link like this:
http://www.yourwebsite.com/civicrm/profile?reset=1&force=1&gid=N
Where "N" is the Id number of the profile -- this Id number is shown right next to the Profile name after you create it.  Bookmark this page, you'll view it a lot.   
For more info read this: http://wiki.civicrm.org/confluence/display/CRMDOC/Linking+Profiles 
Note: If you don't have Clean URLs w/ Drupal installed you need to do that or get your hosting company to do that, it's essential.  Stop now, get Clean URLs and come back.

Step 4 you are probably going to be dismayed that the Profile looks blue and colored like CiviCRM and so you are going to want to change the civicrm.css file in a few key places to make the Profile actually look like your site.  If you don't use Firebug for Firefox, download Firebug.  Firebug will revolutionize your world in more ways than this one, but now you can click on the Profile and find out what styles you need to change within a couple of minutes.

Now that's done, so your client may complain about a few things, like the big yellow alert box at the top, or the fact that the Search box is not open unless you click it first.  These things can be fixed by making a Custom Template and you can read about that here: http://wiki.civicrm.org/confluence/display/CRMDOC/Customize+Built-in+and+Profile+Screens in full detail.  Take some time on that.  I edited these templates to get rid of the alert box and change the search and icons.
/sites/all/modules/civicrm/<your_custom_template_dir>/CRM/Profile/Page/Listings.tpl
/sites/all/modules/civicrm/<your_custom_template_dir>/CRM/Profile/Form/Search.tpl
It's pretty easy to change the search and the yellow alert, but to remove the icons read this: http://forum.civicrm.org/index.php/topic,4125.msg18270.html#msg18270

Step 5 is where we start to integrate the Profile and try to make it look and behave like a Drupal page.   If you don't use but one theme for your whole site this may be unnecessary, so skip this step.

If you have multiple themes may want download a module called "CiviCRM Theme" http://drupal.org/project/civicrm_theme  which allows you to change the theme for CiviCRM, and have a separate theme for CiviCRM administration pages than for public CiviCRM pages.  This will allow you to give your Profiles the same Theme as the rest of your Drupal site, and not your standard out-of-the-box CiviCRM theme. 

Once you install the module, activate it and then Change the CiviCRM theme in Drupal: Home > Administer > Site configuration > Administration theme

Step 6 is for the URL.   The URL for the Profile is generally unsightly, and can be improved.  The standard Core module URL alias (/admin/build/path) doesn't work for CiviCRM!   Instead download "path redirect" module at http://drupal.org/project/path_redirect     Enable this module, and also don't forget to give yourself permissions to administer it -- oops that mistake cost me about 1 hour of frustration!  This module will allow you to give your Profile a nice clean URL like http://www.mysite.org/about_us/partners  for instance.

Step 7 Edit the drupal Menu and include this new, attractive URL to the CiviCRM profile in the Menu next to the other Drupal pages....so sly! 

Step 8 So now for the menu Block and Theme relationship.  In the theme you use for CiviCRM pages, if you have multiple themes, include this Menu in the theme using the Blocks editor here:  /admin/build/block/list/<nameofyourtheme>     This way, when the surfer navigates to the Profile, they still see the menu just like they did on the other Drupal pages.  Unless they are a super-savvy web surfer and look at the URL bar, they will not tell the difference.  See, now it looks and acts like a duck, but it's no duck, it's a CiviCRM Profile.  Booyah!

Ok that's it.  If you want to know more about my quest send me a private message or just search the forums for any posts I have made and you will learn all you need to know about this adventure.   ;-)   Good luck!