Published
Monday, January 25, 2010 - 09:01
Written by

This is a follow up to Refactoring CiviCRM's templating system (starting with CSS). It may be helpful to read that first, although it is certainly not necessary. We have made a lot of progress on CiviCRM 3.1's templating system, and I'm quite please to share some of the details of the work with you! In addition to a number of minor fixes and CSS cleanup, the main contribution page template has been re-worked and we have begun implementing many of the ideas outlined in the Layout Standards page. I've also created a new subsection in the Wiki, that deals specifically with templates & theming. I hope that this section will become a resource both for the community at large that is looking to increase their understanding of the templating system and how to leverage CSS and templating to the fullest advantage as well as to serve as a resource & guide to those committing template modifications to core who would like to follow community agreed-upon best practices. As this section is fleshed out (current entries are buttons, icons and sections elements but I am working on others) I hope to incorporate all of the Layout Standards document into each section such that layout best practices and theming best practices will be one and the same. To elucidate the power of the new layout implementation (and as pre-cursor to additional upcoming additions to the theming section), I've created two quick css-only modifications of a dummy CiviContribute page (here is the original version): Demo 1 CSS for Demo 1 (inserted into head of document, although could easily be in any CSS file of your choosing)


/** 
 * customizing the donation form
 * demo by kyle jaster for rayogram.com
 */

/** 
 * set all labels to be left-aligned 
 * it looks better, but it's harder to read :)
 */
#crm-container .section .label {
	text-align:left;
	}

/* quickly customize fieldsets */
#crm-container fieldset {
	background-color:#FFF;
	border:none;
	padding-left:0px;
	}

#crm-container fieldset legend {
	padding-left:0px;
	font-weight:bold;
	}
	
/* set credit card info parallel to billing info */
	
.credit_card_info-group {
	width:49%;
	float:left;
	}

/* set custom label size for credit card info */
#crm-container .billing_mode-section .label { width:110px; }
#crm-container .billing_mode-section .content { margin-left:110px; }

/* set custom label size for billing info */
#crm-container .billing_name_address-group .label { width:140px; }
#crm-container .billing_name_address-group .content { margin-left:140px; }
#crm-container .billingNameInfo-section .content {margin-left:0px;}


/**
 * move submit button to the right hand side 
 * to flow with form  
 */
#crm-submit-buttons {text-align:right;}


.email-5-section,
.premiums-group {
	border-bottom:1px solid #333;
	padding-bottom:1em;
	}

and here is Demo 2 CSS for Demo 2:


/** 
 * customizing the donation form
 * demo by kyle jaster for rayogram.com
 */

/* customize sections with padding */
#crm-container .section {
	padding:5px;
	background-color:#FAFAFA;
	}

#crm-container .email-5-section,
#crm-container .credit_card_info-section,
#crm-container .credit_card_info-section .section {
	background-color:#EDF5FA;
	}

#premiums-intro p {
	padding:5px;
	margin:0px;
	background-color:#FAFAFA;
	}

#crm-container table#premiums-listings {width:100%;}

/** 
 * set all labels to be left-aligned 
 * it looks better, but it's harder to read :)
 */
 
#crm-container .section .label {
	font-size:14px;
	} 
 
#crm-container .amount_other-section .label,
#crm-container .amount-section .label {
	float:none;
	text-align:left;
	width:100%;
	font-size:14px;
	padding-bottom:.5em;
	margin-bottom:.5em;
	}


/* quickly customize fieldsets */
#crm-container fieldset {
	background-color:#FFF;
	border:none;
	padding-left:0px;
	}

#crm-container fieldset legend {
	padding-left:0px;
	font-weight:bold;
	}

#crm-container .amount-section {
	float:left;
	width:163px;
	margin-bottom:0px;
	}
	
#crm-container .amount_other-section {
	margin-bottom:0px;
	}

#crm-container .amount_other-section .label {
	display:none;
	}
#crm-container .amount_other-section .content {
	padding-top:8em;
	}
#crm-container .amount-section .content,		
#crm-container .is_pledge-section .content {margin-left:0px;}

If you like either of these modifications, feel free to use them - or use them as a base for your own modifications - I have tried to provide thorough comments throughout the changes. Also - you might want to take a look at the Wiki's Quick Hacks page if you want test out the above CSS on your installation without modifying any files on your server ;) Related Documents: Wiki Section on Theming: http://wiki.civicrm.org/confluence/display/CRMDOC/Theming+CiviCRM Layout Standards: http://wiki.civicrm.org/confluence/display/CRM/Layout+Standards From Wiki's Theming Section, an implementation of Layout Standards: http://wiki.civicrm.org/confluence/display/CRMDOC/Section+elements *edits of 2/28/2010 - changed wiki urls to reflect change from CRMUPCOMING to CRMDOC

Comments

Hey Kyle,

This is a great start - it is really brilliant to see some of the ideas from the wiki being transformed into real working CiviCRM examples.

Mr personal fave is Demo 1 and I love the way there is no extraneous formatting (not at the block level nor in the text).

As well as making it easier to theme different pages, making these changes at the CSS level translates into lots of usability improvements. Looking forward to working more on this.

Michael

I much prefer demo 1 in design - Good work

I really like how streamlined demo1 is - good work!

Kudos to Kyle and the folks at rayogram.com for their awesome contributions in improving the markup, CSS, and themability of Civi!

One additional tip for folks.... starting with the upcoming 3.1 release you can define additional CSS styles to be applied to all or specific page elements (like the examples above) by adding CSS styles to the 'extra CSS' file: css/extras.css. This file is included in the downloaded codebase, but is empty by default. It is loaded for all CiviCRM pages. If you can accomplish required theming results with this approach, you can avoid the work of merging your custom CSS file / template changes with upgraded versions.

FYI - Most of the URL links referenced here are broken, but cut and paste of the displayed http reference works. Quick Hack is http://wiki.civicrm.org/confluence/display/CRMDOC/Quick+Hacks .