Tinderbox Forum

HTML template to mimic an outline with children not having the titles in bold in PREVIEW

Need a nudge here

What am I trying to do?
I have a folder structure that I want to apply a template to the children so that in Preview it looks more like an outline. By default, all titles of the children are bolded and not indented in Preview.
I would like the children of the Title to be NON bolded and I guess a third template to mimic an outline.

My goal is not so much exporting, but rather Previewing

In the text of my top level note I have created something like what I want to see in the children.

Thoughts?

Thanks in advance,
Tom

Outline with non bold type.tbx (88.8 KB)

Several different strands here. Firstly a styling CSS point. In preview the note “Second level” isn’t bolded, it’s styled as a heading level 2 (<h2>) by Tinderbox using the build in styles in the build-in Apple webkit framework. so you not only need to have some feel for how styles are applied but where they are set.

If going down this road, always take a look at the export tab. The preview tab only tells you it looks wrong. the export tab tells you why it’s wrong:

Indeed, if trying to learn CSS, export you pages and look at them there as (in any modern web browser) right-clicking on an element (some text, a heading, etc.) and using “Inspect element” the browser will show you (cleaned-up) HTML source and the CSS cascade applied to it.

CSS uses an inheritance model similar to that you know from Tinderbox. so a a web browser may have a built-in (i.e. Tinderbox doc-level) default style but you can set it to a different style either in a particular element (i.e. this <h2> is styled differently to all other <h2>) or somewhere in-between (only <h2> in this branch of the outline are stored differently.

If you want to understand CSS, don’t include Markdown code at this point as it muddies the water. Markdown is/was simple a way of indicating (to a Markdown-capable parser) HTML—but not CSS—element mark-up. So, here in the forum’s Markdown-powered edit box, if you type:

**hello**

It is simply a way of not having to not type:

<b>hello</b>

Some people find Markdown less scary the output is still HTML.

The concept of CSS uses inheritance. So, here ‘cascading’ == ‘inheriting’ and if you’re comfortable with Tinderbox attribute inheritances and recursing templates (e.g. the built-in template “HTML item”) than you already understand the key parts.

These days, CSS is very capable and expressive whilst still delivering on the concept of divorcing the visual styling/layout of a page from the HTML structure. Indeed, to get CSS working as expected, you’ll learn (if necessary) to write cleaner HTML code. I mention that because, in the early web the folk designing browsers realised most of us had little understanding or love for code. Thus web browsers are very forgiving of formal errors in out code (not closing tags, not nesting tags coherently, etc.). So, we easily acquire the habit of writing ‘bad’ HTML code that works just fine.

Back to your post. You asked for a render like:

Outline with non bold type.tbx 2022-04-10 14-15-23

How about this (preview pane grab):

Outline with non bold type.tbx 2022-04-10 14-19-26

Apart form vertical spacing of the bullets, it’s what you asked for. Of course, when you see the code (TBX is below) it may not be achieved how you imagined. As with Tinderbox action code there’ often more than one solution and indeed no single ‘most correct’ solution.

Last tip, if you want to learn CSS, export you pages and inspect the code in a web browsers code inspection tools. As they include—for free—really good tools to see how the CSS is working. And, within Tinderbox, the export pane tells you far more that the previews pane. Using the latter alone, you’ll like the client telling the decorator they wall isn’t the right colour without any actionable info as to to what the right colour might be. Happily, CSS is all written/stored in plain text (with remarkably little code-affecting syntax) and massively written about online so there are tutorials to suit all sorts of learing styles.

Look at your ‘Top level’ note in this TBX:

Outline with non bold type2.tbx (105.5 KB)

1 Like

@mwra , as always, an excellent explanation.

I think there are good reasons, when not compelled otherwise, to represent lists as HTML lists.

<ul>
    <li>1 
    <ul>
         <li> 1.1 </li>
         <li> 1.1 </li>
    </ul>
</ul>

In this case, a stylesheet can easily embolden top-level item, and so forth.

1 Like

@TomD the list generation code is part of one of the many templates I’ve provided in the file last week. We can review it next week if you’d like.

1 Like