Title help

How to make a compact horizontal account options menu


Top Bar CSS

Theme 2009

CSS dropdown menus


sample use of CSS module:

How to add a Hidden menu to nav:top

How to Hide Admin Menu

Mailform module

Mailform Module Doc

Woodcut plus


Page to specific users

Collapsible block

Collapsible blocks

explain collapsible blocks

- ok, thanks


You can format the collapsible block text as for any Wikidot text. Look at the example at: http://snippets.wikidot.com/code:collapsible-block-unleashed.

Put the [[collapsible]} and [[/collapsible]] tags on their own lines or the parser will not recognize them.

By default, the show link says "+ show block" and the hide link says "- hide block". For longer blocks, add the hideLocation="both" option to show the hide link at the bottom as well as the top of the block when it's shown. Other values for the hideLocation option are "top" (the default) and "bottom".

Finally, you can use the folded="no" option to show blocks by default, allowing the user to hide them if wanted. We use this for tables of content, for example.

Collapsible Block Unleashed

By SquarkSquark

With the collapsible block you can create VERY custom menu on your site. It is not very easy to do it, but with a bit of effort it's eatable.
I had to change my CSS style a bit to make it works (change margins of <ul> lists for example), but it can be done by adding 12px padding in the internal DIV (because bullet list has 12px margin by default).

If you know CSS styles a bit, you will be able to do such menus or even better!
Code (view in Source)

{"module":"feed\/FeedModule","params":{"src":"http:\/\/twitter.com\/statuses\/user_timeline\/16363190.rss","limit":"3","module_body":"[[div]]\n[[div style=\"width:278; height: 34px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_1.png); margin: 0; padding: 0;\"]]\n[[\/div]]\n[[div style=\"width:278; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_2.png); margin:0; padding: 10px 30px;\"]]\n[[div style=\"background-color: #444; line-height: 12px;\"]]\n[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[\/size]]%%description:\";squark:;\":\"\":\";http:\/\/([^ ]+);\":\"<a href=\"${0}\">${1}<\/a>\"%%\n[[\/div]]\n[[\/div]]\n[[div style=\"width:278; height: 73px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_3.png); margin:0; padding: 0;\"]]\n[[\/div]]\n[[\/div]]"}}


Internal links

Unlike some other wiki engines Wikidot.com does not process SquashedAndCapitalized words as page links. Instead any link should be marked with 3 nesting square brackets.

If a page address contains disallowed characters the address will be "unixified" to contain only allowed chars. The displayed name however will maintain original form.
what you type what you get comments
link-to-a-page link-to-a-page using raw page name
link "TO" ą pagE link "TO" ą pagE automatic purification of destination page
sample page sample page linked to a page with category
custom text custom text using custom text
Documentation Documentation linking to an existing page (different color)
some-page some-page using page title as link text
Section 1 Section 1 linking to an anchor (first section)
doc doc linking to an anchor (first section)
what you type what you get comments
Wikidot Wikidot named link (custom anchor)
Wikidot Wikidot named link (custom anchor), opened in new window/tab
link text link text You can create shorter links to your own site with
parameters without writing whole http link.
E.g. you can use
edit this post
instead of
edit this post
http://www.wikidot.com http://www.wikidot.com simple inline link
wikidot wikidot named link (custom anchor)
wikidot http://www.wikidot.com
wikidot opens in a new window
empty link empty link link with href="javascript:;" i.e. not leading anywhere. useful when constructing pull-down menus
link text link text You can create shorter links to your own site with
parameters without writing whole http link.
E.g. you can use
edit this post
instead of
blog:post/edit/true edit this post

To place an anchor use syntax. To refer to an anchor (and scroll to it) use text to display.

An Atmosphere of Mutual Respect
Anonymity Guaranteed

Early Days
Take Off

Turning TOC into URL link

You can put this into a live template which is used to define default content for a category. At it's most basic you create a page called category:_template (replacing category with the name of the category you want) and put your code in there followed by %%content%%. Don't omit the underscore. Your code would then be used for all pages in that category and when you wanted to make a change you would only need to do it once, in the category:_template page, and it would instantly be used across all other pages in the category..

Live templates are a very powerful feature and you can read more about them by at http://www.wikidot.com/doc:templates for more information about live templates and by searching the forum.

/* T H I S I S F O R F O L D A B L E L I S T C O N T A I N E R S */

/* set margin and line height for fisrt level menu items */
.foldable-list-container ul>li {
margin-left: -25px;
line-height: 1.25;
/* set bullet type for first level menu items */
list-style-type: none;

/* set margin and line height for second level menu items */
.foldable-list-container ul>li>ul>li {
margin-left: 0px;
line-height: 1.25;
/* set bullet type for second level menu items */
list-style-type: disc;
/* to use an image, use this syntax */
/* list-style-image: url('arrow.gif'); */

CSS unordered lists

How To Format Bullet Lists (<ul>) Using CSS

Bullet lists in HTML come in two varieties: Ordered Lists (in which each line begins with a number or letter) and Unordered Lists (in which each line begins with the same bullet shape or image).
Ordered list Unordered List Unordered List with CSS Style

1. Line 1
2. Line 2
3. Line 3

* Line 1
* Line 2
* Line 3

* Line 1
* Line 2
* Line 3

On this page we will discuss how to format unordered lists so they have a bit more style. We'll also show you how to use an image for bullet lists.
CSS Styles

There are several ways to format the style of your lists but they all use the same basic set of instructions. These are CSS (Cascading Style Sheet) instructions and they look like this:

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 2em;

These are just a small sample of the styles which are available. The ones above are common CSS styles and can be used anywhere there is text. There are also styles specific to lists, such as:

list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;

When formatting a list, you can choose as many of these styles as you like. If you only need to use an image for the bullets, then that's the only style you choose. For this page we will use the following requirements to illustrate the methods:

* Set the font face to Verdana
* Set the font size to 12 pixels
* Set the background colour to grey
* Create a 6 pixel padding around the entire list

More formatting options will follow later.
Method 1: Universal Style

The simplest way to format your lists is to define a style which applies to all lists in the page. In the head of your web page, add the following code:

<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }

Syntax: list-style-type: <value>
Possible Values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Default Value: disc
Applies to: Elements with display value list-item
Inherited: Yes
Specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off

Syntax: list-style-image: <value>
Possible Values: <url> | none

Default Value: one
Applies to: Elements with display value list-item
Inherited: Yes
Replaces the marker specified in the list-style-type property.

Syntax: list-style-position: <value>
Possible Values: inside | outside
Default Value: outside
Applies to: Elements with display value list-item
Inherited: Yes
Takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.

* Line 1
Second Line
* Line 2
* Line 3

The example on the right is the result of the style below. Note that both a list-style-type and list-style-type are defined - the arrow image is used unless it cannot be found or the user has image display disabled, in which case the list uses square bullets.

background images for bullets

list tutorials

css dropdown menus

Right Click Functions
Managing Playlists and Filters
Guayadeque use of External Resources
Customizing the User Interface


<li><a href="#">The Numbers Game</a>
<li><a href="#">First Impressions</a></li>
<li><a href="#">Spin the Bottle</a></li>

Tutorial on difference between Shape Mode and Pathfinder in Illustrator CS4 at Techassistnow.com Using the Illustrator Pathfinder Tool

[http://www.example.com insert the code here]