1

I'm evaluating CiviCRM in Wordpress. When I view test pages, the layout looks fine. But when I view live pages, it often looks quite different and worse than the test. In some cases, it's completely unusable.

I thought that CiviCRM wrapped its elements in CiviCRM specific DIVs to preserve the CSS...

Not sure what's going wrong, but glad to be pointed in likely directions.

Thanks, Norman

  • Some screenshots would be helpful. – Christian Wach Oct 12 '17 at 9:53
  • Fair. In my trawling, I found this issue which describes the same problem. civicrm.stackexchange.com/questions/16433/… It has screen shots. – Norman Cates Oct 13 '17 at 1:23
  • I have kept on investigating, and it appears that the .label style (and probably many others) is being over ridden by a style out of the bootstrap css file. Even though the CiviCRM css file is after the bootstrap css file in the page. I think I worked out kind of how to fix it, but it speaks to a fundamental problem with how CSS interacts. I'm pretty sure it's not a specifically CiviCRM problem but the fix for might have to come in the CiviCRM css file. I suspect I should make another post about it. – Norman Cates Oct 13 '17 at 1:27
  • Interesting. CiviCRM should definitely prefix all its CSS declarations with the id/class of the container. If it fails to do so, it would be worth opening a Jira issue with details. – Christian Wach Oct 13 '17 at 11:39
  • 1
    Possible duplicate of Contribution form looks different on live site – Jon G - Megaphone Tech Feb 4 '18 at 7:16
1

CiviCRM does use the .crm-container and other similar classes in its templates, which helps to isolate the CSS styles (sometimes for better, sometimes for worse). The main problem I have found, especially with Bootstrap themes, is Bootstrap taking over the .label class, and CiviCRM not using a class name such as .crm-label. I've found a relatively easy fix to be using a custom CSS file that is linked from the Settings - Resource URLs administration page. For example, our document is at [cms.root]/sites/default/files/custom_civicrm.css, and contains this code (among other overrides):

div.crm-container label {
  color: #333333;
  font-weight: normal;
  font-size: 1.2em;
}

As I have discovered other strange interactions between the theme and CiviCRM, I've used Chrome to Inspect the CSS to find the class that is just specific enough to cover all of the style that needs to be fixed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.