Answers.Body: <p>CiviCRM does use the <code>.crm-container</code> 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 <code>.label</code> class, and CiviCRM not using a class name such as <code>.crm-label</code>. 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):</p>
  
  <pre><code>div.crm-container label {
    color: #333333;
    font-weight: normal;
    font-size: 1.2em;
  }
  </code></pre>
  
  <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-12-06T03:37:06.463Z
Answers.LastActivityDate: 2017-12-06T03:37:06.463Z
Answers.UserDisplayName: Michael Collins
Body: <p>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.</p>
  
  <p>I thought that CiviCRM wrapped its elements in CiviCRM specific DIVs to preserve the CSS...</p>
  
  <p>Not sure what's going wrong, but glad to be pointed in likely directions.</p>
  
  <p>Thanks,
  Norman</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-10-12T09:53:41.050Z
Comments.Text: Some screenshots would be helpful.
Comments.UserDisplayName: Christian Wach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-10-13T01:23:19.767Z
Comments.Text: Fair. In  my trawling, I found this issue which describes the same problem.
  
  https://civicrm.stackexchange.com/questions/16433/contribution-form-looks-different-on-live-site?rq=1
  
  It has screen shots.
Comments.UserDisplayName: Norman Cates
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-10-13T01:27:27.723Z
Comments.Text: 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.
Comments.UserDisplayName: Norman Cates
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-10-13T11:39:04.837Z
Comments.Text: 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.
Comments.UserDisplayName: Christian Wach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-04T07:16:14.907Z
Comments.Text: Possible duplicate of [Contribution form looks different on live site](https://civicrm.stackexchange.com/questions/16433/contribution-form-looks-different-on-live-site)
Comments.UserDisplayName: Jon G - Megaphone Tech
Tags: <wordpress><css>
Title: CiviCRM CSS doesn't appear to be used when viewing live pages
ThreadText: # CiviCRM CSS doesn't appear to be used when viewing live pages
  
  (Asked by: username_0 on 2017-10-11)
  
  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
  
  **Tags:** wordpress, css
  
  > **Comments:**
  > **username_1**: Some screenshots would be helpful.  
  > **username_0**: Fair. In  my trawling, I found this issue which describes the same problem.  https://civicrm.stackexchange.com/questions/16433/contribution-form-looks-different-on-live-site?rq=1  It has screen shots.  
  > **username_0**: 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.  
  > **username_1**: 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.  
  > **username_2**: Possible duplicate of [Contribution form looks different on live site](https://civicrm.stackexchange.com/questions/16433/contribution-form-looks-different-on-live-site)  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_3 on 2017-12-06. Score: 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.
  
  
  ---
  
  