[orgmode]What about CSS for TOC (table of contents)?

[touxstone]

Hi, I was trying with some themes (e.g. hyde) but happening also with others so I miss CSS rules for toc. Would anyone know to give a clue about where to make changes so shown toc per instance with the ruling below:

    /* ToC */
    #toc {
    float: right;
    padding: 0 1rem 1rem 1rem;
    border-left: 1px solid #eee;
    font-size: 0.9rem;
   }
    nav#TableOfContents li {
    padding-bottom: 0.25rem;
   }
   .toc-label {
    font-size: 0.8rem;
    color: #aeaeae;
    }

[Kwpolska]

Could you clarify your question? What are you having issues with?

[touxstone]

No issues if you are not in need of dealing with the ToC, table of contents (easy when your post is strictly short although I do like playing (by subdividing the main idea into components when writing) with subtitles anyway) so I would like to have the option of giving some CSS style to toc as those elements are already produced when working in org-mode (as outline-n or outline-container-class-n).
My question was about clues on how-to pairing those outline-classes with their class-names in Nikola and enhancing the Nikola org-mode plugin giving the option (if the Nikola theme you were using allows it, of course) so they appear somewhere in the page when your post got rendered.

[Kwpolska]

Your question is still not clear to me. How much of it is orgmode-specific? Do you need orgmode to generate anything special for Nikola? Or are just asking about where to put extra CSS? (files/assets/css/custom.css)

[touxstone]

(ok, reformulating) my question is how-to css style the table of contents of your org-mode post in Nikola. Ps. I tried it by pasting the above css script in my theme css file (also by making of it the content of a file called custom.css (found out about this latter by reading the base_helper.tmpl file) with no sucess.

[Kwpolska]

Your CSS does not seem to match what orgmode outputs. Please check the HTML of your orgmode export and adjust the CSS accordingly.

    <div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#org063f4a5">foo</a></li>
<li>
<a href="#orgda359a2">bar</a>
<ul>
<li><a href="#orge24a828">baz</a></li>
</ul>
</li>
</ul>
</div>
</div>

[touxstone]

Ah, okay, it's true, it should have been called something like table-of-contents rather than toc shouldn't it? Same with the next one though those rules were an example regarding its location on the page only. Anyway, yep, it should be corrected. But (also) I found that the init.el script of the plugin itself it's set to allow NOT |nil to export the table of contents,

    (setq org-export-with-toc nil)

or, please consider having a look at the following line

[Kwpolska]

Ah, okay, it's true, it should have been called something like table-of-contents rather than toc shouldn't it?

Where did you get the CSS snippet from? It might be relevant to some other markup format, or some other implementation.

But (also) I found that the init.el script of the plugin itself it's set to allow NOT |nil to export the table of contents,

https://orgmode.org/manual/Table-of-Contents.html

You can override this in any post.

[touxstone]

Where did you get the CSS snippet from? It might be relevant to some other markup format, or some other implementation

I liked a blog that using a Nikola theme (I thought it was hyde, a theme I was interested in) showed the table of contents at the top right area (though afterward, I found out that despite going about installing Nikola the post theme itself was really powered by another template engine (Hugo) so happened I couldn't (and I cannot still) replicate the style for the toc at will.