3

We use wordpress and CiviCRM. Profiles on registration forms and the likes seem to be formatted weirdly. Most forms I see used on the interwebs are stacked, meaning label is above field which makes for great responsive forms.

Using wordpress, should we create a custom stylesheet for CiviCRM, should we inject some custom CSS? What is the best approach?

Here is how profiles appear on mobile on our website in mobile:

enter image description here

1 Answer 1

3

There is a wordpress plugin called "CiviCRM Admin Utilities". There you can graphically prevent the native civicrm stylesheets from loading (civicrm.css, civicrmNavigation.css, and possibly custom civicrm stylesheets you defined yourself).

Then your site's theme css will mostly take over styling, which should be the best option for site uniformity. In most themes the label should then appear above the input field. Most likely you need to put some finishing touches by defining "additional css" in your wordpress theme (last item in the "Customize" menu in any wordpress theme when visiting the site while logged in). These changes will but survive theme updates, but you have to copy & maybe adapt the additional css when changing themes.

Alternatively, you can define a custom stylesheet for civicrm from scratch to match with your site:

  1. create .css document
  2. load it up to your server
  3. add the path in administration --> system settings --> ressource URLs

For large styling efforts, you should probably deactivate the native civicrm.css document - this can be done in the ressource URL page as well.

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.