Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2018-09-06 10:36:27

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: [solved] CSS Counters for nested lists and sections

Spoke too soon. With those rules I loose the counter-reset: section -1;, which is desired for making 00 on toc1. If I try to just add that to that selector as your rules are written. It doesn’t work.

I may have to go back to the previous rules and just hope I never need to go over 09. ;)

Offline

#14 2018-09-06 11:02:21

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

Re: [solved] CSS Counters for nested lists and sections

Destry wrote #313864:

Spoke too soon. With those rules I loose the counter-reset: section -1;, which is desired for making 00 on toc1.

Just add .toc1 { counter-reset: counter -1; } like I just did.


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

#15 2018-09-06 11:13:07

etc
Developer
Registered: 2010-11-11
Posts: 5,189
Website GitHub

Re: [solved] CSS Counters for nested lists and sections

Some examples of custom counter styles.

Offline

#16 2018-09-06 11:15:51

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

Re: [solved] CSS Counters for nested lists and sections

Destry, I just changed the classes use for more flexibility…
I would do it like so; ready for the uncertain future (it is…).

etc wrote #313866:

Some examples of custom counter styles.

Interesting, Thanks!


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

#17 2018-09-06 12:55:47

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: [solved] CSS Counters for nested lists and sections

NicolasGraph wrote #313865:

Just add .toc1 { counter-reset: counter -1; } like I just did.

Ah, there-in lied the problem, my typo (counter, not section).

etc wrote #313866:

Some examples of custom counter styles.

Nice reference. Thanks. That’s where the web should have taken me first.

Destry wrote #313855:

Now if I can figure out how to add a selector to the body element for that article only, I could do the same thing for the corresponding numbering on the article headers too.

Hmm… Maybe I could use the article ID as a dynamic class selector in the body element somehow (e.g. <body class=“a{id}”>. Then I could target that ID as a way to add CSS rules for those pages having ToCs? Kind of a hack, I guess, if it can even be done.

Offline

#18 2018-09-06 14:39:06

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,726
Website

Re: [solved] CSS Counters for nested lists and sections

Destry wrote #313868:

Hmm… Maybe I could use the article ID as a dynamic class selector in the body element somehow (e.g. <body class=“a{id}”>. Then I could target that ID as a way to add CSS rules for those pages having ToCs? Kind of a hack, I guess, if it can even be done.

Sure, you can:

<body class="a<txp:article_id />">

within a txp:article or txp:if_individual_article tag.

But maybe there’s a better way to identify when a page has a toc and then you could add a class like has-toc to your body tag? That would be more robust and more flexible.

If, for example, you output a form to generate your toc, maybe you can set a variable in that form, then further down the page test if that variable is set and if so add the class to the body tag. Or if body is impractical (because higher up) you could add the class to your main tag or article wrapper div which would suffice if you’re only targeting the headings in the ‘entry text’.


TXP Builders – finely-crafted code, design and txp

Offline

#19 2018-09-06 15:10:00

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: [solved] CSS Counters for nested lists and sections

jakob wrote #313869:

for example, you output a form to generate your toc, maybe you can set a variable in that form, then further down the page test if that variable is set and if so add the class to the body tag. Or if body is impractical (because higher up) you could add the class to your main tag or article wrapper div which would suffice if you’re only targeting the headings in the ‘entry text’.

That sounds like a good idea, if I understand your context correctly, if the different chapters/sections were individual articles and I was pulling them together as a ‘book’, per se, and using the counting rules to prefix and number them via their h1, h2, etc.

In this case, it’s just a single article and the ToC is pointing to the h2s and h3s of the article body. I admit I wouldn’t like adding a body selector for a site that was used for publishing a lot of articles, but this is just going to be a site with a few pages max (the work site), and only one with a ToC (the policies). I think I’ll give the cheap shot a try. ;)

Offline

#20 2018-09-06 15:48:25

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: [solved] CSS Counters for nested lists and sections

Hmm… I though maybe I could make the selector a conditional for when only that article was active, and use the <article> tag since that is the closest wrapping parent of the article…

<article<txp:article_custom><txp:if_article_id id="3">class="a<txp:article_id />"<txp:else /></txp:if_article_id></txp:article_custom>>

But nothing outputs where the tag complex is added. Probably the ol’ context thing again that always trips me up.

Anway, I’ve only got 8 sections to the page. I can easily write the numbers into the headers. I was really just trying to explore using the counters for headers, but, pfft. It’s already taking too much time/focus for such little in this case.

Offline

#21 2018-09-06 17:03:58

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,726
Website

Re: [solved] CSS Counters for nested lists and sections

If I’ve understood you correctly, you’re showing an individual article, so txp:article without the _custom would be fine? As long as that is outside your content, you can do:

<txp:article>
…
    <article class="a<txp:article_id />">
… 
        <txp:body />
…
    </article>
…
<txp:article>

or you replace that first article line with

<article class="<txp:if_article_id id="3">has-toc</txp:if_article_id>">

but, pfft. It’s already taking too much time/focus for such little in this case.

:-) That’s how it often is, I find. You’ll be pleased in the end, though.


TXP Builders – finely-crafted code, design and txp

Offline

#22 2018-09-06 17:11:32

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,090
Website GitHub Mastodon Twitter

Re: [solved] CSS Counters for nested lists and sections

Hi Destry,

Firstly, you need a space between id="3">class.
Also, I do not understand what you need to achieve with the code, but maybe the one below might steer you in the right direction

<article<txp:if_article_id id="3"> class="a3"</txp:if_article_id>>

This code is virtually the same as the one you posted as your code only checks for the article with id="3". I’m sure this is not what you are looking for though. If you can explain in a bit more detail, we will find a solution.

> Edit: Julian got it first:)

Last edited by colak (2018-09-06 17:17:17)


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#23 2018-09-07 07:25:54

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: [solved] CSS Counters for nested lists and sections

Yeah, the element getting the tag was in my ‘opener’ and ‘closer’ page template forms (I use a nested forms model for template construction so only the article form is the article components specifically). For example they ended and began like this, respectively:

. . . <main><article>
</article></main> . . .

And I figured something like <article class="a<txp:article_id />"> would be easy enough, but instead of going straight to that, I started overthinking it as a conditional that wouldn’t output any class selector markup at all if it wasn’t the specific page I was interested in. Emphasis on overthinking it, which is the clumsy markup you see before. I always overthink Txp tags, which, I guess, is why I’m happily not a developer.

Anyway, I have it working now with Colak’s version now, which makes perfect sense.

Now I’ll fiddle with the final counter CSS to get the page content headings numbered, and this exercise is done.

jakob wrote #313875:

:-) That’s how it often is, I find. You’ll be pleased in the end, though.

Yeah… But I don’t know anymore. I used to be pleased with wrestling it out, but I’m finding I care less as time goes by. Just finding the desire to remain online is kind of a challenge. I think if I was only writing and editing I’d be happier, but the juggle act of having to build/design too is wearing me down, gets in the way. I appreciate the art of it, but it’s not how I want to spend my limited time anymore. I’m waning. Maybe I’m getting too old for this shit. I just want optimized paths to getting stuff done. But the alternative, some cookie cut design on a hosted platform, isn’t quite yet acceptable either. That desire for doing it yourself and having something unique for it is still strong enough to make me slog through it. But I don’t know for how much longer. I need to get these damn sites launched, though. That’s for sure.

Offline

#24 2018-09-07 16:33:05

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,726
Website

Re: [solved] CSS Counters for nested lists and sections

Destry wrote #313890:

Yeah… But I don’t know anymore. I used to be pleased with wrestling it out, but I’m finding I care less as time goes by. Just finding the desire to remain online is kind of a challenge. I think if I was only writing and editing I’d be happier, but the juggle act of having to build/design too is wearing me down, gets in the way. I appreciate the art of it, but it’s not how I want to spend my limited time anymore. I’m waning. Maybe I’m getting too old for this shit. I just want optimized paths to getting stuff done. But the alternative, some cookie cut design on a hosted platform, isn’t quite yet acceptable either. That desire for doing it yourself and having something unique for it is still strong enough to make me slog through it. But I don’t know for how much longer. I need to get these damn sites launched, though. That’s for sure.

I don’t know about the others, but if it’s any consolation, I certainly have those exasperated moments where I wonder what the hell I’m doing, why I’m still doing that thing that should have been so simple or why something ‘just won’t work’. And sometimes I do give up (especially plugin stuff) only to pick it up again later a few weeks/months down the line when something has finally twigged or I realise I’ve been overthinking it (just like you say). And sometimes the solution is much easier: I’ve been doing it right along, just refreshing the wrong browser window! God that makes you feel stupid! Time for a break.

I spend (like you I suspect) a lot of my day wrangling with text. I like my ‘day job’ but it’s predominantly a mental, intellectual activity and most of the time I only get to see the fruits of my labours many months later. Originally, however, I come from a design background so I find building, designing, making and tinkering with things like textpattern a complementary activity.

But there has to be time for other things too – and today was one of those days for me: we picked the apples from one of our trees and had them pressed into apple juice. Very manual, very straightforward, very down to earth and also very satisfying.


TXP Builders – finely-crafted code, design and txp

Offline

Board footer

Powered by FluxBB