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:
- It has nothing specific to the type of CiviCRM page it is. ie. is it a contribution page? Event page? etc.
- It is well past parent elements in the page that CiviCRM is using. ie. the 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.
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.