Answers.Body: <p>There is a wordpress plugin called &quot;CiviCRM Admin Utilities&quot;. There you can graphically prevent the native civicrm stylesheets from loading (civicrm.css, civicrmNavigation.css, and possibly custom civicrm stylesheets you defined yourself).</p>
  <p>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 &quot;additional css&quot; in your wordpress theme (last item in the &quot;Customize&quot; menu in any wordpress theme when visiting the site while logged in). These changes will but survive theme updates, but you have to copy &amp; maybe adapt the additional css when changing themes.</p>
  <p>Alternatively, you can define a custom stylesheet for civicrm from scratch to match with your site:</p>
  <ol>
  <li>create .css document</li>
  <li>load it up to your server</li>
  <li>add the path in administration --&gt; system settings --&gt; ressource URLs</li>
  </ol>
  <p>For large styling efforts, you should probably deactivate the native civicrm.css document - this can be done in the ressource URL page as well.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-04-20T07:44:39.420Z
Answers.LastActivityDate: 2022-04-20T07:44:39.420Z
Answers.UserDisplayName: ajasper
Body: <p>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.</p>
  <p>Using wordpress, should we create a custom stylesheet for CiviCRM, should we inject some custom CSS? What is the best approach?</p>
  <p>Here is how profiles appear on mobile on our website in mobile:</p>
  <p><a href="https://i.sstatic.net/k16RV.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/k16RV.png" alt="enter image description here" /></a></p>
  
Tags: <profile><css>
Title: How to style public profiles, forms, and registration pages?
ThreadText: # How to style public profiles, forms, and registration pages?
  
  (Asked by: username_0 on 2022-04-19)
  
  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](https://i.sstatic.net/k16RV.png)](https://i.sstatic.net/k16RV.png)
  
  **Tags:** profile, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2022-04-20. Score: 3 | Accepted answer
  
  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.
  
  
  ---
  
  