vector for DokuWiki

Compatible with DokuWiki

• 2012-01-25 "Angua" yes
• 2011-05-25 "Rincewind" yes
• 2010-11-07 "Anteater" yes

• Download
• Donate

Wikipedia/MediaWiki look and feel for DokuWiki (current)

Last updated on

2011-12-10

Repository

Source

Tagged with dokubook, mediawiki, monobook, vector, wikipedia

By Andreas Haerter

• monobook
• prsnl10
• mnml-blog

“vector for DokuWiki” brings you the current¹⁾ Wikipedia/MediaWiki look and feel for DokuWiki. There are some things you'll find in this template that you won't find in most other DokuWiki templates, and are inspired by Wikipedia and MediaWiki. Some features:

• Discussions
  Configurable discussion pages without requiring an additional plugin.
• User pages
  Users can have their own home page on your wiki.
• Cite this Article
  Allows students, journalists, researchers, and the like to easily reference articles on your site.
• Permanent Link
  Guarantees that articles you link to are the same as you saw them that second you link them.
• Automatic plugin integration
  vector automatically detects and uses some popular, optionally installed plugins. Therefore you don't have to insert any code snippets or stuff when using: Translation,²⁾ Open Office Export, dw2pdf, html2pdf
• All non-page portions (e.g. navigation) of the template can be edited just as if they were pages. How cool is that?

With that said, there's always room for improvement. If you're able to add any contributions to make vector for DokuWiki better, please let me know or discuss your thoughts.

If you like the template, think about a donation. It is a lot of work.

• This version introduces a multilingual navigation for Translation plugin users. Users of the existing translation box snippet should edit some source code in /vector/user/boxes.php: just replace the old with the new lines.

The source code of this template is available as Git repository.

See CHECKSUMS.asc for MD5, SHA-1 and SHA-256 checksums. The file is signed with my GnuPG/PGP key (0x423B2839). You can use gpg --verify ./CHECKSUMS.asc to check/validate it.

Refer to template on how to install and use templates in DokuWiki. For updating, see below.

Some screenshots can be found here.

The template should be compatible with all modern browsers:

• Firefox ≥ 3
• Opera ≥ 10
• Safari ≥ 4, Chrome ≥ 1 and other newer Webkit based browsers.
• MS Internet Explorer ≥ 7

Please note:

• MS Internet Explorer 6 is also supported in general, there are only some cosmetic issues at the admin menu. This issues do not affect normal wiki pages. The new Media Manager (introduced with DokuWiki 2011-11-10 “Angua RC1”) does not work with IE6.
• I can't test every browser (version) out there. Therefore it does not mean the template does not work if your browser is not listed above. Just try it out if you want to be sure.

What to do to update your installed vector template?

1. First of all: BACKUP YOUR DATA, especially /lib/tpl/vector. But don't be scared. It is no rocket science.
2. Download the current update from above.
3. Uncompress it and copy it over your current /lib/tpl/vector. This works without problems when you followed the rules described in the README (⇒ the place for *all* user-defined, custom stuff is /lib/tpl/vector/user!) cause previously existing files in this directory are simply not included in the update archive (and therefore it can't overwrite anything of your stuff).
4. Recommended: Also update the plugins Translation, Open Office Export, dw2pdf and html2pdf if you are using one ore more of them. This is especially important regarding Translation (some older versions may cause problems and/or results are looking badly).
5. Have fun and think about a small donation .
6. Here is a list of files that were removed in recent releases. They do no harm, but you should delete them to keep your installation clean and tidy:
   

   #removed in 2011-11-29
   /static/3rd/dokuwiki/_mediamanager.css
   /static/3rd/dokuwiki/basic.css
   /static/3rd/dokuwiki/content.css
   /static/3rd/dokuwiki/design.css
   /static/3rd/dokuwiki/includes.css
   /static/3rd/dokuwiki/structure.css
   /inc_mediamanager.php
   
   #removed in 2011-03-17
   /static/3rd/dokuwiki/_linkwiz.css
   /static/3rd/dokuwiki/layout.css
   /static/3rd/dokuwiki/media.css

Feel free to add yours here:

• personal site in French
• trying to help children victims of Tchernobyl accident
• http://readm3.org
• Audio-Drama.com - The Audio Drama Encyclopedia
• davidak wiki (german)
• http://glutamate.brain.riken.jp (English/Japanese)
• SmüPedia (german)
• Die Form Guides (English / French soon)
• jQuery Programming and Energydinks (mostly german)
• Softeuskaraz (Basque)
• PKUinfo: Informazioni, domande e risposte sulla fenilchetonuria
• http://tokeek.de (German)
• http://wiki.zebrascrossing.org (hybrid with sidebar template, French)
• http://wiki.geany.org
• Stian's PhD wiki
• How to stop drinking alcohol (using version 2011-12-10 on Dokuwiki Angua)
• HausaFilms.tv - A Hausa Film IMDB
• Course of Multimedia Systems in University of Alicante (spanish)
• http://wiki.slashdir.com
• wiki.epoc.fr (french)
• База знаний ФМИ (вики матфака ТНУ) (Russian)

Have a look at the README. Everything regarding

• own logo
• own favicon
• own CSS
• own JavaScript
• own CSS, language specific
• own Apple Touch Icon (apple-touch-icon.png)
• own tabs
• own buttons/icons (footer)
• own boxes (left-column)

is described there.

For the ones who are never reading READMEs:

• The place for all user-defined, custom stuff is “vector/user”. Reason: this folder will not be touched on updates.
• If you want to replace the default logo showed in the upper left, simply create a /vector/user/logo.[png|gif|jpg]. The template recognizes the file automatically and will use it instead of the default logo.
• If you want to add own tabs, have a look at /vector/user/tabs.php (NOT /vector/conf/tabs.php).
• If you want to add own buttons (footer), have a look at /vector/user/buttons.php (NOT /vector/conf/buttons.php).
• If you want to add own boxes (left-column), have a look at /vector/user/boxes.php (NOT /vector/conf/boxes.php).

…to insert into /vector/user/tabs.php (NOT /vector/conf/tabs.php).³⁾

Hint: Replace $_vector_tabs_right with $_vector_tabs_left to add the tabs to the left instead the right tab navigation (and vice versa).

//recent changes
if (!empty($conf["recent_days"])){
    $_vector_tabs_right["ca-recent"]["text"]     = $lang["btn_recent"]; //language comes from DokuWiki core
    $_vector_tabs_right["ca-recent"]["href"]     = wl("", array("do" => "recent"), false, "&");
    $_vector_tabs_right["ca-recent"]["nofollow"] = true;
}

//(un)subscribe namespace tab
if (!empty($conf["useacl"]) &&
    !empty($conf["subscribers"]) &&
    !empty($loginname)){ //$loginname was defined within main.php
    if (empty($INFO["subscribedns"])){ //$INFO comes from DokuWiki core
        $_vector_tabs_right["ca-watchns"]["href"] = wl(cleanID(getID()), array("do" => "subscribens"), false, "&");
        $_vector_tabs_right["ca-watchns"]["text"] = $lang["vector_subscribens"]; 
    }else{
        $_vector_tabs_right["ca-watchns"]["href"] = wl(cleanID(getID()), array("do" => "unsubscribens"), false, "&");
        $_vector_tabs_right["ca-watchns"]["text"] = $lang["vector_unsubscribens"]; 
    }
}

…to insert into /vector/user/boxes.php (NOT /vector/conf/boxes.php).⁴⁾

//QR-Code of the current page (powered by <http://QR-Server.com/api/>)
$_vector_boxes["qrcode"]["headline"] = "QR-Code";
$_vector_boxes["qrcode"]["xhtml"] = '<img src="http://api.qrserver.com/v1/create-qr-code/?data='.urlencode(wl(cleanID(getId()), false, true, "&")).'&amp;size=135x135" style="margin:0.5em 0 0.3em -0.2em;" alt="QR-Code: '.wl(cleanID(getId()), false, true).'" title="QR-Code: '.wl(cleanID(getId()), false, true).'" /><p style="font-size:6px !important;margin:0;padding:0;color:#aaa;"><a href="http://goqr.me/" style="color:#aaa;">QR Code</a> by <a href="http://qrserver.com/" style="color:#aaa;">QR-Server</a></p>';

I altered things a bit for those that want the (un)subscribe tab in a button (limited space in the upper navigation)

//ATTENTION: "ca-watch" is used as css id selector!
if (!empty($conf["useacl"]) &&
    !empty($conf["subscribers"]) &&
    !empty($loginname)){ //$loginname was defined within main.php
	$_vector_boxes["ca-watch"]["headline"] 	= $lang["vector_subscribtions"];
    if (empty($INFO["subscribed"])){ //$INFO comes from DokuWiki core
		$_vector_boxes["ca-watch"]["xhtml"]		.="<ul>\n"
								."	<li id=\"t-subpage\"><a href=\"".wl(cleanID(getID()), array("do" => "subscribe"), false, "&")."\" rel=\"nofollow\">".hsc($lang["btn_subscribe"])."</a></li>\n"
								."	</ul>";
    }else{
		$_vector_boxes["ca-watch"]["xhtml"]		.="<ul>\n"
								."	<li id=\"t-subpage\"><a href=\"".wl(cleanID(getID()), array("do" => "unsubscribe"), false, "&")."\" rel=\"nofollow\">".hsc($lang["btn_unsubscribe"])."</a></li>\n"
								."	</ul>";
    }
	if (empty($INFO["subscribedns"])){ //$INFO comes from DokuWiki core
		$_vector_boxes["ca-watch"]["xhtml"]		.="<ul>\n"
								."	<li id=\"t-subns\"><a href=\"".wl(cleanID(getID()), array("do" => "subscribens"), false, "&")."\" rel=\"nofollow\">".hsc($lang["vector_subscribens"])."</a></li>\n"
								."	</ul>";
	}else{
		$_vector_boxes["ca-watch"]["xhtml"]		.="<ul>\n"
								."	<li id=\"t-subns\"><a href=\"".wl(cleanID(getID()), array("do" => "unsubscribens"), false, "&")."\" rel=\"nofollow\">".hsc($lang["vector_unsubscribens"])."</a></li>\n"
								."	</ul>";
	}
}

Note that I added $lang[“vector_subscribtions”] to the lang.php file (the title of the box), feel free to enter a name there (Inschrijvingen, Subcribtions, or something)

In my case I added the following to <wiki>\lang\nl\lang.php

$lang["vector_subscribtions"] = "Inschrijven";

If nothing is entered there, no title is shown (only the line).

If you want to remove the (un)subscribe tabs from the upper navigation, I suggest commenting them in the conf/tabs.php or the user/tabs.php, don't remove things you might need later on

Grtz, Theo

…to insert into /vector/user/screen.css (NOT /vector/static/css/screen.css).⁵⁾

/* Give sidebar more space. Default: 10em. */
div#content,
div#head-base,
div#footer {
    margin-left: 12em;
}
div#panel {
    width: 12em;
}
#left-navigation {
    left: 12em;
}

Simply replace the 12em with a value you like. Default value is 10em.

div#p-navigation li.level1 ul {
  margin-top: 0.5em !important;
  margin-left: 1em !important;
}

Smaller font, space out breadcrumbs, dimmer text, lighter border

.catlinks {
        font-size: 75%;
        border: 1px solid #ddd;
}
.bchead, a.breadcrumbs {
        opacity: 0.6;
}
a.breadcrumbs {
        margin: 0 2px;
}
a.breadcrumbs:hover {
        opacity: 1;
}

/* Indent table of contents (TOC) (if position: sidebar)
   Note: Config option "Table of contents (TOC) position" (vector_toc_position)
         has to be set to "sidebar". Otherwise, this does not have any effect) */
div#panel #p-toc .dokuwiki li.level2 {
  margin-top: 0.5em;
  margin-left: 4px;
}
div#panel #p-toc .dokuwiki li.level3 {
  margin-top: 0.5em;
  margin-left: 7px;
}
div#panel #p-toc .dokuwiki li.level4,
div#panel #p-toc .dokuwiki li.level5,
div#panel #p-toc .dokuwiki li.level6 {
  margin-top: 0.5em;
  margin-left: 10px;
}

If you need more/less indentation, adjust the margin-left values to you needs.

Larger font, lighter color for TOC header text, slight gradient for TOC header, more space after bullets, rounded corners + shadows.

div.dokuwiki div.toc {
        font-size: 90%;
}
div.dokuwiki .toc a {
        padding-left: 0.3em;
}
div.dokuwiki div.tocheader {
        padding-left: 1em;
        color: #333;
}
.tocheader {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        -moz-border-radius-topleft: 8px;
        -moz-border-radius-topright: 8px;
        box-shadow: 4px 4px 10px #aaa;
        -moz-box-shadow: 4px 4px 10px #aaa;
        background: -webkit-linear-gradient(left, #eaf2f8, #dee7ec);
        background: -moz-linear-gradient(left, #eaf2f8, #dee7ec);
        background: -ms-linear-gradient(left, #eaf2f8, #dee7ec);
}
#toc__inside {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        -moz-border-radius-bottomleft: 8px;
        -moz-border-radius-bottomright: 8px;
        box-shadow: 4px 4px 10px #aaa;
        -moz-box-shadow: 4px 4px 10px #aaa;
}

/* centered footer (instead of left aligned) */
#footer #footer-info li,
#footer #footer-info .dokuwiki,
#footer #footer-info .license,
#footer #footer-places li,
#footer #footer-places .dokuwiki {
  text-align: center !important;
}
#footer #footer-places li {
  float: none !important;
}

I prefer the default template way that the footer buttons highlight when you put you mouse on them (or rather, how they are faded when you do not have your mouse on them), like they do at the bottom of this page, so I added this to /vector/user/screen.css:

/* highlight footer buttons on hover */
#footer #footer-places a img {
  opacity: 0.5;
  border: 0;
}
#footer #footer-places a:hover img {
  opacity: 1;
}

highlight current section (# in URL)

:target { background-color: lightblue; }

Most other templates are displaying InterWiki icons on the left side of links (vector does this on the right side by default). CSS to change the behaviour (left instead of right side):

div.dokuwiki a.interwiki {
  background-position: center left;
  padding: 0 0 0 17px;
}

Thanks to Lennylenehey

for this!

The template optionally imports normal wiki pages and shows their content as

• navigation
• toolbox
• global, sitewide notice
• copyright note (off by default, default is the common copyright note by DokuWiki)

This means you can create the page mentioned in the “Please fill this placeholder” message (e.g. ”:wiki:navigation”) and its content will be shown instead of the message. All of these placeholders are configurable. Have a look at the DokuWiki admin section:

• Show site wide notice?
• If yes, use following wiki page for the site wide notice:
  […]
• Show navigation?
• If yes, use following wiki page as navigation:
  […]
• Show copyright notice?
• If yes, use default copyright notice?
• If not default, use following wiki page as copyright notice:
  […]
• Show toolbox?
• If yes, use default toolbox?
• If not default, use following wiki page as toolbox location:

Simply have a look at /lib/tpl/vector/VERSION. This is a textfile containing the version you are using (e.g. 2010-06-12).

First of all, remember: make changes to /vector/user/boxes.php ONLY. Do NOT edit /vector/conf/boxes.php to prevent trouble on updates.⁶⁾

If you are not happy

• with the default toolbox (or exportbox) and importing a normal wiki page is not flexible enough
• and/or the order the built-in boxes are rendered

simply

1. disable them via config
2. copy the PHP code of the original boxes from /vector/conf/boxes.php into /vector/user/boxes.php and do all your customization there.

To do so, go to the DokuWiki admin section and have a look at the following options to disable the boxes you do not like:

• Show navigation?
  […]
• Show 'print/export' box?
  […]
• Show toolbox?

Now copy the code of the box you want to customize from /vector/conf/boxes.php into /vector/user/boxes.php and start editing them as you like. Useful coding hints:

• You may want to remove the checks which disable some boxes. Especially watch out for:
  • if (tpl_getConf(“vector_exportbox”)){
  • if (tpl_getConf(“vector_toolbox”)){.
• The DokuWiki function getID() returns the uncleanded ID of the current wiki page, including namespace.
• The DokuWiki function getNS() returns the namespace-part of an absolute wiki page ID. To get the cleaned namespace of the current wiki page, you max use:

  echo getNS(cleanID(getID()));

• The DokuWiki function cleanID() cleans up wiki page IDs, making them ready for usage with wl() and auth_quickaclcheck().
• wl() returns you the relative or absolute URL of a wiki page. Example: get the URL of the current wiki page:

  //relative URL
  echo wl(cleanID(getID()));
   
  //absolute URL
  echo wl(cleanID(getID()), "", true);

• vector stores the username of the currently logged in user into the $loginname variable. You can use it to check if a user is logged in:

  if ($loginname === ""){
      //client is not a logged in user
      $_vector_boxes["example-not-logged-in"]["headline"] = "Box: not logged in"
      $_vector_boxes["example-not-logged-in"]["xhtml"]    =  "      <ul>\n"
                                                            ."        <li id=\"t-login\"><a href=\"".wl(cleanID(getId()), array("do" => "login"))."\" rel=\"nofollow\">".hsc($lang["btn_login"])."</a></li>\n" //language comes from DokuWiki core
                                                            ."      </ul>";
  }else{
      //client is an authenticated user
      $_vector_boxes["example-logged-in"]["headline"] = "Box: Hi ".hsc($loginname)."!";
      $_vector_boxes["example-logged-in"]["xhtml"]    =  "      <ul>\n"
                                                        ."        <li id=\"t-upload\"><a href=\"".DOKU_BASE."lib/exe/mediamanager.php?ns=".getNS(getID())."\" rel=\"nofollow\">".hsc($lang["vector_toolbxdef_upload"])."</a></li>\n"
                                                        ."      </ul>";
  }

See customizing.

Go to the DokuWiki admin section and have a look at the following option (introduced in vector version 2010-06-27):

• Closed wiki (most links/tabs/boxes are hidden until user is logged in)?

Short answer: yes.

The template brings support for basic discussion pages without the need to install any additional plugin. However, if you are interested to use the Discussion plugin (which allows threaded replies, avatars, captcha and other controls at the bottom of the wikipage instead of a separated basic discussionpage), simply install it and deactivate the template option “Use discussion tabs/sites?” at the DokuWiki admin section.

Even if the footnotes may work as expected in some other templates, the wrong insitu footnote popup position is not a template but a DokuWiki 2010-11-07 “Anteater” issue (see Bug 2114). All templates with relative positioning are affected. This bug is fixed since DokuWiki 2011-04-22 “Rincewind RC1”. If you update your DokuWiki installation, the problem should be gone.

Please refer to the discussion page.

• Nothing special right now (but I will fix reported bugs, for sure!) — AndreasAndreas
  
  Horb a. N. / Karlsruhe, Germany 2010/08/17 23:36

• JavaScript: boxes collapsible (like wikipedia) – patches welcome. — AndreasAndreas
  
  Horb a. N. / Karlsruhe, Germany 2010/06/27 20:17

• Merge pull request #3 from albertgasset/catalan (2012/01/31 09:27)
• new setting (Catalan language) (2012/01/30 17:13)
• Add Czech language files (2011/12/19 02:05)
• release preparations (2011/12/10 18:15)
• add missing styles for horizontal rules (2011/12/09 21:36)
• typos (2011/12/02 21:45)
• Merge pull request #2 from albertgasset/catalan (2011/11/29 16:59)
• typo (2011/11/29 16:57)

For a complete change log, see the commits on Github. Older releases are no longer recommended for usage and are listed for reference only.

vector version	Download	Designed for and tested on DokuWiki	Comment
2011-12-10	Release Update	rc2011-11-10 “Angua RC1”, 2011-05-25a “Rincewind”	Added fix for wrong horizontal rule clearing (---- / <hr>-Tag); Catalan language update.
2011-11-29	Release Update	rc2011-11-10 “Angua RC1”, 2011-05-25a “Rincewind”	Full support for DokuWiki's new Media Manager; Multilingual navigation for Translation plugin users (NOTE: Users of the existing translation box snippet should edit some source code in /vector/user/boxes.php: just replace the old with the new lines); Apple Touch Icon support (see README for details); added Russian, Spanish and Catalan language.
2011-05-10	Release Update	rc2011-05-08 “Rincewind RC2”, 2010-11-07 “Anteater”, 2009-12-25 “Lemming”	Cross browser compatibility fixes.
2011-05-04	Release Update	rc2011-04-22 “Rincewind RC1”, 2010-11-07 “Anteater”, 2009-12-25 “Lemming”	Improved media manager, added Basque language, hide breadcrumbs in mediamanager.
2011-03-17	Release Update	2010-11-07 “Anteater”, 2009-12-25 “Lemming”	Added French language, plugin compatibility improvements (CSS): bureaucracy and some others. Switched css base from 'default' template to 'starter' template (→ reason).
2010-08-17	Release Update	2009-12-25 “Lemming”	Added Chinese (simplified) language files; Respect disabled 'search' and 'profile'; Added /user/tracker.php to make web analytics software integration easier; CSS: fixed list styles, TOC, some minor bugs;
2010-06-29	Release Update	2009-12-25 “Lemming”	Template respects $conf['disableactions'], improved mediamanager.
2010-06-27	Release Update	2009-12-25 “Lemming”	New config options (user pages optional, closed wiki - most tabs/boxes will be hidden until user is logged in if active); added Italian, Brazilian Portuguese and Dutch language; support for PNG favicon.
2010-06-12	Release	2009-12-25 “Lemming”	Initial release