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

A Strange Passion for Security

I'm not a computer security expert, but it's been part of my work for many years, in different forms.  A very long time ago, a friend hired me to write up a primer for internet security, and ever since then it's been a theme that's sat in the background and pops up every now and then . But lately, it's started to feel like more than a theme, and but indeed a passion. You may consider computer and internet security to be a dry subject, or maybe you imagine feelings of smugness or righteousness, but "passion" is the right word for what I'm feeling. Here's google's definition: Passion: 1. a strong and barely controllable emotion. 2. the suffering and death of Jesus. Okay, let's just go with number 1. for now. If you followed my link above to other posts about security, you'll notice one from eight years ago where I mused on the possibility of the discovery of a flaw in how https works. Weirdly enough, a flaw in https was discovered shortly...
Read more

Orchestrating Drupal + CiviCRM containers into a working site: describing the challenge

In my previous posts, I've provided my rationale for making use of Docker and the microservices model for a boutique-sized Drupal + CiviCRM hosting service. I've also described how to build and maintain images that could be used for the web server (micro) service part of such a service. The other essential microservice for a Drupal + CiviCRM website is a database, and fortunately, that's reasonably standard. Here's a project that minimally tweaks the canonical Mariadb container by adding some small configuration bits:  https://github.com/BlackflySolutions/mariadb That leaves us now with the problem of "orchestration", i.e. how would you launch a collection of such containers that would serve a bunch of Drupal + CiviCRM sites. More interestingly, can we serve them in the real world, over time, in a way that is sustainable? i.e. handle code updates, OS updates, backups, monitoring, etc? Not to mention the various crons that need to run, and how about things ...
Read more