This is an old revision of the document!
Table of Contents
Bootstrap3 Template
Compatible with DokuWiki
Detritus, "Ponder Stibbons", Hrun, "Elenor of Tsort", "Frusterick Manners"
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
Needed for twistienav4bootstrap3
Highly customizable Bootstrap based template for DokuWiki.
This template is responsive and is designed for all devices (mobile, tablet, desktop, etc).
To complete the visual/user experience use my Bootstrap Wrapper and Icons plugins.
Features
- HTML5
- Responsive
- Bootstrap 3.x based template
- Different themes for namespaces or pages
- Glyphicons and FontAwesome icons
- AnchorJS support
- High customizable via the configuration manager
- Many html and DokuWiki hooks
- Sidebar support (left or right position)
- Right Sidebar support
- Many themes made from Bootswatch
- Theme switcher for Bootswatch.com themes
- Cookie Law Banner Notice
- Google Analytics integration
Includes
- All Bootswatch.com themes
- Glyphicons and FontAwesome icons
- Anchor.JS
See the visual tour.
Releases
Read the release note of template:
Plugin Integration
Requested Plugin Integration(s)
Localization
This template is available in:
- Chinese
- French
- German
- Hungarian
- Italian
- Japanese
- Korean
- Norwegian
- Polish
- Portuguese
- Portuguese (Brazil)
- Russian
- Slovak
- Spanish
Join on Transifex platform to translate this template in your favorite language.
Download and Install
Use the extension manager to install this template.
Refer to template on how to install and use templates in Dokuwiki.
Configurations
The template can be widely configured via the Configuration Manager or manually edit the <dokuwiki>/conf/local.php
file, including a line like:
$conf['tpl']['bootstrap3']['fluidContainerBtn'] = '1';
(This adds a button to turn on / off fluid layout. See the fluidContainerBtn option below.)
Theme
Option | Description | Default Value |
---|---|---|
bootstrapTheme | Bootstrap theme | default |
bootswatchTheme | Select a theme from Bootswatch.com | spacelab |
customTheme | Insert URL of custom theme | null |
showThemeSwitcher | Show Bootswatch.com theme switcher in navbar | 0 |
hideInThemeSwitcher | Hide themes in theme switcher | null |
useLocalBootswatch | Use the local Bootswatch directory. This option is useful in “intranet” DokuWiki installation | 1 |
themeByNamespace | Use a namespaced theme | 0 |
Sidebar
Option | Description | Default Value |
---|---|---|
sidebarPosition | DokuWiki Sidebar position (left or right ) | left |
rightSidebar | The Right Sidebar page name, empty field disables the right sidebar. The Right Sidebar is displayed only when the default DokuWiki sidebar is enabled and is on the left position (see the sidebarPosition configuration). If do you want only the DokuWiki sidebar on right position, set the sidebarPosition configuration with right value | rightsidebar |
leftSidebarGrid | Left sidebar grid classes col-{xs,sm,md,lg}-x (see Bootstrap Grids documentation) | col-sm-3 col-md-2 |
rightSidebarGrid | Right sidebar grid classes col-{xs,sm,md,lg}-x (see Bootstrap Grids documentation) | col-sm-3 col-md-2 |
sidebarOnNavbar | Display the sidebar contents inside the navbar | 0 |
sidebarShowPageTitle | Display Sidebar page title | 1 |
Navbar
Option | Description | Default Value |
---|---|---|
inverseNavbar | Inverse navbar | 0 |
fixedTopNavbar | Fix navbar to top | 0 |
showTranslation | Display translation toolbar (require Translation Plugin) | 0 |
showTools | Display Tools in navbar | always |
showHomePageLink | Display Home-Page link in navbar | 0 |
showUserHomeLink | Display User Home-Page link in navbar | 1 |
hideLoginLink | Hide the login button in navbar. This option is useful in “read-only” DokuWiki installations (eg. blog, personal website) | 0 |
showEditBtn | Display edit button in navbar | never |
individualTools | Split the Tools in individual menu in navbar | 0 |
showIndividualTool | Enable/Disable individual tool in navbar | user,site,page |
showSearchForm | Display Search form in navbar | always |
showSearchButton | Display search button in navbar | 1 |
showAdminMenu | Display Administration menu | 0 |
useLegacyNavbar | Use legacy and deprecated navbar.html hook (consider in the future to use the :navbar hook) | 0 |
showNavbar | Display navbar hook | always |
navbarLabels | Show/Hide individual label | login,register |
showAddNewPage | Enable the Add New Page plugin in navbar (require Add New Page Plugin) | never |
Semantic
Adds Schema.org markup to enable basic support for semantic data. For full support use the semantic plugin.
Option | Description | Default Value |
---|---|---|
semantic | Enable semantic data | 0 |
schemaOrgType | Schema.org type (Article , NewsArticle , TechArticle , BlogPosting , Recipe ) | Article |
showSemanticPopup | Display a popup with an extract of the page when the user hover on wikilink (require Semantic Plugin) | 0 |
Layout
Option | Description | Default Value |
---|---|---|
fluidContainer | Enable the fluid container (full-width of page) | 0 |
fluidContainerBtn | Display a button in navbar to expand container | 0 |
pageOnPanel | Enable the panel around the page | 1 |
tableFullWidth | Enable 100% full table width (Bootstrap default) | 1 |
tableStyle | Table style | striped,condensed,responsive |
showLandingPage | Enable the landing page (without a sidebar and the panel around the page) | 0 |
landingPages | Landing page name (insert a regex) | (intro) |
showPageTools | Enable the DokuWiki-style Page Tools | always |
pageToolsAnimation | Enable the Page Tools animation | 1 |
showPageId | Display the DokuWiki page name (pageId) on top | 1 |
showBadges | Show badge buttons (DokuWiki, Donate, etc) | 1 |
showLoginOnFooter | Display a “little” login link on footer. This option is useful when hideLoginLink is on | 0 |
useGravatar | Load Gravatar image | 0 |
TOC
Option | Description | Default Value |
---|---|---|
tocAffix | Affix the TOC during page scrolling | 1 |
tocCollapseSubSections | Collapse all sub-sections in TOC to save space | 1 |
tocPosition | TOC position | right |
tocCollapseOnScroll | Collapse TOC during page scrolling | 1 |
tocCollapsed | Collapse TOC on every pages | 0 |
Discussion
Option | Description | Default Value |
---|---|---|
showDiscussion | Display discussion link in tools menu | 0 |
discussionPage | Discussion page name (default is discussion:@ID@ , where @ID@ placeholder replace the current page name), empty field disable the link | discussion:@ID@ |
Cookie Law
Option | Description | Default Value |
---|---|---|
showCookieLawBanner | Display the Cookie Law banner on footer | 0 |
cookieLawBannerPage | Cookie Law banner page name | cookie:banner |
cookieLawPolicyPage | Cookie Law policy page name | cookie:policy |
The Cookie Law Banner Notice add a cookie called cookieNoticeAccepted
to use in your JavaScript/PHP code (eg. to add Google Analytics only when the user accept the policy).
JavaScript Snippet:
if (DokuCookie.getValue('cookieNoticeAccepted')) { // Your JS code (eg. in userscript.js or in 3th-party plugin) }
PHP Snippet:
if ( ! (get_doku_pref('cookieNoticeAccepted', null) || get_doku_pref('cookieNoticeAccepted', '')) ) { // Your PHP code (eg. in 3th-party plugin) }
Google Analytics
Option | Description | Default Value |
---|---|---|
useGoogleAnalytics | Enable Google Analytics | 0 |
googleAnalyticsTrackID | Tracking ID | null |
googleAnalyticsAnonymizeIP | Anonymize the IP address of visitors | 0 |
googleAnalyticsNoTrackAdmin | Disable tracking for the Admin users | 1 |
googleAnalyticsNoTrackUsers | Disable tracking for all logged users | 0 |
googleAnalyticsNoTrackPages | Disable tracking for specified pages (insert a regex) | null |
googleAnalyticsTrackActions | Track DokuWiki actions (edit, search, etc) | 0 |
Browser Title
Option | Description | Default Value |
---|---|---|
browserTitle | DokuWiki browser title (default is @TITLE@ [@WIKI@] , where @TITLE@ placeholder replace the current page title and @WIKI@ replace the DokuWiki name) - see title config | @TITLE@ [@WIKI@] |
browserTitleShowNS | Display the previous page name of current page on the browser title | 0 |
browserTitleCharSepNS | Character separator for every namespaces on browser title | - |
browserTitleOrderNS | Set the order of namespaces | normal |
Page
Option | Description | Default Value |
---|---|---|
showPageInfo | Show page info (e.g., date, author) | 1 |
useACL | Use ACL for sidebars (left and right) and for all DokuWiki hooks (eg. :footer , :navbar , etc.) <strong>NOTE:</strong> Available since “Elenor of Tsort” release | 0 |
pageInfo | Display/Hide page info elements | filename,extension,date,editor,locked |
pageInfoDateFormat | Date format | dformat |
showPageIcons | Display useful icons (print, share link, send mail, etc.) on page | 0 |
pageIcons | Select the icons to display | social-share,feed,send-mail,print,help |
socialShareProviders | Select the social share links to display | facebook,google-plus,linkedin,pinterest,whatsapp,twitter,telegram |
tagsOnTop | Move all Tags on top of the page, beside the page-id (require Tag Plugin) | 1 |
useAnchorJS | Use AnchorJS | 1 |
collapsibleSections | Collapse 2nd section level (useful in mobile devices) | 0 |
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:synax"] { 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
Available Hooks
HTML Hooks
All files must be located in the template directory (lib/tpl/bootstrap3/
) or your conf/
directory (upgrade-safe).
File Name | Position of included HTML |
---|---|
meta.html | Inside the HTML <head> , use this to add additional styles or metaheaders |
topheader.html | At the very top of the page right after the <body> tag |
header.html | Above the upper blue bar, below the pagename and wiki title |
navbar.html | DEPRECATED (see the note below) - Inside the navbar, use this to add additional links (e.g. <li><a href=“/foo”>Foo</a></li> ) |
pageheader.html | Below the breadcrumbs, above the actual content |
pagefooter.html | Above the lower blue bar, below the last changed Date |
footer.html | At the very end of the page just before the </body> tag |
sidebarheader.html | On top of the sidebar |
sidebarfooter.html | On bottom of the sidebar |
social.html | Below the header.html , use this to add a social buttons (eg. Google+, Twitter, LinkedIn, etc) |
rightsidebarheader.html | On top of the right sidebar |
rightsidebarfooter.html | On bottom of the right sidebar |
NOTE for navbar.html
This c10c048 commit introduced a new navbar hook (:navbar
). Please use this new hook, because the navbar.html
is deprecated and will be removed in the future release of template.
If you want to add only the Home-Page link, set the showHomePageLink
.
DokuWiki hooks
You can customize various parts of your page by creating simple DokuWiki “hook” pages. The bootstrap3 template will plug these page snippets contained in each of these custom pages into the overall layout of the page.
Page name | Description | Per namespaces |
---|---|---|
:sidebar | The sidebar | YES |
:rightsidebar | The right-sidebar | YES |
:navbar | Navbar with sub-menus | YES |
:pageheader | Header of the Wiki article | YES |
:pagefooter | Footer of the Wiki article | YES |
:footer | Footer of the page | YES |
:cookie:banner | Cookie-Law banner | NO |
:cookie:policy | Cookie-Law policy | NO |
:help | Help page for “Help Page Icon” | YES |
Navbar
This “hook” page is a standard DokuWiki page with an unordered-list of links (internal or external). The templating engine replaces the unordered-list with a menu bar with a dropdown-menu.
This is an example:
* [[:start|Home]] * DokuWiki * [[:wiki:welcome]] * [[:wiki:syntax]] * [[:wiki:dokuwiki]] * [[:playground:playground]] ~~NOCACHE~~
It is possible to create different navbars for every namespaces with the same behavior of sidebar page.
Sites using this Template
-
- Wiki of psiconauti.net
with much warm gratitude to the author of the template! - http://poorterweide.nl/
In Dutch only, based on the great bootstrap3 template, but further customized - http://telegram.wiki/
Unofficial Telegram Wiki, with customized Bootstrap3 Template - http://docs.selfcomposer.com/templating/doku.php
Selfcomposer documentation with customized Bootstrap3 Template
Visual Tour
Main Page | |
---|---|
Navbar | |
Navbar (mobile) | |
Personalized Navbar | |
Page Icons (Share with…, Feed, Send link via mail, Print and Help page) | |
Page Info (with Gravatar) | |
Table of Contents | |
Collapsed TOC | |
Tools Menu | |
Administration Menu | |
User Menu (with Gravatar) | |
User Menu with User Home-Page plugin | |
Tags Plugin | |
Translation Plugin |
Development
Releases
Change Log
Master Branch
- Bootstrap3 Template v2024-02-06 by giterlizzi (2024-02-06 18:50)
- Merge branch 'develop' by giterlizzi (2024-02-06 18:47)
- Fix typo in detail.php by giterlizzi (2024-02-06 18:43)
- Fix warnings by giterlizzi (2024-02-06 18:40)
- Merge branch 'ludenticus-patch-1' into develop by giterlizzi (2024-02-06 17:48)
Develop Branch
- Fix typo in detail.php by giterlizzi (2024-02-06 18:43)
- Fix warnings by giterlizzi (2024-02-06 18:40)
- Merge branch 'ludenticus-patch-1' into develop by giterlizzi (2024-02-06 17:48)
- Merge branch 'patch-1' of https://github.com/ludenticus/dokuwiki-temp… by giterlizzi (2024-02-06 17:48)
- Update template.less by ludenticus (2023-04-01 11:55)
Bugs / Feature Requests
Please report bugs or feature requests at the Bug tracker.
Known Bugs and Issues
ToDo/Wish List
FAQ
Discussion
I want to use the landingpage function. Can you briefly describe how I can use them. It is not clear what is meant by regex and where I have to take the page. Thank you
The landing page is a special page without a sidebar (left and right) and the panel around the content. The landing page is enabled when the current page matches with the doku pages stored in the config landingPages
. The default value is (intro)
but if you want enable other pages, insert the name with regex syntax. For example:
(intro|start)
, enable the landing pages for all “intro” and “start” pages of every namespaces
Thanks for the great template. What I like best that the toolbox is supported with Plugins. my page that I run here with the template: http://wiki.cigolla.ch
Is there a way to add H3, H4 and even H5 to the TOC? Currently only H1 and H2 is viewable in the TOC.
The H3~H5 tags are collapsed in TOC and are displayed only during the scroll of the page. This behavior save much space in TOC especially with page with more sections (eg. :wiki:syntax).
Can I remove the filename "*.txt" from pages but keep the last edit date and name? I can only comment out "tpl_pageinfo()" in the main.php file.
The function tpl_pageinfo()
does not provide options to remove the name of the page or other customization.
The correct way to remove the page info, is change value to displayPageInfo
in Configuration Manager (see: Others configuration).
Is there an easy way to use Google CSE (google.com/cse) with your template? I would like to display the search box on one page and the search results on another page.
To implement the Google CSE see this steps (adapted from Google CSE - Implementing search box):
Copy and paste in your meta.html
hook this code:
<script> (function() { var cx = 'YOUR_ENGINE_ID'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script>
Select and save the two-page layout in the Google CSE Control Panel. On one page, implement a stand-alone search box, changing the resultsUrl
attribute to point to the url where you want to display the results (eg. http://example.org/dokuwiki/search).
Copy and paste this code in the sidebar (or in one of many hooks or in your preferred location):
<gcse:searchbox-only resultsUrl="YOUR_RESULTS_PAGE_URL"></gcse:searchbox-only>
To implement a stand-alone search results page, create a new DokuWiki page (eg. search) and paste the results code snippet into your results page:
<gcse:searchresults-only></gcse:searchresults-only>
Now you can trigger search results on this page by passing a q
argument in the url:
http://example.org/dokuwiki/search?q=myQuery
NOTE: If you use the <html>
tag, enable the htmlok option.
How can one add text in the cookies banner?
How can I add something like: “this site is using cookies, … you have to accept…” to the cookies banner. (Thanks for the template).
Adding text in the cookie banner is simple:
- Enable the flag
showCookieLawBanner
in Configuration Manager - Create a new DokuWiki page with a text “this site is using cookies, … you have to accept…”. The default DokuWiki page is
:cookie:banner
- Optional, create a policy page (the default DokuWiki page is
:cookie:policy
)
Display license
Hello, thanks for your awesome template. I would like everyone passing by to see the license of the wiki, in other template is pretty visible at the bottom, is there a way to enable it with this template too or I should tweak around? — arimane 2015-11-30 21:36
browserTitle - adding some part of namespace
Hi. Is there any way to add some part of namespace to <title> tag?
I have dozens of pages witch same ID but in different namespaces. It would be nice to display in page title mayby two last namespaces.
Example:
Now:
http://abcd.ef/favorite/dogs/timmi <title>Timmi [MyWiki]</title> http://abcd.ef/disliked/cartoons/timmi <title>Timmi [MyWiki]</title>
Nicer it would look like this:
http://abcd.ef/favorite/dogs/timmi <title>Timmi - Favorite - Dogs - [MyWiki]</title> http://abcd.ef/disliked/cartoons/timmi <title>Timmi - Disliked - Cartoons - [MyWiki]</title>
— Alekk 2015-12-03 01:22
Thank You for this functionality. I like it. There is one bug. When first header contains sign ' (#39), e.g.
====== I'm very old =====
then its printed twice
<title>I'm very old - I'm very old - Some category [MyWIKI]</title>
I'm change ' (#39) to ` (#96)
— Alekk 2015-12-22 23:20
Sidebar on mobile won't stay open
2016-01-15 First of all, this is a really impressive template. Thank you! On mobile phones (both iPhone and Android), my sidebar is especially long and won't stay open. When a user opens the sidebar and scrolls up/down, the sidebar automatically disappears. Is there a way to fix this? If it helps, my site is http://studyfruit.com.
This behavior iwas fixed in the v2016-01-25 release of template (see the commit on GitHub)
— Giuseppe Di Terlizzi 2016-02-22 15:08
List of used fonts and where to change them
Is there a list of used fonts and where they are defined?
Just a table as the one below would be fine.
FontNameInCSS | description | FontFamilyName | FileName |
---|---|---|---|
wiki__text | edit-window font | DejavuSansMono | conf/userstyle.css |
… | … | … | … |
E.g. I tried to change the edit window font face and size but defining the wiki__text
element in conf/userstyle.css
has no effect:
- /conf/userstyle.css
… dokuwiki textarea.edit, #wiki__text { font-family: courier, monospace !important; font-size: 110%; } …
— Thomas Templin 2016-04-13 05:55
Simplifications
I'm sorry, but the last time I really got into PHP is long ago. I'd just like to:
- stop the edit/last revisions/link here buttons from changing their size when mousing over
- remove the bottom footer
But I just don't understand it. Any help is greatly appreciated!
— clemo 2016-09-16 14:18
Hi, for the first question, can your send a screenshot of your page (via email or via GitHub issue) ?
For remove the bottom footer elements (eg. badges, pageinfo) see showPageInfo
and showBadges
options.
— Giuseppe Di Terlizzi 2016-09-28 12:35
Hi, since the v2016-12-12 template version it's possible disable the page-tools animation via pageToolsAnimation
option.
— Giuseppe Di Terlizzi 2016-12-13 17:09
Easy way to disable pagetools animation
The pagetools animations are a little bit bugged. Hover over the lowest button and moving up to the one above works. But moving the mouse from a upper button to lower button triggers the animations two times in a row. Now i added another color at hover in css and would like to disable the animations completely. Is there a more elegant way to disable the animations than removing the function in template.js in row 617ff (developer branch)?
— bobdeh 2016-11-15 20:00
Hi, since the v2016-12-12 template version it's possible disable the page-tools animation via pageToolsAnimation
option.
— Giuseppe Di Terlizzi 2016-12-13 17:09
Easy way to add a link the the Navbar back to the parent website Home page?
For a moment I thought I had found the answer with “showUserHomeLink” however that is the home page for the wiki. I'd really like to have a “showUserParentHomeLink” with a check box and a URL entry form! That would be really helpful. Thank you.
Does not work on latest Dokuwiki
2017-02-19a “Frusterick Manners” - appears to be a Javascript issue.
I suggest:
- Fix file permission (specially for the new jQuery/jQueryUI dispatcher)
- Flush Cache (DokuWiki + Browser cache)
- Touch configuration file (or change an option in Configuration Manager)
— Giuseppe Di Terlizzi 2017-02-24 14:55
Pagetools: option for no pagetools on start page
Is there any way of disabling pagetools on the “start” page? My start page is readable by ALL (non-logged in) but I don't want casual visitors to be able to see any pagetools. Or maybe and option for no pagetools unless a user is logged-in (only if user is not-ALL). Thanks in advance for any relevant information! — Branmabon Kaesgard 2017-02-25 17:34
As far as I can see you can go to the Admin / Configuration page, lookup
tpl»bootstrap3»showPageTools Enable the DokuWiki-style Page Tools
and change the associated selection box to When logged in
.
However, if you do change only this setting then there's still the tools menu in the navbar at the top of the page, so you also may want to change this item
tpl»bootstrap3»showTools Display Tools in navbar
to the same setting as above.
Unfortunately this doesn't seem to prevent the actions from working, so if you manually append ?do=edit
to a page URL you can still see the source code of that page.
It would be nice if there was a global DW configuration option where you could disable these tools menus, as well as prevent users from viewing the page source, older revisions of the page, etc., and wouldn have to make these settings in a specific theme template like bootstrap3.
— Martin Burnicki 2017-04-04 14:48