Wrap text around table of contents

Configuration/Setup
1

Hi all,
is it possible to customize the appearence of the TOC a little bit?

  1. I want to align it to the right side.
  2. I want to wrap the text around it.
2

You should be able to do this by using CSS, e.g. in MediaWiki:Common.css (Manual:CSS - MediaWiki).

The table of contents looks like this in HTML:

<div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading">
  <input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none" aria-label="...">
    <div class="toctitle" lang="de-x-formal" dir="ltr">
      <h2 id="mw-toc-heading">...</h2>
      <span class="toctogglespan">
        <label class="toctogglelabel" for="toctogglecheckbox"></label>
      </span>
    </div>
    <ul>
      <li class="toclevel-1 tocsection-1">
        <a href="#...">
          <span class="tocnumber">1</span>
          <span class="toctext">...</span>
        </a>
      </li>
      <li class="toclevel-1 tocsection-2">
        <a href="#...">
          <span class="tocnumber">2</span>
          <span class="toctext">...</span>
        </a>
      </li>
      <li class="toclevel-1 tocsection-3">
        <a href="#...">
          <span class="tocnumber">3</span>
          <span class="toctext">...</span>
        </a>
        <ul>
          <li class="toclevel-2 tocsection-4">
            <a href="#...">
              <span class="tocnumber">3.1</span>
              <span class="toctext">...</span>
            </a>
            <ul>
              <li class="toclevel-3 tocsection-5">
                <a href="#...">
                  <span class="tocnumber">3.1.1</span>
                  <span class="toctext">...</span>
                </a>
              </li>

So you should be able to change the styles using the #toc selector.

3

You can try to add this to your MediaWiki:Common.css

/* Right-align TOC */

#toc {float:right; margin-left: 2em; margin-bottom:2em}

/* Standard-align TOC for small screens*/

@media (max-width: 767px) {
    #toc {float:none; margin:0}
}

You just need to be aware that you cannot also right-align images, because they also float:right. Since both are in the same container, the images would be floated to the right of the TOC. I cannot find a solution, but maybe someone else has an idea.

4

Thanks for the responses. Finally I tried it with css and anyway the aligning to the right side worked. The text wrapping doesn’t seem to be necessary for the first.