DokuWiki

It's better when it's simple

User Tools

Site Tools


template:bootstrap3

Bootstrap3 Template

Compatible with DokuWiki

  • 2017-02-19 "Frusterick Manners" yes
  • 2016-06-26 "Elenor Of Tsort" yes
  • 2015-08-10 "Detritus" yes
  • 2014-09-29 "Hrun" yes

template High customizable Bootstrap based template for DokuWiki

Last updated on
2016-12-12
Repository
Source

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
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
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@
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.

  • :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

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

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
Develop Branch

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? — arimanePsiconauti Wiki
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>

AlekkAlekk

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)

AlekkAlekk

2015-12-22 23:20


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 TerlizziGiuseppe Di Terlizzi
lotar

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 TemplinThomas Templin
coastGNU

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:

  1. stop the edit/last revisions/link here buttons from changing their size when mousing over
  2. 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 TerlizziGiuseppe Di Terlizzi
lotar

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 TerlizziGiuseppe Di Terlizzi
lotar

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 TerlizziGiuseppe Di Terlizzi
lotar

2016-12-13 17:09

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.

didn't notice that. Works perfectly for me. By the way, you can report on Github if you encounter issues. — DigitalinDigitalin

2017-02-24 14:19
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 TerlizziGiuseppe Di Terlizzi
lotar

2017-02-24 14:55
template/bootstrap3.txt · Last modified: 2017-03-03 12:56 by 186.207.181.15