Roll Your Own

Making layouts for start.io is amazingly simple. You too can become a master.

Basic Example

It's all based on the concept of “blocks.” In the most basic form, a layout can be as simple as a few lines.

<html>
    <head>
        <title>{Name} @ start.io</title>
    </head>
    <body>
        {Groups}
            <h1>{Name}</h1>
            <ul>
            {Links}
                <li><a href="{Permalink}">{Title}</a></li>
            {/Links}
            </ul>
        {/Groups}
    </body>
</html>
Yep, that's it!

Getting More In-Depth

start.io uses elegant naming structures, so it's simple—and robust.

General Information

Basic information about the startpage, independent of the blocks below.

{Username}The username of the startpage.
{UID}The unique user id of the user.
{Name}The name of the user.
{Permalink}The link to the user's startpage.
{Target}The user's preference whether to open links in a new window or not. Use wherever target="{Target}" is valid.

Groups Block

Rendered for each group.

{Links}{/Links}The block containing all the links within this group. See below.
{ID}The unique id for this group.
{Name}The name of the group, with the user's formating
{IntName}The name of the group, transformed to lowercase with no formatting.
{Permalink}URL to display a single group by itself.
{Color}The color for this group specified by the user.
{Default}Set to true for the user's default group, otherwise set to false.
{Count}The total number of groups within this block.
{Updates}The total number of links within this block that are marked as {Updated}.
{Iteration}A number beginning with 1, increased by 1 for each group within the block. Less than or equal to {Count}.
{First}Set to true for the first group in the block, otherwise set to false.
{Last}Set to true for the last group in the block, otherwise set to false.

Links Block

Rendered for each link within the parent group.

{Id}The unique id for this link.
{Title}The title for this link, supplied by the user. If no title is given, the {Address} is used.
{Address}The internet address for the link. This is intended for informational use only. Use {Permalink} when building the actual link.
{Permalink}Redirects the user to the link, but first checks the link's privacy and increases it's {Clicks} count.
{Color}The color for this group specified by the user.
{Clicks}The amount of clicks for the link.
{LastClicked}A Unix timestamp representation of the date and time the link was last clicked.
{LastUpdated}A Unix timestamp representation of the date and time the link was last updated.
{Updated}Set to true if {LastUpdate} is greater than (after) {LastClicked}, otherwise set to false.
{Count}The total number of links within this block.
{Iteration}A number beginning with 1, increased by 1 for each link within the block. Less than or equal to {Count}.
{First}Set to true for the first link in the block, otherwise set to false.
{Last}Set to true for the last link in the block, otherwise set to false.

Conditionals

Simple comparisons add more functionality

{if:Variable}
it's true!
{/if}
The most basic conditional. Checks to see if the given {Variable} is equal to true. If it does, whatever is inside the block is executed.
{if:Variable}
it's true!
{else}
it's not true :(
{/if}
If {Variable} is equal to true, whatever is in the first block is printed. If it's equal to false, whatever is in the second block is executed.
{if:Variable == "hello"}
hello there!
{else}
who are you?
{/if}
If {Variable} is equal to "hello", whatever is in the first block is printed. Otherwise, whatever is in the second block is printed. Instead of ==, you can also use < (less than), > (greater than), >= (greater than or equal to), or <= (less than or equal to).

<, >, >=, and <= can only be applied to values containing numbers.
{if:Variable > 10}
over 10
{elseif:Variable < 10}
under 10
{else}
exactly 10
{/if}
If {Variable} is less than 10, the contents of the first block is printed. If it's less than 10, the second block is printed. If neither are true, the final block is printed. You can use as many {elseif} blocks as you would like.

A More Advanced Example

Now let's put it all together!

<html>
    <head>
        <title>{Name} @ start.io</title>
        <style type="text/css">
            body {
                font-family: verdana;
                font-size: 12px;
            }
            
            h1 {
                text-align: center;
            }
            
            a {
                color: #333333;
                text-decoration: none;
            }
            
            a:hover {
                text-decoration: underline;
            }
            
            .group {
                background-color: #f1f1f1;
                border: 1px solid #ababab;
                padding: 10px;
                margin: 15px;
            }
            
            .group.group1 {
                background-color: #b1b1b1;
            }
            .group.group2 {
                background-color: #bebebe;
            }
            .group.group3 {
                background-color: #cccccc;
            }
            .group.group4 {
                background-color: #d6d6d6;
            }
            .group.group5 {
                background-color: #e4e4e4;
            }
            
            .group a.link {
                font-size: 15px;
            }
            
            .group a.link.updated {
                font-weight: bold;
                background: #fff8cc;
                border-bottom: solid 1px #ffe222;
            }
        </style>
    </head>
    <body>
        <h1><a href="{Permalink}">{Name}</a></h1>
        
        {Groups}
            <div class="group group{Iteration}">
                <h2><a href="{Permalink}">{Name}</a></h2>
                
                {Links}
                    <a href="{Permalink}" title="{Target}" {if:Color}style="color: {Color}"{/if} class="link {if:Updated}updated{/if}" title="{Clicks} Clicks">{Title}</a>{if:Last}. {else}, {/if}
                {/Links}
            </div>
        {/Groups}
        
    </body>
<html>
Copy and paste that into the settings page and start experimenting!