2

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

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

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

Improve this question
6
  • 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.
    – William Mortada
    Dec 28, 2016 at 18:25
  • 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?
    – Tee Strong
    Dec 29, 2016 at 20:33
  • 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.
    – William Mortada
    Dec 30, 2016 at 9:07
  • 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.
    – Tee Strong
    Dec 30, 2016 at 15:08
  • Yes, that looks like a CSS issue. Are you able to edit/override the CSS in your template? Or could you choose another template?
    – William Mortada
    Jan 3, 2017 at 14:37

2 Answers 2

Reset to default
2

I edited the custom CSS in the template with some code to change the form label color to black.

Improve this answer
1
  • 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.
    – William Mortada
    Jan 4, 2017 at 10:01
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.

Improve this answer

Your Answer

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

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