Changing the look using CSS

CiviCRMHaving configured a path for your custom .css file as one of the Resource URLs, you can then edit the crm.css file to change the look as required.


Firefox inspector

  1. Using Firefox, I went to Tools > Web Developer > Inspector.
  2. I was then able to identify the CSS classes for elements that I wanted to change.

The rest of this article provides some example CSS code for making various changes.

Button styling

This css wil present an orange button.

.crm-container a.button, .crm-container a.button:link, .crm-container a.button:visited, .crm-container input.crm-form-submit, .crm-container .ui-dialog-buttonset .ui-button, .crm-container input[type="button"], .crm-container .crm-button {
  background: #ffb58a;
  background-image: -webkit-linear-gradient(top, #ffb58a, #e66c25);
  background-image: -moz-linear-gradient(top, #ffb58a, #e66c25);
  background-image: -ms-linear-gradient(top, #ffb58a, #e66c25);
  background-image: -o-linear-gradient(top, #ffb58a, #e66c25);
  background-image: linear-gradient(to bottom, #ffb58a, #e66c25);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  -moz-osx-font-smoothing: none;
  border-radius: 6px;
  font-family: Arial;
  color: #ffffff;
  color: #ffffff !important;
  font-size: 14px;
  padding: 6px 16px 6px 16px;
  text-decoration: none;
  text-shadow: none;
  border: none;
}

.crm-container input[type="submit"]:hover {
  background-position: 0 0px;
}

Hiding the print icon

Here’s some CSS for hiding the print icon:

.crm-container #printer-friendly {
  display: none;
}

 

Thanks for visiting.