Documentation

The Checklist App was created using Wikidot syntax and modules. The includes used in the Installation as well as the general CSS can be customized to fit your site in terms of appearance. This is the documentation which will show you how to operate the Checklist and how you can customize your Checklist.

Operation

Operation of the Checklist is pretty straightforward. To change the status of a list item (between blank, checked, and X-ed), simply click on the status icon to the left of the list item. For instance, if you completed an item, you would click on checklist_blank.jpg to turn it into checklist_check.jpg. Note that this works as a cycle between the three icons which goes checklist_blank.jpg > checklist_check.jpg > checklist_x.jpg back to checklist_blank.jpg again.

To add an item, simply click on the link provided by the checklist-app:link include (see below).

To change the priority of a list item, click the edit button in the edit column. Under the content box is a priority setter. There, you can select between the Urgent, High, Middle, Low, and Trivial priority settings. Items with higher priority will be sorted to the top.

You can edit an item text by clicking "edit" under its options. You can furthermore remove the item entirely by switching its status from Open to Removed after clicking edit.

Customization

The following details how you can customize your Checklist.

Checklist Table

You can access your checklist table by placing the following code on the checklist page or another page of your choosing.

[[include :checklist-app:checklist]]

NOTE: If you place this on a page other than the checklist page, you will need to specify the destination in checklist:_template (See below).

This include is simply a ListPages module that lists all the list items with the status and priority. You may customize the images used for the blank, checked, and X-ed statuses as well as the colors used for the priorities (urgent, high, middle, low, trivial) with the following modifiers:

Modifier Description Allowed Values Default
|item-title= Title for list items column Single line of text, without quotation marks List Item
|priority-title= Title for priority column Single line of text, without quotation marks Priority
|date-title= Title for date column Single line of text, without quotation marks Date
|options-title= Title for options column Single line of text, without quotation marks Options
|img-blank= Image used for the blank status Any Image URL (recommended size of 15x16) http://checklist-app.wikidot.com/local--files/checklist/checklist_blank.jpg
|img-checked= Image used for the checked status Any Image URL (recommended size of 15x16) http://checklist-app.wikidot.com/local--files/checklist/checklist_check.jpg
|img-x= Image used for the X-ed status Any Image URL (recommended size of 15x16) http://checklist-app.wikidot.com/local--files/checklist/checklist_x.jpg
|urgent-color= Changes the color of the urgent status Any color as a string or hex code #F00
|high-color= Changes the color of the high status Any color as a string or hex code #C0C
|middle-color= Changes the color of the middle status Any color as a string or hex code #0A0
|low-color= Changes the color of the low status Any color as a string or hex code #009
|trivial-color= Changes the color of the trivial status Any color as a string or hex code #99C

Example:

If I wanted to make the urgent status blue and low status black, I would use this code in place of the one used above:

[[include :checklist-app:checklist
|urgent-color=blue
|low-color=black
]]

Template

The template page is used mainly for the purpose of directing the page back to the Checklist after a change has been made to it. The page has a special CSS definition that can make it difficult to edit if it ever needs to be edited. You need to append checklist:_template with "/edit/true/norender/true/redirect/true" to edit it. You may also use the form below to access the page easily.

The code below is placed on the checklist:_template page:

[[include :checklist-app:template]]

If you had placed your Checklist on a page other than the checklist page on your site, then you will need to specify the destination here. To do this, simply use the code below instead of the one directly above:

[[include :checklist-app:template |destination=THE URL]]

Replace THE URL with the URL of the page with the checklist include.

The Link

The link allows you to add a list item to the Checklist. It places the item in the correct category with the default settings of a blank status and middle priority. You can change the text that appears by using the code below:

[[include :checklist-app:link |text=Custom Text]]

Replace Custom Text with the text you want to use other than "Add Item".


For advanced users, you can further customize the link by allowing it to be inline with other text or formatting. Simply use the code below:

Text before \
[[include :checklist-app:link-advanced |text=Custom Text]]
[!----] text after.

The CSS

The CSS is the heart of how the Checklist looks. The imported CSS sets the default settings of how it appears (which is exactly how it appears on this site). Clicking the link below will reveal the CSS:

You can, via CSS, edit these classes to customize the looks of your Checklist. The below describes each class:

Class Description
.checklist-table This is the overall Checklist table.
.checklist-status-head This describes the heading cell of the status column. This cell has no content.
.checklist-item-head This is the heading cell of the item column. This cell has the content "List Item".
.checklist-priority-head This describes the heading cell of the priority column. This cell says "Priority".
.checklist-date-head This describes the heading cell of the date column. This cell says "Date".
.checklist-options-head This is the heading cell of the options column. This cell says "Options".
.checklist-status This class modifies the status cells.
.checklist-item This modifies the item cells.
.checklist-priority This modifies the priority cells.
.checklist-date This modifies the date cells.
.checklist-options This modifies the options cells.
.checklist-priority-set This class styles the setting priority options that appear when the priority of a list item is clicked.

Limitations

You may not use Wikidot modules (such as NewPage) in a list item since Wikidot modules cannot be nested.

The Checklist will not work in IE6. If you are using IE6, please consider upgrading your browser.

For those who do not need a priority setting, there is currently no way to remove it.

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