0

If you set up a contribution page to accept recurring contributions, the label for this option on the page is "I want to contribute this amount FREQUENCY" where FREQUENCY is from the contribution page settings (e.g. every month). The "I want to contribute this amount" part is inside a label tag, while the "every month" is just plain text on the page, not inside any tags, so if a theme changes the label font, this looks terrible. There is also an extra space before "every month" so it looks like this "I want to contribute this amount every month".

Anyone know how to deal with this? The div that this text is all inside has class "content" which is used in other places, so not a great way to deal with this.

Improve this question

2 Answers 2

Reset to default
0

You can add some css for the label tag that copies the style of the other text. Some margin or padding css on the link tag will take care of the spacing issue. As to the div.content, just be more specific on your selection so it only styles the labels you want to style. You should be able to select deeper than the div.content for those labels Or you might have to start your selection all the way up at the specific page to keep it from impacting the rest of the site.

There is no way around it, you might have to make adjustments in the future if your theme changes (just like you said).

Improve this answer
10
  • Seems like I just have to set a style for the div, as the offending text is outside the label tags, so I can't address it that way. Good idea on the margin though, that fixed the spacing issue.
    – Lars SG
    Commented Dec 2, 2019 at 20:07
  • You can target the text itself no matter if it is in or outside the label tag. You can get deeper than the div to target the text.
    – Iowa Boy
    Commented Dec 2, 2019 at 21:41
  • I'm sorry, I'm not following. What I have is: <div class=content> <label>blah blah blah</label> every month </div> And I don't see how I can apply a style to "every month" without applying it to all text within div class=content.
    – Lars SG
    Commented Dec 3, 2019 at 19:54
  • There has to be some tag around the "every month" <p> or <h3> or something. The details where you have "blah blah blah" are what you are looking for. What is between every month and </div> ?
    – Iowa Boy
    Commented Dec 4, 2019 at 3:22
  • That's the problem. There literally is no tag between <div> and that text. It's <div class=content>[a label and input with their closing tags] every month</div>.
    – Lars SG
    Commented Dec 4, 2019 at 16:38
0

There is a new extension which makes improvements in this area

https://lab.civicrm.org/extensions/pricesetvisibility/tree/master

enter image description here

Improve this answer
3
  • sorry - realise you were specifically focussed on the 'monthly' rather than the amounts
    – petednz - fuzion ♦
    Commented Dec 18, 2019 at 23:47
  • What are you using for the look in the example above?
    – Lars SG
    Commented Dec 19, 2019 at 18:15
  • i assumed the extension was providing it
    – petednz - fuzion ♦
    Commented Dec 19, 2019 at 20:47

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.