Help page

[rr-]

• [x] Mockups
• [ ] Implementation

[oczki]

Basic editing

To edit text in a cell, point the mouse cursor at it and click the blue icon that will appear on hover. After modifying the text to your liking, you can either accept the changes (by pressing [Enter] or clicking outside the cell) or discard them by pressing [Esc]. Pressing [Tab] will save changes and move on to the next cell, while [Shift]+[Tab] will go to previous cell after saving.

If columns are sorted, adding new row will not apply the sort until you click on any of the headers or reload the page. This way newly added rows always appear on the bottom of the list.

To remove a row, select its checkbox to the right and click [Delete selected] at the bottom of the page.

That's all you need to know to start basic editing!

Simple tags

Tags allow you to easily change the appearance of text, its background and other cell properties. All of them consist of square brackets and class name in between them. The simplest tags include:

Tag	Example	Result
[b]	[b]bold[/b] text	bold text
[i]	[i]italic type	italic type
[u]	[u]under[/u]lined!	underlined! (GitHub doesn't allow underline, can't show example)
[s]	strike[s]through	strike through (this should not have the space)
[url=...]	[url=http://example.com]Click me![/url]	Click me!

With the exception of URLs, tags don't really need to be closed if it's not needed – the engine will take care of them. Below are some predefined color tags:

Color tag	Result
[red]	fire red (make this column colorful)
[orange]	juicy orange
[yellow]	lemon yellow
[green]	fresh green
[teal] or [cyan]	light blue
[blue]	bluer blue
[violet] or [purple]	royal purple
[pink]	am I cute?
[white]	I'm here!
[gray] or [grey]	between white and black
[black]	lack of light

You are not limited to these tags, of course. With proper use of advanced tags and CSS classes, the possibilities grow endless.

Advanced tags

First things first, we need to make something clear – the above basic tags only apply to <span> elements of the table, which simply surround the text. If you need more control than just coloring the text, read on.

Basically, what each [tag] does is apply a specific CSS class to the element. If it has no prefix, it only applies to text span; however, you can make it apply to the whole cell or even the entire row:

Prefixed tag	CSS class	Result
[red]	.span-red	red text /after the tag/ (the latter part in color)
[cell:red]	.block-red	/entire cell is red/
[row:red]	.block-red	/the whole row gets redder/

Combining tags is pretty straightforward: [row:blue][row:i]Blue italics that [red]suddenly turn red!

This method allows you to create new CSS classes and write rules that will modify the look of elements to your liking. Of course, you're not limited to styling based on tags alone – you can change the appearance of pretty much anything on the page when the styled list is displayed. Go ahead and experiment a bit – move and resize buttons, add backgrounds or animations; do whatever CSS3 allows.

Alternatively, keep it simple and stick with the default look.

If you've gone too far and got stuck with broken CSS (e.g. made the whole page invisible), you can go directly to list settings through http://lane-example.com/edit/listName.