Answers.Body: <p>I edited the custom CSS in the template with some code to change the form label color to black.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-04T10:01:50.910Z
Answers.Text: Glad you managed to sort this out.  Are you able to edit your answer to include the CSS that you used?  This could be helpful for other people in the same situation.
Answers.UserDisplayName: William Mortada
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-03T21:20:50.577Z
Answers.LastActivityDate: 2017-01-03T21:20:50.577Z
Answers.UserDisplayName: Tee Strong
Answers.Body: <p>In a similar situation (but in Drupal), I used the following code in [cms.root]/sites/default/files/custom_civicrm.css, which I created and referenced on the Settings - Resource URLs administration page in the Custom CSS URL field:</p>
  
  <pre><code>div.crm-container label {
    color: #333333;
    font-weight: normal;
    font-size: 1.2em;
  }
  .crm-container .crm-section .label {
    float: none;
  }
  </code></pre>
  
  <p>The CSS can obviously be changed to override any of the theme's or CiviCRMs standard CSS, which sometimes conflict with one another.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-12-06T03:28:15.563Z
Answers.LastActivityDate: 2017-12-06T03:28:15.563Z
Answers.UserDisplayName: Michael Collins
Body: <p>I'm using civicrm 4.7 on a 3.6.5 joomla site with the LT Charity Template. The field on my contribution page looks different from the page when I do a live preview. I researched the issue and I suspect it's a CSS issue? How do I get it to look like the live preview? What needs to be changed?</p>
  
  <p><a href="https://i.sstatic.net/H4Fyz.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/H4Fyz.png" alt="enter image description here"></a></p>
  
  <p>Here's the test-drive page but I see the labels are white which means that if they are white on the live site, with it's white background, they would not show.
  <a href="https://i.sstatic.net/ZBbrq.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZBbrq.png" alt="enter image description here"></a></p>
  
  <p>This is how I want the form to look for the live site like this picture of the profile form using the preview function in civicrm:</p>
  
  <p><a href="https://i.sstatic.net/zsWOk.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/zsWOk.png" alt="enter image description here"></a></p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-28T18:25:44.737Z
Comments.Text: Hi Tee, welcome to StackExchange!  Are you able to post a screenshot of the page when it is in preview and live to show what the problem is?  This would help people to answer your question.
Comments.UserDisplayName: William Mortada
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-29T20:33:23.787Z
Comments.Text: Hi William! I added the picture of the contribution form as it appears on my live site. As you can see the labels are not showing. Is this a CSS issue?
Comments.UserDisplayName: Tee Strong
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-30T09:07:10.213Z
Comments.Text: Thanks! Could you also add a screenshot of the preview so that we can see what you want it to look like. I'm not clear what the problem is.
Comments.UserDisplayName: William Mortada
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-30T15:08:05.700Z
Comments.Text: Hi William! I posted the test-drive page that shows within civcrm and i notices the labels are white. If this is the case, then it makes sense that they do not show on the live site.
Comments.UserDisplayName: Tee Strong
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-01-03T14:37:09.257Z
Comments.Text: Yes, that looks like a CSS issue.  Are you able to edit/override the CSS in your template?  Or could you choose another template?
Comments.UserDisplayName: William Mortada
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-01-03T21:20:36.613Z
Comments.Text: I edited the custom CSS in the template with some code to change the form label color to black.
Comments.UserDisplayName: Tee Strong
Tags: <civicontribute><forms><css>
Title: Contribution form looks different on live site
ThreadText: # Contribution form looks different on live site
  
  (Asked by: username_0 on 2016-12-28)
  
  I'm using civicrm 4.7 on a 3.6.5 joomla site with the LT Charity Template. The field on my contribution page looks different from the page when I do a live preview. I researched the issue and I suspect it's a CSS issue? How do I get it to look like the live preview? What needs to be changed?
  
  [![enter image description here](https://i.sstatic.net/H4Fyz.png)](https://i.sstatic.net/H4Fyz.png)
  
  Here's the test-drive page but I see the labels are white which means that if they are white on the live site, with it's white background, they would not show.
  [![enter image description here](https://i.sstatic.net/ZBbrq.png)](https://i.sstatic.net/ZBbrq.png)
  
  This is how I want the form to look for the live site like this picture of the profile form using the preview function in civicrm:
  
  [![enter image description here](https://i.sstatic.net/zsWOk.png)](https://i.sstatic.net/zsWOk.png)
  
  **Tags:** civicontribute, forms, css
  
  > **Comments:**
  > **username_1**: Hi Tee, welcome to StackExchange!  Are you able to post a screenshot of the page when it is in preview and live to show what the problem is?  This would help people to answer your question.  
  > **username_0**: Hi username_1! I added the picture of the contribution form as it appears on my live site. As you can see the labels are not showing. Is this a CSS issue?  
  > **username_1**: Thanks! Could you also add a screenshot of the preview so that we can see what you want it to look like. I'm not clear what the problem is.  
  > **username_0**: Hi username_1! I posted the test-drive page that shows within civcrm and i notices the labels are white. If this is the case, then it makes sense that they do not show on the live site.  
  > **username_1**: Yes, that looks like a CSS issue.  Are you able to edit/override the CSS in your template?  Or could you choose another template?  
  > **username_0**: I edited the custom CSS in the template with some code to change the form label color to black.  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_0 on 2017-01-03. Score: 2
  
  I edited the custom CSS in the template with some code to change the form label color to black.
  
  > **Comments:**
  > **username_1**: Glad you managed to sort this out.  Are you able to edit your answer to include the CSS that you used?  This could be helpful for other people in the same situation.  
  
  ---
  
  ### Answer by username_2 on 2017-12-06. Score: 1
  
  In a similar situation (but in Drupal), I used the following code in [cms.root]/sites/default/files/custom\_civicrm.css, which I created and referenced on the Settings - Resource URLs administration page in the Custom CSS URL field:
  
  ```
  div.crm-container label {
    color: #333333;
    font-weight: normal;
    font-size: 1.2em;
  }
  .crm-container .crm-section .label {
    float: none;
  }
  
  ```
  
  The CSS can obviously be changed to override any of the theme's or CiviCRMs standard CSS, which sometimes conflict with one another.
  
  
  ---
  
  