Skip to main content

Strategies for making CiviCRM look different

Why is CiviCRM so ugly?

Out of the box, a CiviCRM public contribution page is surprisingly ugly. 

Worse, if you ask your designer to make it look better, they are likely to take a long time, grumble loudly, and then maybe a year later it starts looking ugly again.

It's a bit tragic that this is sometimes the first experience of people with CiviCRM, and since it's not likely to get fixed any time soon, here's a post explaining a bit of why, and how to remediate the issue.

Why is CiviCRM so ugly?

My first answer to this question is technical, but I'll try to make it accessible to the casual reader.

A visitor's "objective" visual experience of a web page, is a product of:
a. their device and browser (an iphone using safari, a desktop using chrome, a tablet using firefox, etc.)
b. the html of the page
c. the css (cascading stylesheets)
d. the page's javascript

When you're looking at a CiviCRM page, then you're looking at collection of html+css+js that is contributed (at least) by:
1. The core CMS
2. The CMS active "theme"
3. CiviCRM
4. CiviCRM's active "theme"

So technically, the answer is: because of the mix of html/css/js provided by these four bits of the software.

Why is CiviCRM so ugly?

My second answer expands on the first one and gives you some historical perspective.

CiviCRM is designed to work with multiple CMS's. That means it can't make many assumptions about what else is on the page, or make use of the CMS form building tools (or at least, that would be complicated).

In addition, one of the early CiviCRM priorities was to make it out-of-the-box, web-ui configurable usable. To accomplish this, it was decided to use html and css for the public forms that were "bullet-proof" - i.e. ignore whatever html/css might already be in use and just at least make them look "good".

That meant, for example, setting fonts sizes, weights and sometimes colours explicitly, as well as using what was then the standard trick to line up labels to the left of their form elements when on a big screen.

So what you see now, by default, is some very dated html/css that overrides whatever site-wide style a CMS theme has tried to impose.

Why is CiviCRM so ugly?

And that's all well and good, but how has this situation endured? Surely all the smart people involved in CiviCRM can fix it?

My first answer above hides some important history. In the past number of years core CiviCRM has provided a "theme" concept, and there are a number of themes available. Usefully, like Drupal, CiviCRM allows you to assign different themes for the public vs private pages.

When I saw all that work, I thought, "great, someone is fixing this problem so I don't have to".

But after multiple attempts trying to get out of the box nice CiviCRM contribution screens by making use of some of these new themes, I realised that these themes were solving a different problem. In fact, they seemed to be repeating the error of the original implementation, which was to be so opinionated in what things should look like, instead of working with the rest of the system that's generating the page the contribution form lives on. To be fair, for backend themes, that's exactly what you want, it's just kind of the opposite of what you want from a front end theme.

How To Fix CiviCRM's Contribution Page Design

If you have a picture of what you want something to look like on the web, there are a lot of ways that can be implemented with combinations of html, css and js.

So it's possible to make a CiviCRM contribution page nice only by tweaking your CMS theme.That was the usual way to do it for many years, and there are legions of Drupal and Wordpress designers out there that now have a very dim view of CiviCRM.

The Better Way is to do it in two steps:

1. Remove the old-school legacy css that CiviCRM carries around, using a CiviCRM theme. My Toronto theme is a work in progress to do that.

2. Add new (minimal) css (and possibly js) to extend your theme's design to the new html elements generated by the CiviCRM contribution page.

Here's a simple example at work:





Popular posts from this blog

The Tyee: Bricolage and Drupal Integration

The Tyee is a site I've been involved with since 2006 when I wrote the first, 4.7 version of a Drupal module to integrate Drupal content into a static site that was being generated from bricolage. About a year ago, I met with Dawn Buie and Phillip Smith and we mapped out a number of ways to improve the Drupal integration on the site, including upgrading the Drupal to version 5 from 4.7. Various parts of that grand plan have been slowly incorporated into the site, but as of next week, there'll be a big leap forward that coincides with a new design [implemented in Bricolage by David Wheeler who wrote and maintains Bricolage] as well as a new Drupal release of the Bricolage integration module . Plans Application integration is tricky, and my first time round had quite a few issues. Here's a list of the improvements in the latest version: File space separation. Before, Drupal was installed in the apache document root, which is where bricolage was publishing it's co
Read more

Refactoring My Backup Process

A couple of weeks ago, I decided to spend a few hours on a Friday afternoon improving my backup process for my Blackfly managed hosting service . Two weeks later, I've published my ongoing work as an update to my backup-rsync project and have decided to share it with you. You might think I'm trying to compete for "least click-bait like title ever", but I'm going to claim this topic and project might be of interest to anyone who likes to think about refactoring , or who is implementing backups for container-based hosting (like mine ). Definition "Backup" is one of those overloaded words in both vernacular and computer-specific use, so I want to start with definitions. Since "a backup" is amongst the least interesting objects (unless it contains what you absolutely need in that moment), I think it's more interesting and useful to define backups functionally, i.e. A "backup process" is a process that 1. provides a degree of insuranc
Read more

drupal, engagement, mailing lists, email

I lived, worked and studied in Costa Rica from 1984 to 1989. Ostensibly, I was there to study Mathematics at the University, and indeed I graduated with an MSc. in Mathematics supervised by Ricardo Estrada (check that page, he even advertises me as one of his past students). And yes, I do have a nine page thesis that I wrote and defended in Spanish somewhere in my files, on a proof and extension of one of Ramanujan's theories. But mathematics is a pretty lonely endeavour, and what drew me back to Central America (after the first visit, which was more of an accident), was the life and politics. The time I lived there was extremely interesting (for me as an outsider, though also painful and tragic for it's inhabitants) because of the various wars that were largely fuelled by US regional hegemonic interests (of the usual corporate suspects and individuals) and neglect (of the politicians and public) - the Contra war in Nicaragua, the full-scale guerrilla wars in El Salvador and
Read more