CiviCRM Community Forums (archive)

> I understand that the drupal theme and the civicrm themes are two separate things.

Not entirely. In a default Drupal / CiviCRM site, the same Drupal theme is used for CiviCRM pages. The HTML generated by CiviCRM comes from templates in CiviCRM, but the CSS of your Drupal theme is applied.

So the simplest way would be to attempt to adjust/add CSS to your Drupal theme to create the look you want. You should be able to do what you need with CSS.

If necessary, you can also customize the CiviCRM templates, but that can (and will eventually) cause problems (or at least extra work) when upgrading.

HTH

I think Hershel's approach is probably best if you can get it to work (i.e. adding style directives to your theme's CSS file to modify styles for element in the CiviCRM portion of your pages that need "fixing"). All CiviCRM elements (except stuff in Drupal blocks) are contained in a big <div id="crm-container"> - which can help you address specific page elements. In some cases, you may need to use the "cascading" feature of CSS to make sure you're style is getting applied to the right element. For example:

#crm-container div#customData td.label {
  (your style stuff here)
}

If you haven't started using Firebug (Firefox plugin) to help u inspect and experiment w/ css  on your pages - I'd highly recommend you invest some time checking it out.

Yes, Firebug is a must, without question.

To make CSS rules more specific, sometimes you can just add a body selector. So just in case what Dave wrote doesn't work in some specific case, then try:

body #crm-container div#customData td.label {

Good luck and let us know if there are any problems.