Tinderbox Training Video 35 - Publishing long-form CSS styled content with relative outline depth

Tinderbox Training Video - Publishing long-form CSS styled content with relative outline depth

Level Advanced
Published Date 3/13/21
Tags 4CKMEl, 4Cs of Knowledge Management and Exchange, Tinderbox, aTbRef, Export Code, Action Code, CSS, Contribute, Publishing
Video Length 21:29
Video URL Tinderbox Video - Publishing long-form CSS styled content with relative outline depth - YouTube
Example File TBX - L CSS Style Sheet and Outline Depth.tbx (552.4 KB)
Revision 1
TBX Version 8.9
Instructor Michael Becker
Acknowledgements Mark Anderson-@mwra

In this lesson, I explain how you can format and output long-form stylized content with Tinderbox. Moreover, I show you how, using various export templates, to apply the style you want to your output regardless of the position of the notes in your file. In other words, the styles will be applied to your notes based on their relative position to their parent, not their absolute position in the document. Finally, I provide a high-level overview of how you can use a mixed-method approach with your templates and transform some of your notes into bulleted lists and others into tables.

REMEMBER: In this lesson, I provide a high-level overview of employing a global variable attribute. In this example, given that we’re running calculations, this global variable needs to be a number. When I was first setting up for the demo I forgot this and had it set as a string, and the template would not work. It took me a good 20 minutes to realize the problem. So, if you copy these HTML templates into your own file, you need to remember the following: 1) copy the HTML templates, 2) copy the TBXConfigNote, 3) Create the global variable “$HeadingDepth”, aka attribute, in the TBXConfig Note, and make sure it is a number type, NOT a string. Finally, you may want to brush up on your CSS and HTML, I find https://www.w3schools.com/ to be a really useful resource for this (I use it all the time).

TBX - L Publishing long-form CSS styled content with relative outline depth

Reference Material

1 Like

Link added to main listing of videos :slight_smile:

1 Like

Michael, the link to the example file is not working.

I’ve fixed it.

1 Like


Thank you very much for this: it’s really helpful and I’ve just spent a happy couple of hours playing with it (in the context of the best way to get info from TBX into Scrivener — I’ll come back to that…)

First, just a couple of points:

I may be misunderstanding something, but I think the export code for tCSSOutline3 item needs to be tweaked very slightly. You have:


However, this scrunches the first couple of outline levels into H1:

If you change the code to:


(and change the tier 2 template to use tCSSOutline3Item) the hierarchy is respected

Sorry if I’ve misunderstood what’s going on!

Secondly, you say you can simply copy and paste into Word, but I think it’s worth pointing out that when you do that you lose a fair bit of information. In particular you lose the concept of Styles for heading etc and you’ll have to recreate them manually.

Instead, if you choose File > Export Selected Note, making sure that the extension is an html file, then you can open this file in directly in Word and then save it as .docx. The h1, h2 styles will have been converted into standard Heading 1, Heading 2 styles in Word (and will respect your formatting). This means that any further modification to the headings etc is much easier.

And that’s also where Scrivener comes in, because you can now Import and Split this document into Scrivener and you’ll get all your sections nicely imported in a hierarchy so you can work on it properly.

I came across your video while I was trying to find a way to export to Scrivener which both preserves text formatting (bold and italics and tables and bullet —but not numbered—lists) and gives a relatively easy way of splitting the document into constituent parts. You video was really helpful it understanding how it could work.

Again, forgive me if I’ve misunderstood parts of what you’re trying to do, but I thought some of this may be helpful for someone.



Re Word. @brookter, you are right that pasting from Tinderbox Preview doesn’t pass semantics such as headings. Why, because the preview is showing an RTF render of the HTML. It is the RTF styled test you get when you copy from the Preview tab. Exporting to HTML and opening the HTML file using Word will allow Word to read the HTML structure and map that to Word styles in addition to producing the visible on-screen styling.

1 Like

Yes, sorry, that was intentional for my appliation. Your suggested tweak works great.

Funny you bring this up. Mark and I were just talking about this. In my next video I’ve deviced an export Stamp that will address this exact issue.