CiviCRM 3.1 Templates, Theming, CSS Bonanza!

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