DokuWiki

It's better when it's simple

User Tools

Site Tools


template:readthedokus

This is an old revision of the document!


Read the Dokus Template

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" unknown
  • 2022-07-31 "Igor" unknown
  • 2020-07-29 "Hogfather" yes

template "Read the Docs" flavored theme.

Last updated on
2021-09-10
Repository
Source

Similar to rtd_suterdev

Tagged with responsive, sidebar

This is a theme that mimics "Read the Docs". Featuring

  • “Read the Docs” appearance
  • Embedded foldable TOC in the sidebar
  • Auto generated “Previous”, “Next” buttons to follow the pages on the sidebar

Releases

20210917

  • Fixed showing two vertical scrollbars on the mobile pages.

20210910

  • Fixed the dynamic search result didn't show up.
  • Fixed style.ini referencing missing files.

Download and Install

Use the following URL to download this template:

Refer to template on how to install and use templates in Dokuwiki.

Sites using this Template

Template settings

These are template settings for this theme.

OptionDescription
Sidebar position“left” for left sidebar, “right” for right sidebar.

Template variables

These are some of the options on “Template Style Settings”.

OptionDescription
Site widthWidth of the whole content including the sidebar. By setting this value, the contents will be centered.
Content widthContent width. This is a maximum width so the actual size could be less than this value.
Side bar widthSidebar width.
Header heightHeader height. The theme puts padding on the top of the page according to this value.
Footer heightFooter height. the theme puts padding on the bottom of the page according to this value.
CSS breakpoint for smart phonesScreen size less than this value will be treated as a smartphone.
CSS breakpoint for tabletsScreen size less than this value will be treated as a tablet.

Notes

Use strong for captions, lists of links for items. Anything other than that won't be styled, so use your own styles for them.

E.g.

** Caption1 **
  * [[page1]]
  * [[page2]]
** Caption2 **
  * [[page3]]
  * [[page4]]

Previous/Next buttons

Previous/Next buttons follow Level1 links on the sidebar, picked up by using querySelector(“.aside > #sidebar > ul .level1 a”). The previous button on the first page will jump to root(/).

This theme doesn't have any links to the login page. Go directly to the login page by appending “&do=login” to the current URL.

Admonitions

This theme has “Read The Docs” style admonitions. To use them, wrap a content with a div that has a class “admonition” and a type.

E.g.

<html><div class="admonition note">
<p>Note!</p>
</div></html>

Types are:

  • danger
  • caution
  • note
  • tip

You can use “Wrap Plugin” to make it a bit simpler.

<WRAP admonition note>
Note!
</WRAP>

If you use the plugin, do not forget to add classes to the “noPrefix” plugin option otherwise admonitions will not be styled correctly. You need to add four types listed above and “admonition” to the option value.

OptionValueDescription
useheadingonBreadcrumbs on the page header looks nicer.

Customization

Using Font Awesome

This theme uses Font Awesome. The file is not included, so you need to include it in meta.html to make them visible.

Hide substitusions

The theme has minimum substitutions (for +/- buttons on TOC and a mobile menu button) and they are visible by default. To make them invisible, you need to add CSS below to userall.css. Otherwise, both Font Awesome and substitutions are shown at the same time.

#dw__toc .btn-expand img {
    display: none;
}
 
#btn-mobilemenu .icon-menu {
    display: none;
}

Using Google Fonts

Since the original “Read the Docs” theme uses Lato and Robot fonts, this theme also specifies them in font-family in the theme CSS. If you want to use these fonts, you can use Google Fonts. To use them, you need to import them in your meta.html.

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet'>

This theme supports a fixed header and footer. On the “Template Style Setting” page, enter a header height in the “Header height” option, a footer height in the “Footer height” option. The theme will add paddings according to those options on top for header, bottom for footer. You can put your own header/footer in “header.html”/“footer.html” in the “lib/tbl/readthedokus/” directory.

These values must be valid css values.

e.g. “50px”

2. Create header.html/footer.html

Create a file “header.html”/“footer.html” under (dokuwiki folder)/lib/tpl/readthedokus/.

Here is a sample header.html. This example also shows how to toggle a sidebar. Clicking the string “Header” toggles the sidebar.

<div onclick="toggleMenu();">Header</div>
<style>
header > div {
	background-color: khaki;
	position: fixed;
	height: 50px;
	left: 0;
	top: 0;
	right: 0;
}
</style>
<script>
function toggleMenu()
{
	dokus.toggleSidebar();
}
</script>

You might want to hide a mobile menu since both the sticky header and the mobile menu are displayed at the same time on mobile devices. To hide the mobile menu add below to CSS file (dokuwiki folder)/conf/userall.css

#mobileheader {
display: none;
}

Centering the content

To center the content, enter the content width in the “Site width” option on the “Template Style Settings”.

Include Hooks

The theme has some include-hooks.

+--------------------------------------------------+
|                       [1]                        |
+-------------+------------------------------------+
|    Title    | Docs > Page Title                  |
|(           )|                [6]                 |
|     [2]     | ---------------------------------- |
+-------------+                                    |
|     [3]     |                                    |
|             |                                    |
|             |                                    |
|             |                                    |
|             |                                    |
|             |                                    |
|             |                                    |
|             |                                    |
|             |                                    |
|     [4]     | <Previous                    Next> |
+-------------+                                    |
|     [5]     |                [7]                 |
+-------------+------------------------------------+
|                       [8]                        |
+--------------------------------------------------+


[1] ... header.html
[2] ... sidebarheader.html
[3] ... sidebartop.html
[4] ... sidebarbottom.html
[5] ... sidebarfooter.html
[6] ... pageheader.html
[7] ... pagefooter.html
[8] ... footer.html
template/readthedokus.1631841107.txt.gz · Last modified: 2021-09-17 03:11 by my17560

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki