Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2019-04-25 12:23:35

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,453
Website

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

uli wrote #317770:

Julian, imagine, with all these limitations: yes, pure JS is possible! Though not jQ. (And all I ever coded was jQ.) Will do a research later on.

Then have a look here and here. I’ve only cursorily looked at those links but they look promising.


TXP Builders – finely-crafted code, design and txp

Offline

#12 2019-04-26 17:40:31

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,261
Website

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

I tried to find a solution. The only one is to wrap each block within a div

So, in Markdown syntax:

<div markdown="0">

## Test

Item

Item Last

<div markdown="0">

## Test

Item

Item

Item Last

<div markdown="0">


## Test

Item

Item

Item

Item Last

The CSS:

h2 ~ p:nth-last-of-type(1) {
	color: red
}

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,205

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

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,453
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

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,205

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

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,205

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

Offline

Board footer

Powered by FluxBB