Pop-out Edit Help

by pieterh on 10 Jul 2009 17:09

I've been playing with CSS, with Squark's help, and have built a small pop-out syntax help that works when editing a page. This solves a long standing problem I have: Wikidot's syntax is sometimes hard to remember and I find myself clicking on 'wiki syntax description' to remember things like how [[image]] works.

cap010.png

On the sandbox site you can see what this looks like.

Here's a short tutorial for anyone who wants to get the same effect on their sites. For now, you will need to make a custom theme, modify your nav:side, and add a page to your site. The cool part is that you can customise the text that appears. I'm using a short version of the quick reference.

  • Create a custom theme that inherits your standard theme and adds two classes for the pop-out box. Here is how I do this for the Orange Fresh theme from themes.wikidot.com:
+ show block

Here I'm also fixing the width of the container so that it shows properly on smaller screens (1024 pixels wide, at least. 800x600 devices will not be happy.)

  • Apply the custom theme to _default.
  • In nav:side, add a hidden div that provides text for the pop-out:
+ show block
  • Create a page called quick-reference that contains the text you want to show, e.g.:
+ show block

Now, when you hover the mouse over the '?', the pop-out appears. And when you move the mouse out of the pop-out, it disappears again.

Comments: 22

Add a New Comment
page revision: 7, last edited: 07 Sep 2009 15:37
Edit Tags Discuss (22) History Files Print Site tools + Options
amazon.png

Official Wikidot blog

Community

Documentation

About Wikidot

Gift Shop

Terms of Service

Privacy policy

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License