TIP: How to Customize the CSS Stylesheet for CiviCRM

[CiviTeacher.com]

There are two ways to change the colors and general look of CiviCRM to get it to match your site theme and not be the standard 'ol blue and light blue and that other blue color that CiviCRM is.

1) Create a custom CSS file to override CiviCRM defaults and include the CSS file in your Drupal or Joomla site theme
2) Change the CiviCRM setting in Administration > Global Settings > URL to use a custom CSS file

Either way, you're going to need to know what css selectors and attributes to change, and I spent several hours doing that.  I'm posting those CSS selectors you will want to watch for here.  Please note, if you use this code verbatim, your CiviCRM will turn out orange and brown and green like my site.  So change those hex numbers to match whatever your site uses and you're good to go.  This will hopefully save you a few hours using Firebug.

Code: [Select]

/* these styles override default civicrm styles in civicrm.css */

#crm-container .form-item input.form-text, #crm-container .form-item select, #crm-container .form-item textarea, #crm-container .form-item .resizable-textarea .grippie {
border: 2px solid #DBDCBE;
}

#crm-container #search-status {
background-color: #fbf5e3;
}


div.crm-pager, #crm-container div#recently-viewed {
background-color: #ede7cc;
border: 2px solid #DBDCBE;
}

#crm-container tr.columnheader-dark td, #crm-container tr.columnheader-dark th, #crm-container tr.columnheader td, #crm-container tr.columnfooter td {
background-color: #fbf5e3;
border: 2px solid #DBDCBE;
color: #000;
}

#crm-container .listing-box {
border: 2px solid #DBDCBE;
}

#crm-container #search-status {
background-color: #fbf5e3;
border: 2px solid #DBDCBE;
}

#crm-container th {
border-bottom: 2px solid #DBDCBE;
border-top: 2px solid #DBDCBE;
}

#crm-container tr.columnheader {
background-color: #fbf5e3;
}

table.selector {
font-size: 0.8em;
}

div.qill  {
font-size: 0.95em;
}

div.crm-pager a, #crm-container #recently-viewed a {
color:#000;
}

#crm-container table {
border: 2px solid #DBDCBE;
}

#crm-container .odd-row, tbody.scrollContent {
background-color: #fff;
}

#crm-container .even-row, tbody.scrollContent tr.alternateRow {
background-color:#fbf9f1;
}

#crm-container tr.even-row td, #crm-container tr.odd-row td {civicrm.css (line 590)
border-collapse:collapse;
border-top: 1px solid #DBDCBE;
}

#crm-container table.selector td {
border-right:1px solid #DBDCBE;
}

#crm-container #alpha-filter li {
background-color:#fbf5e3;
border: 1px solid #DBDCBE;
padding: 2px 5px;
}

/* this makes the labels all the same width so the form looks aligned */
#crm-container .form-layout td.label, #crm-container .form-layout-compressed td.label, #crm-container .selector td.label, #crm-container .form-layout-compressed th.label {
width: 220px;
}

.form-item #intro_text dt { width: 220px; }

#crm-container .form-layout-compressed td#email-field {
width: 232px;
}

/* this is for a little padding on the "upcoming events" block on the left sidebar */
#block-block-12 a {
margin-bottom: 6px;
}

#crm-container .report td {
background-color:#fbf9f1;
border: 2px solid #DBDCBE;
}

#crm-container .header-dark {
background-color: #fbf9f1;
border: 2px solid #fea245;
color: #000;
}

#crm-container ul.wizard-bar li.past-step {
background-color: #fbf9f1;
border: 2px solid #DBDCBE;
color: #000;
}

#crm-container ul.wizard-bar li {
background-color: #fff;
border: 2px solid #DBDCBE;
margin: 0 2px 0 2px;
}

#crm-container ul.wizard-bar {
border-top: 2px solid #56AB09;
}

#crm-container ul.wizard-bar li.current-step {
background-color: #FFF;
border: 2px solid #56AB09;
}

.vevent .action-link {
padding-top: 2em;
}

#register-link {
/* this is the register now button on event register page */
padding: 0.5em;
border: 2px solid #56AB09;
background-color: #fbf9f1;
font-size: 14px;
text-decoration: none;
}



[Eileen]

Hi there,

I've been pondering for a while that fckeditor will allow you to hook up a style sheet with the wysiwig view - which is great - but it doesn't get included in civiMail. I'm wondering if you have any thoughts.

I'm not 100% sure if it is considered to be desirable to reference or include a css sheet in a mail out as I don't know if e-mail clients / spam checkers or whatever have a dislike for this approach but I had thought about investigating

[CiviTeacher.com]

Good question.

In my business, I generally do one or two custom email HTML templates a week.  There is a WIDE variance in how HTML emails are treated by various clients and services: Outlook, Thunderbird, Gmail, Yahoo mail etc etc etc the list goes on.s\]

From my testing I've generally concluded that it's best not to include a stylesheet in a "mail out" as you say.   Any CSS should be included in <style> tags in the HTML template itself.  In fact, for best results + maximum consistency I use very little CSS at all, and code the HTML templates with tables and <font> tags, just like it was 1997.

Sad, I know, but this is the only way to get an HTML Template to always look as designed, particularly in Yahoo or Gmail which are the worst for HTML rendering --- this is my experience.   So no I don't think there's much value in including a CSS file in a mail out.  Does that answer your question?

[Eileen]

Yep - in a perfect world you could include the css in the wysiwyg & so people can select your styles & it would be converted I guess

[alexmglover]

If you change the resource url, is there any way to change the css for the front-end only?  My template stylesheets are overridden by the civicrm stylesheets, because the civicrm stylesheets are after the template stylesheets.