Answers.Body: <p>You can use the <code>body_class</code> filter, query CiviCRM's state and then add suitably named classes:</p>
  
  <pre><code>add_filter( 'body_class', 'my_civi_add_body_classes' );
  
  /**
   * Add classes to body element if on CiviCRM basepage.
   *
   * @param array $classes The existing body classes
   * @return array $classes The modified body classes
   */
  function my_civi_add_body_classes( $classes ) {
  
      // bail if no CiviCRM
      if ( ! function_exists( 'civi_wp' ) ) {
          return $classes;
      }
  
      // bail if not on CiviCRM's basepage
      if ( 'basepage' != civi_wp()-&gt;civicrm_context_get() ) {
          return $classes;
      }
  
      // get CiviCRM's arguments
      $args = civi_wp()-&gt;get_request_args();
  
      // bail if we don't have any
      if ( is_null( $args['argString'] ) ) {
          return $classes;
      }
  
      // check for event
      if ( isset( $args['args'][1] ) AND $args['args'][1] == 'event' ) {
          $classes[] = 'civi-event';
      }
  
      // check for listing
      if ( isset( $args['args'][2] ) AND $args['args'][2] == 'ical' ) {
          $classes[] = 'civi-event-list';
      }
  
      // check for info page
      if ( isset( $args['args'][2] ) AND $args['args'][2] == 'info' ) {
          $classes[] = 'civi-event-info';
      }
  
      // check for registration
      if ( isset( $args['args'][2] ) AND $args['args'][2] == 'registration' ) {
          $classes[] = 'civi-event-registration';
      }
  
      // ... add further checks ...
  
      return $classes;
  
  }
  </code></pre>
  
  <p>Amend as per your requirements.</p>
  
  <p>Cheers, Christian</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-03T05:24:33.980Z
Answers.Text: Thanks mate. I've been too busy troubleshooting a primary issue to try this out but it looks promising.
  
  Would I include this in my theme's functions.php file?
Answers.UserDisplayName: Evan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-04T11:43:37.213Z
Answers.Text: Yes, in functions.php or a custom plugin.
Answers.UserDisplayName: Christian Wach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-04T11:45:56.723Z
Answers.Text: It's such a sensible request that I'm going to create a PR to include this on the CiviCRM plugin itself :-)
Answers.UserDisplayName: Christian Wach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-08T19:48:08.230Z
Answers.Text: Evan, descriptive classes for all CiviCRM pseudo-pages rendered on the WordPress basepage will be in core as of CiviCRM 4.7.18. See https://github.com/civicrm/civicrm-wordpress/pull/111
Answers.UserDisplayName: Christian Wach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-15T22:33:53.537Z
Answers.Text: Christian,
  
  Thank you so much. I feel guilty not getting to play with your suggestion. Because this design edit is much less a priority for my work right now, but I do appreciate you keeping me in the loop.
Answers.UserDisplayName: Evan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T13:43:12.017Z
Answers.LastActivityDate: 2017-02-27T13:43:12.017Z
Answers.UserDisplayName: Christian Wach
Body: <p>I'll be referencing the HTML created by Wordpress, CiviCRM, and possibly the Pinboard theme.</p>
  
  <p>I was looking to restyle event pages (only) and began with the page with all events: <em>/civicrm/?page=CiviCRM&amp;q=civicrm/event/ical&amp;reset=1&amp;list=1&amp;html=1</em></p>
  
  <p>This page, including individual events, and other public-facing pages created by CiviCRM have little to nothing in ways of identifying the page by unique IDs or descriptive Classes, especially at the very top of the parent hierarchy.</p>
  
  <p>It seems that every page has the same way of identifying CiviCRM's body (For me it's the class page-id-4412), is useful to select every CiviCRM page. As we continue down, we notice there is a general but clear CiviCRM class and ID beyond the initial page's header:</p>
  
  <pre><code>&lt;div id="crm-container" class="crm-container crm-public" lang="en" xml:lang="en"&gt;
  </code></pre>
  
  <p>There is two problems I am having with this:</p>
  
  <ol>
  <li>It has nothing specific to the <em>type</em> of CiviCRM page it is. ie. is it a contribution page? Event page? etc.</li>
  <li>It is well past parent elements in the page that CiviCRM is using. ie. the header: <code>&lt;header class="entry-header"&gt;</code></li>
  </ol>
  
  <p>Has anyone found a way to select content using clearly marked IDs or Classes this early in the HTML?</p>
  
  <p>For instance, to change the styling of the header between the Event list page and individual event pages appears to me to be impossible by css alone.</p>
  
  <p>To select,
  <code>&lt;header class="entry-header"&gt;
  &lt;h1 class="entry-title"&gt;</code></p>
  
  <p>This does fall under the page-id-#### ID and class, but nothing specific to the type of CiviCRM page. There would need to be something more specific in the class like,</p>
  
  <pre><code>&lt;body class="crm-individual-event"&gt;
  &lt;body class="crm-event-list"&gt;
  &lt;body class="crm-individual-contribution"
  </code></pre>
  
  <p>If you know a workaround, I'd love to hear it.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-02-25T10:27:42.470Z
Comments.Text: This can be done in Drupal's theme preprocessing, with reference both to the Drupal path (which Drupal does know about there) and relevant variables from `$_GET` (if you detect you're in a CiviCRM contribution page).
Comments.UserDisplayName: Chris Burgess
Tags: <wordpress><css><html>
Title: HTML & Event Pages: Unspecific IDs and Classes at the top
ThreadText: # HTML & Event Pages: Unspecific IDs and Classes at the top
  
  (Asked by: username_0 on 2017-02-24)
  
  I'll be referencing the HTML created by Wordpress, CiviCRM, and possibly the Pinboard theme.
  
  I was looking to restyle event pages (only) and began with the page with all events: */civicrm/?page=CiviCRM&q=civicrm/event/ical&reset=1&list=1&html=1*
  
  This page, including individual events, and other public-facing pages created by CiviCRM have little to nothing in ways of identifying the page by unique IDs or descriptive Classes, especially at the very top of the parent hierarchy.
  
  It seems that every page has the same way of identifying CiviCRM's body (For me it's the class page-id-4412), is useful to select every CiviCRM page. As we continue down, we notice there is a general but clear CiviCRM class and ID beyond the initial page's header:
  
  ```
  <div id="crm-container" class="crm-container crm-public" lang="en" xml:lang="en">
  
  ```
  
  There is two problems I am having with this:
  
  1. It has nothing specific to the *type* of CiviCRM page it is. ie. is it a contribution page? Event page? etc.
  2. It is well past parent elements in the page that CiviCRM is using. ie. the header: `<header class="entry-header">`
  
  Has anyone found a way to select content using clearly marked IDs or Classes this early in the HTML?
  
  For instance, to change the styling of the header between the Event list page and individual event pages appears to me to be impossible by css alone.
  
  To select,
  `<header class="entry-header">
  <h1 class="entry-title">`
  
  This does fall under the page-id-#### ID and class, but nothing specific to the type of CiviCRM page. There would need to be something more specific in the class like,
  
  ```
  <body class="crm-individual-event">
  <body class="crm-event-list">
  <body class="crm-individual-contribution"
  
  ```
  
  If you know a workaround, I'd love to hear it.
  
  **Tags:** wordpress, css, html
  
  > **Comments:**
  > **username_1**: This can be done in Drupal's theme preprocessing, with reference both to the Drupal path (which Drupal does know about there) and relevant variables from `$_GET` (if you detect you're in a CiviCRM contribution page).  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2017-02-27. Score: 2 | Accepted answer
  
  You can use the `body_class` filter, query CiviCRM's state and then add suitably named classes:
  
  ```
  add_filter( 'body_class', 'my_civi_add_body_classes' );
  
  /**
   * Add classes to body element if on CiviCRM basepage.
   *
   * @param array $classes The existing body classes
   * @return array $classes The modified body classes
   */
  function my_civi_add_body_classes( $classes ) {
  
      // bail if no CiviCRM
      if ( ! function_exists( 'civi_wp' ) ) {
          return $classes;
      }
  
      // bail if not on CiviCRM's basepage
      if ( 'basepage' != civi_wp()->civicrm_context_get() ) {
          return $classes;
      }
  
      // get CiviCRM's arguments
      $args = civi_wp()->get_request_args();
  
      // bail if we don't have any
      if ( is_null( $args['argString'] ) ) {
          return $classes;
      }
  
      // check for event
      if ( isset( $args['args'][1] ) AND $args['args'][1] == 'event' ) {
          $classes[] = 'civi-event';
      }
  
      // check for listing
      if ( isset( $args['args'][2] ) AND $args['args'][2] == 'ical' ) {
          $classes[] = 'civi-event-list';
      }
  
      // check for info page
      if ( isset( $args['args'][2] ) AND $args['args'][2] == 'info' ) {
          $classes[] = 'civi-event-info';
      }
  
      // check for registration
      if ( isset( $args['args'][2] ) AND $args['args'][2] == 'registration' ) {
          $classes[] = 'civi-event-registration';
      }
  
      // ... add further checks ...
  
      return $classes;
  
  }
  
  ```
  
  Amend as per your requirements.
  
  Cheers, username_2
  
  > **Comments:**
  > **username_0**: Thanks mate. I've been too busy troubleshooting a primary issue to try this out but it looks promising.  Would I include this in my theme's functions.php file?  
  > **username_2**: Yes, in functions.php or a custom plugin.  
  > **username_2**: It's such a sensible request that I'm going to create a PR to include this on the CiviCRM plugin itself :-)  
  > **username_2**: username_0, descriptive classes for all CiviCRM pseudo-pages rendered on the WordPress basepage will be in core as of CiviCRM 4.7.18. See https://github.com/civicrm/civicrm-wordpress/pull/111  
  > **username_0**: username_2,  Thank you so much. I feel guilty not getting to play with your suggestion. Because this design edit is much less a priority for my work right now, but I do appreciate you keeping me in the loop.  
  
  ---
  
  