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.
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:
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:
- Create a page called quick-reference that contains the text you want to show, e.g.:
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.
nice. I've actually used this kind of CSS technique a few times to mimic collapsibles and overcome the fact that you can't nest collapsibles.
This is nice. I really hope we'll get this automatically in all themes soon.
But one thing: Why not let me choose (as an admin for all users, or as a user for just me) to use the more common and well known MediaWiki syntax? It's so confusing with all these different syntaxes. Let me at least have the option to use the one that I most likely know a little already. (even better could be to let me choose from a list of the most common syntaxes) That would be very helpful!
Yes, I agree it would be nice to at accept other common wiki syntaxes just for compatibility.
Portfolio
hey, anyone , please, im trying to figure out how to add some color to my page, cant seem to find any tips/ codes/syntax ,,
yet most peoples pages are all colored luverly!
kinda tried messing around with the code blocks n html to no avail, there must be an easy way!
please help if you can, thanx very muchly:)
http://www.wikidot.com/doc:wiki-syntax#toc0
Piotr Gabryjeluk
visit my blog
This doesn't work anymore due to the new toolbar placed on non-pro wikis.
Kenneth Tsang (@jxeeno)
You're right… damn toolbars! :-)
I fixed it on http://blog-template.wikidot.com by setting the 'top' for .helpbox and .helpbox:hover to 25px. (The top toolbar is 24px high).
Portfolio
Interesting but I think it is not the right location.
According to me, a blog post is about telling a story about a trick while the trick itself should be hosted somewhere else be on the snippets or as a howto: on the community.
I can not see the [?} button on the 'Blog Template' site! Where is it?
I removed this from the template sites.
Portfolio
Ok, so where can I preview this feature? :)
You'll have to recreate it on some site. If people think it's worthwhile I'll add it back to the various templates. For me it was a bit debatable whether it was useful.
Portfolio
OK, I've recreated it on the sandbox site, see http://sandbox.wikidot.com/popup:editor-help
Portfolio
The nav:side block doesn't work with the [[code]] [[/code]] markup. So, the code to copy should look like this:
[[div class="helpbox"]]
[[div style="margin-top:-1em"]]
?
[[/div]]
[[include quick-reference]]
[[/div]]
I might give it a shot. If I do I'll post back with the results.
See http://sandbox.wikidot.com/popup:editor-help
Portfolio
but it completed buggfers up my top-nav trying to add…
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: My Blog, Wikidot Editor, Official Docs
Work: ZoomPlanner (built for freelancers/small business)
Other: YouTube (gaming channel)
http://hobstarcs.wikidot.com/nav:top
have now added to the CSS (forgot to import it)
It says this:
This is incorrect, there should be three square brackets on each end.
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: My Blog, Wikidot Editor, Official Docs
Work: ZoomPlanner (built for freelancers/small business)
Other: YouTube (gaming channel)
I got the ? button now but now it has changed the way my pages look. http://hobstarcs.wikidot.com/ - squashed
Worked it out, the CSS:
stuffed up my site as my container width is a good deal wider than this. Changed that and am currly fiddling around with the colour scheme to better suit my site and thinking about more content to ad to the actuall dropdown.
Come have a look at: http://hobstarcs.wikidot.com/