Loading...
 
Skip to main content

The automatic table of content in a wiki page became unpractical

  • Tracker item actions
Trackers
Items
Status
Open
Subject
The automatic table of content in a wiki page became unpractical
Version
29.x
master
Category
  • Usability
  • Easy for Newbie Dev
Feature
Wiki (page view, edit, history, rename, etc)
Wiki Structure (book & table of content)
Resolution status
New
Submitted by
Bernard Sfez / Tiki Specialist
Volunteered to solve
joel.magene
Lastmod by
Ushindi Gedeon
Rating
(0)
Description

On a long wiki page with a lot of Headings (h1, h2, h3, etc) usage the automatic table of content (admin -> Wiki page) use to help navigating on the page as headings were styled.

H1: bigger/bolder than h2 bigger/bolder than H3, etc...

Now they all look the same and it is very hard to use on long pages.

Image

Solution
Workaround

My quick workaround:

Copy to clipboard
/* For autotoc in wiki pages */
/* Level 1 - Top level (h1) */
#autotoc > ul > li > a {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-primary-dark);
  padding: 0.6rem 0;
  display: block;
  border-left: 3px solid transparent;
  padding-left: 0.75rem;
  transition: all 0.2s ease;
}

#autotoc > ul > li > a:hover {
  color: var(--bs-primary);
  border-left-color: var(--bs-primary);
  background-color: var(--bs-light);
  text-decoration: none;
}

/* Level 2 - Second level (h2) */
#autotoc > ul > li > ul > li > a {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--bs-dark);
  padding: 0.45rem 0 0.45rem 1.25rem;
  display: block;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

#autotoc > ul > li > ul > li > a:hover {
  color: var(--bs-secondary-dark);
  border-left-color: var(--bs-secondary);
  text-decoration: none;
}

/* Level 3 - Third level (h3) */
#autotoc > ul > li > ul > li > ul > li > a {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--bs-gray-dark);
  padding: 0.35rem 0 0.35rem 2rem;
  display: block;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

#autotoc > ul > li > ul > li > ul > li > a:hover {
  color: var(--bs-secondary);
  border-left-color: var(--bs-secondary-light);
  text-decoration: none;
}

/* Level 4 - Fourth level (h4) */
#autotoc > ul > li > ul > li > ul > li > ul > li > a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--bs-gray);
  padding: 0.3rem 0 0.3rem 2.75rem;
  display: block;
  transition: all 0.2s ease;
}

#autotoc > ul > li > ul > li > ul > li > ul > li > a:hover {
  color: var(--bs-primary-light);
  text-decoration: none;
}

/* Active state */
#autotoc a.active {
  color: var(--bs-primary) !important;
  border-left-color: var(--bs-primary) !important;
  background-color: var(--bs-light);
  font-weight: 700 !important;
}
Importance
7
Easy to solve?
8
Priority
56
Demonstrate Bug on Tiki 19+
Demonstrate Bug (older Tiki versions)
Ticket ID
8906
Reviewed by Wishlist Team On
20 Jan 26 08:16 UTC
Created
Sunday 18 January, 2026 08:55:55 UTC
by Bernard Sfez / Tiki Specialist
LastModif
Tuesday 20 January, 2026 08:15:21 UTC


Show PHP error messages