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

Improve this question
5
  • Some screenshots would be helpful.
    – Christian Wach
    Commented Oct 12, 2017 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
    Commented Oct 13, 2017 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
    Commented Oct 13, 2017 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
    Commented Oct 13, 2017 at 11:39
  • 1
    Possible duplicate of Contribution form looks different on live site
    – Jon G - Megaphone Tech
    Commented Feb 4, 2018 at 7:16

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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