Back to top

Website: Markup

This page explains the (stupid) BBCode inspired markup syntax. It's used throughout the entire website, from the photo books to events and committee pages. It's weird, ugly, inconsistent and now even documented. We'll hopefully replace it with Markdown soon.

Simple tags

  • [h1] - [h6] heading ([h1] is used as page title)
  • [i] italics
  • [b] bold
  • [u] underline
  • [s] striketrough
  • [ol] ordered list
  • [ul] unordered list
  • [li] list item
  • [center] centered text
  • [hl] highlighted text (doesn't work)
  • [small] small text

Use any of these like

[b]bold text[/b]
[url=https://www.svcover.nl]Cover's website[/url]

You can do any url:

[url=mailto:board@svcover.nl]Mail the board[/url]

It also renders naked links and email addresses properly.

Images

[img=https://sd.svcover.nl/Logos/Cover/cover_logo.jpg]

Or add the .company-logo css class:

[img.company-logo=https://sd.svcover.nl/Logos/Cover/cover_logo.jpg]

Videos

[video=https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4]

YouTube

[youtube=dQw4w9WgXcQ]

Tables

[table noborder]
|| table row 0 cell 0 || table row 0 cell 1 || table row 0 cell 2 ||
|| table row 1 cell 0 || table row 1 cell 1 || table row 1 cell 2 ||
|| table row 2 cell 0 || table row 2 cell 1 || table row 2 cell 2 ||
[/table]

(noborder adds a css class that removes the border)

Mailinglist

[mailinglist]14[/mailinglist]

Includes a subscribe button for a mailinglist by ID.

Members only content

[membersonly]You cannot see this unless your logged in.[/membersonly]

or

[membersonly=Hidden content title]You [b]cannot[/b] see this unless your logged in.[/membersonly]

Will hide content for non-members and show a link to the login page instead. Supports an optional title which will always be rendered, to label the hidden content more clearly.

The hidden content can contain any other markup.

Summary

[samenvatting]This is a summary of the page[/samenvatting]

This is used on committee pages (and some other pages) to provide a summary.

Member Block

We have implemented this block specifically for the board page, so that board members can also present themselves individually with a short text, but it can be used in multiple instances.

This is the syntax:

[member name="<name>" position="<position" image="<image url>"]
<description>
[/member]

The name parameter is required, while position and image are optional. If position is left out, the text will just not appear. If image is left out, it will be replaced by a dark blue-grey placeholder.

If multiple instances of this block are present on a page, then they are automatically alternating between left image, right description and left description, right image.

FontAwesome (icons)

To insert icons anywhere on the website (specifically fontawesome icons), you can use this shortcode:

[fontawesome icon="fa-envelope" label="Email"]

The label parameter is optional, but recommended for SEO and accessibility reasons. The icon parameter value can be taken from the fontawesome cheatsheet, which can be found here: https://fontawesome.com/v4/cheatsheet/. Please note that not all of these icons will work, since we are using a slightly older version of the font than the one in the v4 cheatsheet.

Weird stuff

  • [[commissie(AC/DCee)]] renders link to committee
  • [quote=Martijn]Hello![/quote] renders a quote (badly), name optional
  • [code]hello_world()[/code] renders code (badly)
  • [prive]this is a comment[/prive] does not render contents (for commments)
  • <:|, :), :(, ;), ;(, :|, :@, 8o, :d, :p, :s, x-p, [oops], [oeps], [bye] and [hug] (and their counterparts with a - for a nose) all render some sort of smiley, but please use emoji instead. We're in the 2020's now.

documentation/website/markup.txt · Last modified: 2023/10/21 18:54 by Fabian Cuza