Moving TOC? (TocTweak plugin or other)

hungup21

I have some pages with elements (infoboxes) in the upper right, which are conflicting with the default placement of the TOC. I have simply disabled the TOC up to now, but some pages have grown in length such that a TOC would be helpful.

I would like to move the TOC to a different location, preferably on the left side of the text like the old style of Wikipedia. I want to keep the look of the default TOC, as I am using the default template.

I have tried several plugins for this.

"TOC" plugin is not working on the latest version (https://www.dokuwiki.org/plugin:toc).

Inline TOC plugin is not working on the latest version (https://www.dokuwiki.org/plugin:inlinetoc).

I am unsatisfied with the look of tocselect plugin boxes (https://www.dokuwiki.org/plugin:tocselect).

TocTweak has been the most promising (https://www.dokuwiki.org/plugin:toctweak) but their "Inline TOC" differs in appearance to the default TOC. I can use it to insert a default-style TOC into the page, but I can't figure out how to left-align it. It seems it can only be right-aligned. Is anyone a user of this plugin that can help with this?

I tried TocTweak's sidebar TOC as an alternative but that also had other issues that I was not pleased with.

Chris75

hungup21 I would like to move the TOC to a different location, preferably on the left side

In /dokuwiki/conf/userall.css paste following code:

 div.float_left { 
     float: left !important; 
     margin-right: 0.5rem !important;
     margin-bottom: 1.5rem !important;
 }
 h1.toc_wrap, 
 h2.toc_wrap, 
 h3.toc_wrap:not(.toggle), 
 h4.toc_wrap, 
 h5.toc_wrap, 
 h6.toc_wrap { 
     display: inline-block !important; 
     max-width: 60% !important;
 }

In /dokuwiki/conf/userscript.js paste following code:

 if ( JSINFO['id'] == 'wiki:syntax' ) {
     setTimeout(function() {
         jQuery("div.dw__toc").addClass('float_left');
         jQuery("#dokuwiki__content").find("h1, h2, h3, h4, h5, h6").addClass('toc_wrap'); 
     }, 100);
 }

Those files are meant to be for user code and they are update save. However, if those files do not yet exist, just create them! It's up to you! The above code is page specific. You can add more pages to the if-statement like so:

 if ( JSINFO['id'] == 'wiki:syntax' || JSINFO['id'] == 'wiki:welcome' || JSINFO['id'] == 'wiki:dokuwiki' ) {
     ...
 }

Make sure to clear the cache (close and restart your browser). With Firefox you might also have to clear temporary internet files (cache) via the settings.

Cheers!

gerardnico

I got the same problem with the toc. Sometimes you want it and sometimes you won’t.

This is a layout problem as the layout should adapt to the content.

Dokuwiki has only one layout (called template) by default. You can create another dokuwiki template and choose it via a plugin but this is quite cumbersome.

This is for sure, not what you search but
I have resolved my problem in combo by incorporating a layout engine, making the toc a component of a layout.
https://combostrap.com/theme/what-is-a-template-z9tl87hg

Best of luck with your search.

hungup21

Chris75 Hi, this moves all TOCs to the left, doesn't it? I suppose my use case is more complicated. I will go with this if nothing else works, but I actually prefer the default location of the TOC and would like to keep it if there is no conflict. It is only for pages with other elements intended for the top-right that I would like to move it. A variable location?

Chris75

No, as I said, the above code is page specific. It means, that the TOC is only moved to the left for certain pages. ID's of the target pages have to be listed in the code. So like shown above, the TOC will be moved to the left on following pages:

wiki:syntax
wiki:welcome
wiki:dokuwiki

Everybody's got those pages. Try it out! It works.

sascha-leib

The ideal solution would be to have a page property (e.g. in the body tag) that contains the page ID, so the CSS could be targetted to only apply to specific pages, or only specific name-spaces.

Well, that's what my Ad Hominem template has. So if you installed it (I know, I know: shameless self-advertising here ;-) you can just write CSS like:
body[data-pageid=my:specific:page] #toc { float: right; }
(this is simplified, you probably also want to change the style, etc.)

The code to achieve this is trivial, and you could probably insert this manually into most other templates. Just add the following into the body tag code: data-pageid="<?php echo $ID; ?>"

I would consider creating a pull request for your favourite template, as this is probably helpful to others, too, and you don't want to re-patch this every time you update the template.

pop

sascha-leib The ideal solution would be to have a page property (e.g. in the body tag) that contains the page ID, so the CSS could be targetted to only apply to specific pages, or only specific name-spaces.

Can't you assign a class to the page body?

Chris75

sascha-leib The ideal solution would be to have a page property (e.g. in the body tag) that contains the page ID, so the CSS could be targetted to only apply to specific pages, or only specific name-spaces. [...] The code to achieve this is trivial, and you could probably insert this manually into most other templates. Just add the following into the body tag code:

data-pageid="<?php echo $ID; ?>"

I followed @sascha-leib's advice. However, in my template's main.php (sprintdoc template) I attached this tag to the div with id="dokuwiki__site". This is the div of the page content. It now looks as so:

<div id="dokuwiki__site" class="<?php echo tpl_classes(); ?>" data-pageid="<?php echo $ID; ?>">

If you tell me what template you're using, I can check this out for you.

Then you can modify your page elements (like your header <h1>) directly via /dokuwiki/conf/userall.css like so:

#dokuwiki__site[data-pageid="my:specific:page"] h1 { text-align: center; }

Cheers!

sascha-leib

I assume you mean using the page id as a class? There are some limitations for HTML5 class names, like the colon is not allowed, but also it must not start with a number, and some other specifics. So in order to use the ID as a class name, it would first have to be cleaned up and possibly modified in rather un-intuitive ways. It would be a hassle to get this right, and for no gain ... in fact, it would also create a hassle for the CSS, as you can't rely on the page ID to be the correct descriptor...

In addition, you can't reference partial class names, but you can do that for attributes. So for example, if you wanted some CSS that is applied to all pages within a specific namespace, you could write: body[data-pageid^=my:namespace:]…, or you could have some rule that only applies to specific page names, regardless of namespace (e.g.: body[data-pageid$=:start]…) and so on. It is much more flexible this way.

Not to mention that this also makes certain JS references much easier (in jQuery, you can just use the .data() function), but that is a different topic.

In short: the data attribute is certainly the cleaner solution here.

pop

@sascha-leib#87571 you mean using the page id as a class

Not quite. I thought that you could tag the body of each page with a class name where you want to apply your style sheet to place the TOC on the other side, rather than naming each page in the CSS.

sascha-leib

Hm, in principle, yes, but I reckon that would be much more complicated to pull off. Maybe with a Plugin that reads your page classes from some special tags ... I am sure that this should be possible, but I wouldn't actually know how to pull that off ...

It would have the advantage that you can select dispersed pages, that are not in a specific namespace, or have similar names. The disadvantage would be that re-assigning the styles would be a lot of manual work.

In any case, I'm not aware of a plugin that can provide this, but of course, I don't know all the plugins :-)

pop

Let's say this is the page where you want to control the position of your TOC:

<WRAP my_demo_toc></WRAP>
====== Private website. ======
===== having    friends. =====
===== und noch einer =====

  - item
  - item\\ {{:wiki:dokuwiki-128.png?nolink&200|}}
  - item

The rendered page will contain this sequence:

                  </div></div><!-- TOC START -->
<div id="dw__toc" class="my_dw__toc">
<h3 class="toggle">Inhaltsverzeichnis</h3>
<div>

which (in theory) should be recognizable with the selector .my_dw_toc ~ .toggle
I think.

sascha-leib

pop If this works will mostly depend on the template. If your template puts the TOC inside of the page content, then yes, this would work.

However, in all templates that I know (and admittedly, I don't know that many!) the TOC is outside of the page content wrapper, and then it will fail, because CSS can not reference classes that are not in the direct DOM hierarchy of the element to be rendered.

hungup21

Any solutions that don't require changing CSS (so my users can insert TOCs without me modifying a file) or templates that change the layout of my wiki?

Maybe modifying toctweak plugin could work..

Global DokuWiki Links