Textpattern CMS

#13 2019-04-27 13:52:00

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,304

Re: [CSS] Style the last paragraphs -- special case or mental block?

Thanks once again, Patrick! Writing HTML is something I don’t want to ask a person that isn’t used to. BTW, I could see your code is working on desktop, but when I brought it into the app it broke. So I think there’s some cut down version or flavour of Markdown implemented, e.g. I can’t use all possibilities of Markdown, strikethrough and underline come to mind, and all that seems left now is trying JS.

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#14 2019-04-27 18:20:57

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,596

Website

Re: [CSS] Style the last paragraphs -- special case or mental block?

uli wrote #317786:

… and all that seems left now is trying JS.

Try this:

// get all h2 headings
var headings = document.querySelectorAll("h2");
var prev = [];

// loop over headings
for (var i = 0; i < headings.length; i++) {
    // get previous sibling for each heading
    prev[i] = headings[i].previousElementSibling;

    // if there's a previous sibling and if it's a paragraph
    if (prev[i] && prev[i].matches("p")) {
        // give it a class name
        prev[i].classList.add("final-paragraph");
    }
}

with this CSS by way of example:

.final-paragraph::after,
p:last-of-type::after {
  content: "■";
  padding-left: .25rem;
  color: #f60;
}

which places an orange dot at the end of the final paragraph before an h2, and at the very end.

You can play around with that in this codepen (using your markdown code). It’s not entirely robust, for example, if your text happens to end with a bullet list instead of a paragraph, you may need to address that situation specifically or add extra js/css code.

---

TXP Builders – finely-crafted code, design and txp

#15 2019-04-28 10:12:19

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,304

Re: [CSS] Style the last paragraphs -- special case or mental block?

Julian, thank you very much! :)
I’ve just tried it and couldn’t make it work. But currently I have not enough time for checking why. I’ll try again later this evening. Thanks again, highly appreciated!

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#16 2019-04-28 16:33:00

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,304

Re: [CSS] Style the last paragraphs -- special case or mental block?

Julian, I’ve it working! :)) Phew! And actually with jQuery, which is better cause of all its capabilities and my ineptitude of writing vanilla JS.

My block was, I’ve not thought of putting the whole jQ plugin into the script.js file (which is how I did it now). I could only think of doing it the usual <script source="path"...> way, which isn’t possible here.

And I can compensate for the extra 65k of jQ by reducing the fontawesome symbols from 600k to just the ones I need at 22k on fontello.com.

Thanks for all your help!

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}