Lion Help

This page contains help for the Lion product.



In Lion, a page represents a Browser URL:

The page name is the last part of the URL, in this example importantLinks. A page has a layout which describes its structure, for example:

The structure is typically defined using tables, for example the above layout has one column with 4 rows. It doesn't have to be uniform, i.e. you can merge cells, as the following layout shows:

Equally, you could even define a layout that doesn't depend on a table. Your site can have many different layouts, but each page must use just one layout. Layouts are re-usable. For example most of your pages might be based on a main layout, but your blog might have a different layout than those other pages on your site.

The structure contains placeholders, for example "search" or "content" in the above screenshot. Placeholders are markers in the layout that will be substituted with content, or so called sub-pages.

To make layouts re-usable, each page has a mapping, which tells Lion which sub-pages to substitute into the placeholders on the page. The mapping is created by simply telling Lion which sub-pages to put into which placeholders, and doing so is made easier with the help of auto-complete which shows you a list of all the sub-pages that you have already created:

Editing content is done by editing individual sub-pages with a rich editor:

You can upload images and place them in your sub-pages by using the editor:

The last major component to building your site is the styling. Unfortunately this is where it gets technical, because Lion give you the power to edit the CSS (Cascading Style Sheets) of your site. Don't worry though, if you need help, just ask Ant. If you have an existing site in mind, which you would like your site to be similar to, that helps a lot, since the styles can be copied.

Lion can do more than just help you edit pages. It lets you backup your site with a single click. Restoring the site if you break it is just as easy.

Lion also contains plugins for searching your site and for adding a simple blog to your site.

These concepts are all shown in the following diagram, for example, a mapping references sub-pages and it contains placeholders:

Logging in

In order to manage your content, you need to login. Click on the link at the top right (highlighted in the following screenshot):

Enter your email address and your password, and click "Login" to continue:

Once you have successfully logged in, the top right of the page will contain links that you can use to manage your content.

Adding a new page

To add a new page to your site, ensure you are logged in and then click the "create" link at the top right of the screen:

Choose "new page" and then click "OK":

Fill in the name of the page, choose the layout you want to use, and enter a title (shown in the title bar of the browser). The name should not contain spaces - it is suggested that you capitalise each new word to make the name more readable. The name will be used in the URL of the page so it cannot contain any special characters like a forward slash (/).

On the next screen you need to choose the content of the new page. The layout you chose in the previous screen is shown at the bottom of the page. For each placeholder listed in the layout, you can choose a sub-page that will be substituted into it's place, when the page is rendered (see the highlighted parts of the screenshot below). By default, this screen suggests sub-pages to use, but they are only a guess. To see which sub-pages already exist, delete the content of one of the fields and an auto-complete popup will show you what sub-pages already exist. Choose either an existing one, or simply enter the name of a new sub-page to create. Normally, you would create just one new sub-page for your page, and re-use existing sub-pages for all the other parts of the page, for example the header, search bar or menu.

In this example I know that there is no sub-page named "header". I know this because I am the author of the site and I know which sub-pages I have authored. However, you can also check each entry on the screen, to see if a sub-page with the name already exists. This is shown below, for the "header" placeholder:

For this new page, we want to re-use the search, top and main-navigation sub-pages. But we want to create a new sub-page with our new content, and we choose to name this sub-page "importantLinks". Once we have chosen the sub-pages to be used on our new page, we can click the save button. Don't worry if you make a mistake, you can fix it later.

Saving the new page results in a new page as shown below. The URL contains the name of the page, so you can easily share it with friends, or they can easily share your page on social media. You can see the different sub-pages shown below. But we aren't quite finished, because the content of the 'importantLinks' sub-page is still empty. The next section will show you how to edit this sub-page and fill it with meaningful content.

Editing a sub-page

After logging in, you are in "viewing" mode, i.e. the site is shown exactly how the public will see it. To change content you need to enter "editing" mode by clicking the link at the top right of the screen:

Once you are in editing mode, sub-pages are highlighted yellow when you move the mouse over them. They also have an "add" or "edit" button added to their right side when the mouse is over them. Click the button to add/edit the sub-page.

To add content, just start typing! Once you are done, save the content by clicking the save button, which looks like a little disk:

Lion will then return to the page and show you the results.

Creating a link to a page

You can add links by highlighting the words you want to use in a link and then clicking the little button that looks like a few links of a chain (its tooltip when you hover the mouse over it, is "link"):

That opens a dialog box where you can enter the URL of the website to link to, or to the page of your site that you want to link to.

If you want the browser to open a new window/tab when someone clicks the link, then tell it to do so on the tab named "target", as shown below:

You can edit a link at any time while you are editing the contents of a sub-page. Right-click on the link and select the "edit link" menu option:

To link to a page within your site, you enter a "relative" URL in the dialog box, i.e. a URL without the domain name (e.g. - just enter "/browse/" followed by the name of page you are linking to. For example, "/browse/moreImporantLinks":

Save the page and then click the newly created link. Lion will display the "page not found" message, if the page named "moreImportantLinks" does not yet exist:

As you did above,
create a new page with the name "moreImportantLinks" to fix the broken link.

Adding images to your site

You can upload images and put them into your sub-pages when you
edit them. Click the "image" button on the toolbar:

This opens a dialog where you can choose an image, or upload one to the web server, and then choose it. Clicking the "browse server" button lets you see images which have already been uploaded to the server.

The dialog then shows a list of available files. The text next to the image is a) the file name, b) its size in bytes and c) the date and time when it was uploaded. Choose one by double clicking on it.

After choosing an image by double clicking on it, the dialog shows a preview of the image and you can see that a URL has been automatically added to the dialog. Click OK to add the image to the sub-page.

Once the image has been added to the sub-page, you can see it embedded in the content which you are editing. You can edit the image at any time by right-clicking on it and selecting "image properties":

That opens the same dialog box which was used to add the image to the page. If the image you want to add has not already been uploaded to the server, you can upload it from your computer by using the "upload" tab in the dialog box. Choose a file from your computer and click OK, which will show the file name next to the "choose file" button. Then click on "send it to the server".

The dialog box then switches back to show you a preview of the image, together with the URL that will be used for the new image. Click OK to add the newly uploaded image to your sub-page.

As before, the image will then be shown embedded within the content. Once you are happy with the content of the sub-page, click the save button:

The image is now "live" on your site:

The home page

The home page of your site is a little special. It has no page name! Well, that's not entirely true, its page name is "root". A link to your home page doesn't contain the page name, as a normal page would, rather the link to the home page is simply: / i.e. a forward slash.

Editing the layout

Your site's layouts are a fundamental part of your site which controls what the site will look like. It is recommended that you create your layout using tables as this is simplest, but by all means, Lion lets you create layouts however you want them. To edit the layout of a page, first ensure you are in
"editing" mode. Next, move the mouse over the black area at the top of the page, named "edit menu". This opens the menu which shows you all of your pages, sub-pages, etc. More information is available below.

The edit menu shows you a list of all the layouts that are available on your site. You can now either edit the layout for the current page by clicking near the top of the edit menu, or you can click in the middle of the menu to edit a specific layout. Note however that if you edit the layout for the current page, you will automatically be editing the layout for ALL pages that use that layout! Instead, let's start by adding a new layout. Click on the "create" link at the top right of the screen (ensuring that you are already logged in).

In the dialog box that is opened, choose "new layout" and click OK:

This takes you to a page where you are prompted to enter a unique name for the layout.

After that you end up in the same editing screen as you do when editing sub-pages. The editor initially contains a table. You can delete this table and insert a new one, using the "table" button from the toolbar:

Insert a 3x3 table which will be the entire width of the page (100%). Set the border of the table to be 0 pixels (dots) wide. When you close the dialog, the editor will contain an empty table. To make editing easier, fill the table with the letters a-i - this way it becomes easier to select cells. Let's merge all the cells in the left column. This is done by right-clicking on a sell and selecting "merge down":

Do the same in the merged cell to merge it with the bottom left cell. Next, insert an image into the left hand column (instructions are above). If you need to adjust the properties of a cell, you can do so at any time by right clicking on the cell and using the menu to open the properties dialog.

For the next step, replace the letters you entered earlier with placeholders - note that the placeholder names go between hashtag and brackets! I have used the following: Before adding the placeholder for the search, merge the cells in the right hand column. Once they are merged, enter the placeholder text and then right-click on the cell and edit the cell properties, so that we can tell it to put the search form at the top of the column, rather than in the middle.

If you need it, there is more information about HTML tables available here: Next, save the layout by clicking the save button:

Up to this point we have created a new layout, but we do not yet have any pages which use the layout. Let's create a new one (for more details, see above).

It is recommended to give pages a good name, so that organising your site as you add more pages stays easy. Here I have chosen to prepend the page name with "books_" since that indicates to me that the page is one of the ones where I am writing about books which I am reviewing on my site. Note that if a blog is more suitable for what you want, Lion has an integrated blog which is described below.

The next task is to edit the page mappings. On this page we need to tell Lion which sub-page to substitute into the layout. That means each of the placeholders which we used in the layout above are listed. For the summary, I will create a new sub-page named "books_peter_summary". Notice again how the name makes organisation simpler, because the name gives the context in which I intend to use the sub-page. For the search area I will use the standard Lion search sub-page, named "search". For the main navigation area I will re-use my standard navigation menu. The lengthy description of the book "Peter" comes from the sub-page named "books_peter_content", which again has a name which will help me organise my content in the years that come.

Once I save the mappings, the newly created page is shown, and I can see how my new layout looks. As long as you are in "editing" mode you can add/edit the content of the sub-pages referenced in the mapping, by clicking the appropriate button.

Once the content is saved, the page and its new layout look quite pretty:

The edit menu

If you are in
"editing" mode you will get a black menu bar placed at the top of the page. Move the mouse over the black bar to display the menu. Click anywhere on the menu to hide it again.

The edit menu contains the following lines.

Top row Here you can:
  • Edit Mappings - edit the mappings from placeholder to sub-page name, for the current page. More information.
  • Edit Layout - edit the payout for this page. But be careful, you will be editing the layout which might be used by several pages! More information.
  • Backup your data - With one click, you can download a ZIP file which contains all your content. Keep the file safe, as you do with all your backups! More information.
  • Restore your data - With a few clicks, you can upload a ZIP file from a previous backup to restore your site to the way it was when you backed it up. More information.
Pages A list of every page that exists on your site. Note that you might have pages which no other page links to - so this menu is the only way to get to those pages to see and edit them. The following pages are special:
  • ERROR - a page which displays any errors which happen when using Lion. Hopefully the people reading your site will never see this page. But if they should happen to see it, you can customise how errors are displayed to them. More information.
  • SEARCHRESULTS - the page which displays search results. Lion will search all of your pages and any which contain the text that is being searched for will be listed using this page. You can customise this page. More information.
  • PAGENOTFOUND - If someone clicks on a link to a page which doesn't exist, Lion will display this page. You can customise its contents.
  • ROOT - Your site's homepage. More information.
Sub-pages A list of all the sub-pages that you have created. Clicking here will take you to the editor where you can change the contents of the sub-page. The editor page now also shows a list of all the pages which use the sub-page.
Styles Here you can click on a style to edit it. Currently, Lion offers one style per site. More information.
Layouts Click on the layout that you want to edit. More information.
Unpublished blog articles Any articles which are not publicly available are listed here. More information.
Unauthorised comments Pages listed here have comments which need to be authorised by a moderator. More information.

Editing page mappings

Go to the page for which you want to edit the mappings. Ensure that you are in
"editing" mode and open the edit menu. Click the link named "edit mappings":

A page is opened which allows you to specify which sub-pages should be used on this page. As a reminder: the page has a layout which contains placeholders. You must tell Lion which sub-pages to use in place of the placeholders. To help, the layout which is being used for the page is shown in the lower half of the screen.

Styling your site

To edit the style of your site, ensure that you are in
"editing" mode and open the edit menu. Click the link named "MAIN CSS":

The cascading style sheet (CSS) for your site is a text document which tells the site which fonts, colours, spacings, etc. to use.

More information is available at

It is highly recommended that you ask Ant for help with editing the style.

You can also change two other files that affect the styling of your site. The first is the icon which Lion gives to the browser, which it then uses on its tabs / bookmarks:

To edit this icon, first download it by typing a URL similar to the following into your browser:

Backing up or restoring your site

It is recommended that you backup your site regularly, so that not only the content which you manage is backed up, but also so that comments which people leave on your site are backed up. The backup and restore process is also used when moving your content from your test server to the live server (more information

To backup your data, ensure that you are in "editing" mode and open the edit menu. Click the link named "Backup your data":

A ZIP file will be downloaded which you may or may not be able to open on your computer, depending upon whether you have a program like "7 ZIP" installed. While you don't need to be able to open the file, it might be interesting to know what is in it.

The file contains all of your content in a compressed format. Notice how the filename contains the date and time of when it was created. This is useful for organising your backups and chosing the correct file when restoring your website to a given version. You can change the name of the file without affecting future restores. The ZIP file contains folders: TODO restore

The search plugin

TODO ![searchResults]

The error page

TODO ![error]

The blog plugin

TODO TODO unpublished articles

Comments on pages and the blog

TODO TODO blogs / pages what need comments to be authorised

Testing and migrating your site



Word Description
Layout TODO
Mapping TODO
Page A page is represented by a URL, for example the page "importantLinks" is represented by the URL The page name is the part of the URL after the word "browse", i.e. it is the page which a user reads.
Page Name The name of a page, to uniquely identify it. A link from one page to another is created by using the page name, for example: /browse/importantLinks
Placeholders TODO
Sub-pages TODO

Known Issues

Problem Explanantion Workaround
I want sub-pages to be next to each other, but they end up one below the other. When you edit a sub-page, Lion puts it inside its own paragraph. That means that you can create a layout with two placeholders next to each other within a cell of a table, but because each sub-page is wrapped in a paragraph, they end up below each other. The problem comes about when you create a layout with two placeholders within a single table cell, for example: <td> &hash;{placeholder1} &hash;{placeholder1} </td> The solution to this problem is to lay the placeholders out so that they have their own table cells. So that they remain next to each other, rather than one below the other, place the two table cells in the same table row, for example: <tr> <td> &hash;{placeholder1} </td> <td> &hash;{placeholder1} </td> </tr>

powered by maxant