Table of Contents
Bootstrap3: Customizations
Customize the theme
To customize the theme, edit your conf/userstyle.css
(or userall.css
).
Bootstrap3 theme provides a special class and attribute in <body/>
tag to identify the current theme and current page or namespace.
Styling the theme
/** Vanilla Bootstrap Theme */ body.default .page-header { font-weight: 900; } /** Optional Bootstrap Theme */ body.optional .img-responsive { display: inline-block; } /** Custom Bootstrap Theme */ body.custom .btn-success { background-color: green; } /** Lumen - Bootswatch.com theme */ body.lumen .navbar-default { background-color: red; }
Styling the page or namespace
/** Single page (eg. "wiki:syntax") */ body[data-page-id="wiki:syntax"] { background-color: green; } /** Namespace (eg. "wiki:*") */ body[data-page-id^="wiki:"] { background-color: red; }
For more information see Mozilla Developer Network - Attribute selectors.
Change the logo and favicon
The Logo, Favicon and Apple Touch (bookmark) icons are referenced from multiple locations. The default icons (DokuWiki logo) provided by the template can easily be changed by uploading new image files to the given locations using the Media Manager popup or Fullscreen Media Manager.
The site's logo
:wiki:logo.png
:logo.png
The favicon
:wiki:favicon.ico
:favicon.ico
The bookmark icon used by Apple and Android devices
:wiki:apple-touch-icon.png
:apple-touch-icon.png
Namespaced theme
Since v2016-12-12 release it's possible use different Bootstrap theme for namespace. To enable this feature enable themeByNamespace
option and create bootstrap3.themes.conf
configuration file in your DOKU_CONF
directory:
NOTE: To manage bootstrap3.themes.conf
configuration file from DokuWiki use advanced plugin.
ns:page theme
Example:
wiki default wiki:syntax optional playground bootswatch/yeti