These tags can be used on any page, template, or message.  In some places, like the forum or chat rooms, not all tags will work.  Also, image/video tags in some places, such as the forum or comments, may display as a simple link to the file without any thumbnail or preview, depending on the settings for that location.

For a more simple introductory guide to content formatting, with examples, see the format guide.



[h]Section Header[/h]

[h id="optional_anchor_id"]Section Header[/h]

When linking to a page, add the anchor id to the end of the link, eg. /path/to/page#anchor_id.  This will auto-scroll to the section when the link is clicked.



These can be combined and nested. The opening tag activates or alters the style, the closing tag goes back to the default state for that style.

[b]bold[/b]

[i]italic[/i]

[u]underline[/u]

[s]strikeout[/s]

[color=red]red text[/color]  
Use any CSS color name or #1F2E3D hex RGB notation.

[background=yellow]yellow background[/background]
Use any CSS color name or #1F2E3D hex RGB notation.

[size=1]larger text[/size]
Positive sizes increase default text size.  Negative sizes go smaller.
Numbers between -5 and 5 are steps.  Outside of -10 and 10 are taken as a percentage decrease/increase.

[shadow="-0.2em 0.1em 0.4em blue"]text with shadow[/shadow]
The first number is the horizontal offset.  The second number is the vertical offset.  The third number is the blur radius.  The color is specified last, and can be any CSS color or #1A2B3C hex RGB notation.



[code]unprocessed monospaced code[/code]

[unproc]unprocessed [tags] [do] [nothing] in here[/unproc]



[sep/]  -  draws a horizontal separator

[quote]
quoted text block here
[/quote]

[codebox]
monospaced unprocessed text block here
[/codebox]

[indent]
here's some indented text
[/indent]


[center]
here's some centered text
[/center]


[right]
here's some right-aligned text
[/right]


[left]
here's some left-aligned text
[/left]




[url]/path/to/page[/url]  -  basic internal link
[url="/path/to/page"]click here[/url]  -  titled link
[url="/path/to/page" new=1]click here[/url]  -  open in new tab
[url="https://duckduckgo.com"]do a search[/url]  -  titled external link

Internal links must not be URL encoded, but external links should be.

If an internal link begins with ~/, it will be based at either the current page's /users/username base, or the site root.  Otherwise, if an internal link does not have leading slashes, it is relative to the current page's location.

URLs will also be automatically clickable even if not surrounded by a [url] tag.

Links may be subject to whitelisting if the site is configured that way, so any external URLs not on the list can automatically cause the message or page edit to be flagged for moderation before appearing to other users.

You can include an anchor at the end of any link by appending #anchorname.  If there is a [h id=anchorname] or [box id=anchorname] that matches, the page will auto-scroll to that section when the user clicks the link.



[img]goose.jpg[/img]
[video]fireworks.mp4[/video]
[audio]symphony.mp3[/audio]
[clear/]

The image or video or audio can be a full external URL, or an internal /path/to/file, or just a file name, in which case it must be located in /files or /users/username/files if the page is within /users/username.  If it begins with ./, it is relative path to the current page location.  If it begins with ~/, it is relative to the base /users/username path or the site root.

A style tag can also be included to control the presentation:

[img style=large]goose.jpg[/img]

There are several styles available.  All dimensions are in EMs:

rightthumb  -  10x10 thumbnail floating on the right
leftthumb  -  10x10 thumbnail floating on the left
rightmidthumb  -  15x15 thumbnail floating on the right
leftmidthumb  -  15x15 thumbnail floating on the left
rightlargethumb  -  20x20 thumbnail floating on the right
leftlargethumb  -  20x20 thumbnail floating on the left
jumbo  -  70x60 centered with frame
large  -  52x45 centered with frame
midsize  -  40x30 centered with frame
small  -  27x23 centered with frame
tiny  -  20x16 centered with frame
thumb  -  10x10 centered with frame
midthumb  -  15x15 centered with frame
full  -  as large as will fit on page, up to size of image, centered, with no frame
inline  -  can be placed in text inline, up to size of image, with no frame

Layout can be controlled more precisely using advanced attributes.  When used with a style, they override the style values.  Here are some examples:

[img width=30em height=30em pos=left]goose.jpg[/img]
[img pos=floatright height=23em comment="Here is a goose."]goose.jpg[/img]
[img pos=center frame=0]goose.jpg[/img]
[img width=27em height=10em stretch=1]goose.jpg[/img]

An image can be hidden by including show=0 in the attributes.  This is useful for having a specific page-thumbnail for use in automatic feeds and within [items] tags as documented below.  In those situations, the page thumbnail is usually the first [img] tag encountered, even if it is not showing.

The pos attribute can be center (default), inline, floatleft, or floatright.

Use the [clear/] tag to push everything following it down past any floating multimedia items, which use the leftthumb or rightthumb styles or their variants, or the pos attribute equal to floatleft or floatright.



[chat/]
Places a simple chat-room in the page.  Add id=/some/other/page to share a chat room over multiple pages.  The default id is the current page path plus an underscore and an index if there is more than one on a page.

[recommend/]
This will show recommendations for other pages, based on this page's tags, which are set within [tag] sections.  There is a template used for this, so it can be customized.

[comments/]
Places a comment section on the page.  Creates a post to hold comments in the default forum at /forum or /users/username/forum if the page is within a users home.

[comments="/path/to/forum"/]
Places a comment section on the page.  Creates a post to hold comments in the forum specified.

[comments="/path/to/forum/123"/]
Places a comment section on the page that uses a pre-existing forum post.

You can also add the attribute style=newest to show the most recent comments first, or use style=last to show the last few comments from oldest to newest.  Add an underscore and a number to the style name to limit the count, for example style=last_15 will show the last 15 comments.  The default style is style=oldest_500, which in most situations shows all comments in chronological order.




The items tag allows you to post dynamically updated lists of headlines with image, title, description, and link.  The source of these links can be from manually added URLs, which are scanned for meta-info, or an RSS/Atom feed URL which will be scanned for updates in the background.

If an items tag is on a page, append ?add to the page's URL and you will be presented with a space to enter one of more URLs.  Once they are submitted, they are scanned for meta-info such as title, description, and image.  The meta-info is used to add the new item summary to the page.  Most pages on the web, including any regular page on Super Simple Server, have meta-info embedded in the page HTML, which is used for the item summary.  For pages served by Super Simple Server, the page description meta-info is controlled with the [desc] tag that is documented in the next section.

Any page with an items tag can also be accessed with ?addfeed on the end of it's URL, for example /path/to/mypage?addfeed.  You will be presented with a space to enter one or more RSS/Atom feed URLs, which will be used to automatically add new item summaries.  You can also use any regular page on Super Simple Server that has an items tag as a feed itself by simply adding the page's URL.

Add disp=50 to limit how many items show when the page is rendered.  Add max=100 to limit the number of items that are buffered in total.  Note that if there are multiple feeds, the number of items buffered may exceed the max in order to track updates accurately.

You can also limit the number of items displayed with image and/or description by using disp_img=5 and/or disp_desc=5.  You can prevent images and/or descriptions entirely by setting noimg=1 and/or nodesc=1.

The display of item author, domain, and the posted time can be added using show_author=1 show_domain=1 and show_time=1.  This information isn't always available for every item, but most feeds will include it.

Add group=yourgroupname if you are using multiple [items] in a page.  When you are adding via ?add, you can use ?add&group=yourgroupname to add to the specific instance you choose.  Using this system, you can have "add links" on the page, for each instance of items, much like on our example multiple-column layout.

[feedstatus/]

This will show a table of all feeds referenced in any [items] tags on the page, along with the update status, and possibly a refresh button if the user has permission.

An example of a functional feed reader is in a user's home area, at /users/username/reader, if the user's home area has been created.  If not, the user home area can easily be created by going to /admin/users/username and clicking a button.



[desc]Put a one-line brief description for this page here.[/desc]
[author]Willy Dewer[/author]
[tags]news,local,politics[/tags]

These tags affect the page's meta-info, which is rendered embedded in the page HTML.  This meta-info is used in Atom/RSS feeds, and also when scanning a link that has been manually added to an [items] tag.  This is also used by [recommend/] tags to associate relevant pages.

Normally the text within these tags is hidden upon rendering, but if you add show=1 to the opening tag it will show the contents like normal inline text.



[box color=grey img=background.jpg]

Boxes can be used to organize content on a page, and are very useful alone, or when combined with [column] tags.  They are often the basis of complex layouts.

The color and img allow the background to be styled.  Colors can be any standard CSS color or hex format.  The image attribute follows the same rules for the source for an [img] tag as documented above.

The margin padding gradient shadow overflow hoverflow overflow border topborder bottomborder leftborder rightborder attributes can be used with standard CSS parameters which are passed through to the rendered output after validation.

The dimensional attributes width height minwidth minheight maxwidth maxheight are standard CSS parameters which are passed through after validation.

The default text style can be controlled by attributes font spacing and size.  Spacing and size are in standard CSS dimensions, so you can specify 15px for 15 pixels or 2em for 2 EMs.  The font attribute controls the font-family CSS property.

The new CSS flex-box specification can also be used.  Use layout=columns or layout=rows on an outer container box, and then each inner box can be proportionally expanded using expand=1, with it's portion of the overall expansion determined by the number.  The outer box can also have wrap=1 to allow boxes to wrap to the next line.

Use the id attribute to set an anchor name.  Then to create a URL that points to this specific part of the page, append #anchorname.  When someone clicks on the link, it will auto-scroll the page to the specified [box id=anchorname].


[column]
This is the first column's content.
[/column]
[column]
This is the second column's content.
[/column]


By default, columns will split the available space evenly.  They can also be set to a fixed width, using the width attribute, for example [column width=20em].  Make sure there are no empty lines or anything else between the closing [/column] and the next opening [column] or else a new set will be started on the next line.

Alignment within the column can be specified with align and valign for vertical alignment.  The standard CSS values can be used.

The margin and padding attributes can be used with standard CSS parameters which are passed through to the rendered output after validation.

The color attribute allows you to set the background color of the column.

[vspace=3em/]  [hspace=5em/]
These spacing tags can be used as need to insert precise amounts of horizontal or vertical space where needed.

[mirror="/path/to/other/page"/]

The mirror tag reflects all the content from another page and can be extremely useful for complex site structures and layouts.  Note that the rendering of the content from the target page is still subject to the usual permission checks.



[custom=examplename/]

This will inject raw HTML from the file at config/mysite.example/0_site/custom/examplename.txt.  If the file content starts with {{}} flag, it will be processed for inline variable insertions using {{myvariable}}, as outlined in the Variables / Conditions section below.

You can also inject custom CSS rules inline into the header of all generated output by putting them in config/mysite.example/0_site/custom/inline.css.



These are mainly used in templates.

[form/]
[checkbox/]
[radiobox/]
[filesel/]
[editbox/]
[searchbox/]
[combobox/]
[textbox/]
[button/]
[progress/]



[if var=value]  ...  [/if][else]  ...  [/else]
You can also use var=value+ if you want to test if a string variable begins with the value.

[set var=value/]
Sets variable named set_var to value.  Note that the name always has set_ prepended, to indicate it is a user-written variable.  This is necessary to avoid security problems.

[source=var/]  Sets the current variable base to var, so that all lookups with first try to find the variable within the map being held in var.

[placeholder=name/]  Used in the chat embed, as a means of flagging a text insertion point used by JavaScript.

{{myvariable}}  Inserts the contents of myvariable in-line.

{{time!myvariable}}  Inserts the contents of myvariable as a time.

{{stime!myvariable}}  Inserts the contents of myvariable as a time, expressed in time since current.

{{since!myvariable}}  Inserts the contents of myvariable as a number of seconds/minutes/hours ago.

{{span!myvariable}}  Inserts the contents of myvariable as a time span in 1:02:03 format.

{{spanshort!myvariable}}  Inserts the contents of myvariable as a time span in 1h 2m 3s format.

{{spanlong!myvariable}}  Inserts the contents of myvariable as a time span in 1 hour 2 minutes 3 seconds format.

{{expand!myvariable}}  Inserts the contents of myvariable in-line, first expanding any nested {{...}} within.

{{url!myvariable}}  Inserts the contents of myvariable after URL-encoding.

{{urlseg!myvariable}}  Inserts the contents of myvariable after URL-segment-encoding.

Parsing of {{...}} works in all plain-text, and also for attribute values in many tags.



These are mainly used in templates.  More information will be posted soon.

[list]
[content]
[message]
[output]
[noscript]
[nop]
[split]
[vcenter]
[foldemptyline]
[pre]
[span]

 

Some tags support the id class and/or name attributes.  These are mainly used in templates for form controls.  In some tags, id can be used to specify a #anchor target.

[h] [img] [url] [code] can not have tags within, other tags are ignored until closing, and they end at the end of line automatically.

[center] [left] [right] [indent] [h] are ignored within a [quote].

[center] [left] [right] [indent] override each other.  Only one of these modes applies at any given time.  [quote] are intrinsically preceded with [left].