0

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.

Improve this question
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). – Chris Burgess Feb 25 '17 at 10:27
2

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, Christian

Improve this answer
5
  • 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? – Evan Mar 3 '17 at 5:24
  • 1
    Yes, in functions.php or a custom plugin. – Christian Wach Mar 4 '17 at 11:43
  • 1
    It's such a sensible request that I'm going to create a PR to include this on the CiviCRM plugin itself :-) – Christian Wach Mar 4 '17 at 11:45
  • 1
    Evan, descriptive classes for all CiviCRM pseudo-pages rendered on the WordPress basepage will be in core as of CiviCRM 4.7.18. See github.com/civicrm/civicrm-wordpress/pull/111 – Christian Wach Mar 8 '17 at 19:48
  • 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. – Evan Mar 15 '17 at 22:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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