Archived topic

CPT content layout + adding css class

3 replies · Started by Morgan on July 23, 2019

Viewing posts 1–4 of 4

July 23, 2019 at 2:43 am #964809

Wondering if you can suggest a simple way to achieve the below.

I'm using plugin Helpie FAQ, which creates CPT FAQ pages, pages which appear in a JS accordion faq list, and search results.

It seems stable and simple enough, yet there are no unique CSS classes in the pages it creates.

Things I've done to try and distinguish the FAQ pages from others:

I tried adding inline CSS to titles <p class="ttl-faq">FAQ;</p>, so I could style then hide ttl-faq in accordion, but this breaks layout (although FAQ:<br /> in ttl works).
I tried adding a featured image to each, png of text "FAQ" (mainly coz archive layout breaks without one, see below), yet too much time + css spent to display correctly on Search pages (https://storyclusters.com/?s=video) + FAQ Page itself (https://storyclusters.com/helpie_faq/do-i-write-my-own-script/#more-22040.
Also looked into https://wordpress.stackexchange.com/questions/64115/adding-a-custom-css-class-to-post, but seems way to complicated for what I need, and I'd be altering the plugin right/breaking updates? Thought maybe simpler with GP Hooks?

I'm probably approaching this all wrong, and hoping someone could suggest a simple fix?

Also, the Archive layout David helped with breaks anything without a featured image (bcoz .inside-article .entry-header { top: -137px; margin-bottom: -137px;}), which includes these FAQ pages, can I change/add CSS to adjust anything without a featured image?

July 23, 2019 at 9:52 am #965241

Hi there,

Do you know which pages you're targeting exactly? The <body> element has a unique class for each page with its ID, so you can use that to style things for specific pages only.

Try this CSS instead:

.inside-article .post-image + .entry-header {
    top: -137px;
    margin-bottom: -137px;
}

July 25, 2019 at 12:04 am #966629

EDIT: I should have said there ARE unique classes, but none for the featured image on the FAQ pages (which is the simplest way of achieving what I want).

But I've wrangled more css control of featured images on the Archive and individual FAQ Pages, which is ultimately simpler across myriad page sizes (instead of hiding feat imgs and further wrangling css).

An example page was listed above: https://storyclusters.com/helpie_faq/do-i-write-my-own-script/#more-22040.

July 25, 2019 at 9:22 am #967122

So if I wanted to target featured images within the FAQs template, I would do this:

.single-helpie_faq .featured-image

This archived topic is closed to new replies.

Start building better websites today.