A designer @fontface dokuwiki template for writers

Site Tools

Writer's Dokuwiki Template

MyStyle is a customisable designer @fontface dokuwiki template, designed with writers in mind and perfect for literary websites, though it's also great for your own personalised designer portfolio or personal website


  • Template uses @fontface for titles (h1-h3) with shadow, set out in basic.css
  • Template uses @fontface for titles (h4 & h5) without shadow, set out in basic.css
  • Template uses @fontface for logo and tagline with shadow set out in design.css
  • Template uses @fontface for “Table of contents” title
  • Template uses a dozen panoramic images for the header (approx. 1200px by 200px) which are randomly selected each time the page is refreshed.

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 basically show the original typo template with a few additions.
    • Browse
    • 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\writers\font

Using your own Font

  • As mentioned above, @fontface is not used throughout the whole wiki (that would be hard on the eyes!). It's basically used only in titles (h1-h5) and the logo.
  • If you create a page and you want your introduction paragraph (subtitle text or description) to stand out, you can also use your font by putting this particular part of text between === === (h4) or == == (h5). This will render your text using your own particular font, but without shadow.

Using your own header images

  • The download includes a dozen panoramic photos of Extremadura (Spain) which are randomly selected each time the screen is refreshed
  • All these photos are 200 pixels high and normally 1200 pixels wide
    • For screen resolutions lower than 1200 pixels wide the photos are cut off to the right
    • For screen resolutions higher than 1200 pixels, the design.css file makes the image larger so it fills the screen. When this occurs the image is cut off at the bottom.
  • I recommend images for the header be approximately 1200px by 200px although you can also make your header images taller by tweaking the design.css file as described in the Tweaking your own installation section
  • To include your own header images, just delete the ones in the /images/cabecera/ folder and put your own images there. If you only want one header image and not a random selection, just put one image there.

Using your own favicon

  • Replace existing favicon in the /images/ folder

Tweaking your own installation (CSS)

  • Colour of Logo is #F5F5E1 by default; can be changed on line 37 of design.css file
  • Colour of Tagline is #F5F5E1 by default; can be changed on line 43 of design.css file
  • Height of header images is approximately 200px by default.
    • This is not actually specified anywhere, but is established once enough space is given to the logo and tagline.
    • By default the logo has a 100-pixel margin above it.
    • The images' height can be altered by changing the logo's margin-top on line 30 of design.css file (for example: margin-top: 200px; for taller header images)
  • After logging in, go to the configuration manager. At the bottom of the page you'll find the Writers Template Settings
  • Change the tagline
  • Note the name given to the sidebar (the default name is “sidebar”). You will have to create this page in order to add the navigation links in the sidebar.
  • If you select the “Hide tools when not logged in?” box, then the “login”, discussion“, “user page”, “show pagesource”, “old revisions”, “recent changes”, “backlinks” & “sitemap” links at the top and bottom of the website will disappear when you're not logged in… of course after that you'll have to access your wiki manually typing ?do=login to the end of your site url, but it'll look much better to your visitors.
  • You can also disable the search box, breadcrumbs and table of contents in the same configuration manager