Mystyle Dokuwiki Template

MyStyle is a customisable designer @fontface dokuwiki template based on the typo template, great for your own personalised designer portfolio or blog


Starting from Original Typo Template, changes in chronological order (some changes are developed later on further down the list)
  • Template uses @fontface for titles (h1-h3) with shadow, set out in design.css
  • Template uses @fontface for titles (h4 & h5) without shadow, set out in design.css
  • Template uses @fontface for logo (now centered) with shadow set out in layout.css
    • The shadow behind the logo can be deleted on line 37 of layout.css
    • The size of your logo can be changed on line 39 of layout.css
    • The colour of the logo can be changed on line 46 of layout.css
  • Template uses @fontface for “Table of contents” title
  • Template uses @fontface for navigation links in sidebar. Navigation links resized to match h3 titles and use lighter colors, all set out in typo_design.css
  • Template uses @fontface for search box and buttons, set out in design.css
  • A nice background image has been included in the content so that between the page and the sidebar there's a nice division, set out in typo_design.css
  • Pageinfo has been deleted from sidebar
  • H1, H2 and H3 headlines all have shadows (not rendered in Internet Explorer).
    • H1 is big and bold
    • H2 is slightly smaller than H1 and bold
    • H3 same size as H2, but is not bold and it's slightly indented
    • h4 is slightly smaller than H3 (120% font enlargement)
    • h5 is the same size as h4, but has a 30px indent
  • Buttons background changed to dark matt finish, and include hover colour change. The other links on the sidebar (including logo) have the same colour change (used to be light blue!)
  • TOC background changed, links now include diff. colour and shadow on hover (not rendered in IE!!!)
  • Changes in sidebar.html to allow for logo top right to also be an image. If you want to include an image as your logo, just put it in the “user” folder. Images can be png, jpg & gif.

Installing your own Font

  • The download includes the UglyQua font used in this wiki. If you like it and want to keep it, you need not read on.
  • If you want to use your own font, first you need the font files. I recommend checking out the fonts at FontSquirrel. You cannot just download any old font because different browsers use different font formats: Internet Explorer only supports EOT, Mozilla browsers support OTF and TTF, Safari and Opera support OTF, TTF and SVG, Chrome supports TTF and SVG, mobile browsers like Safari on the iPad and iPhone require SVG. Browers without @fontface capability will show your second-choice font, which is Georgia.
    • To change the font, browse through the FontSquirrel fonts
    • Choose a font you like
    • Download the whole @fontface kit
    • Rename each of the files to myfont (so you now have myfont.eot, myfont.svg, myfont.ttf & myfont.woff)
    • Upload all four font files to the folder lib\tpl\mystyle\font
  • Disable the “show pagesource”, “old revisions”, “recent changes”, “backlinks” & “sitemap” links on the sidebar (“disable dokuwiki actions” in “configuration manager”)
  • You can also disable the search box in the same configuration manager
  • You can also disable the “login” link in the same configuration manager, but then you'd have to access your wiki manually typing ?do=login to the end of your site url.
    • put it in a footer?