Get started with Lightnote CMS

Get started

Lightnote CMS requires basic understanding of Smarty syntax for writing templates and PHP+MySql knowledge for writing user extensions.

Download
Install
1. Extract downloaded archive on your server.
2. Make sure that following directories have write permissions:
  /cache/
  /data/
  /cms/log/
  /cms/inc/
  /cms/inc/compiled/
  /extensions/
  /templates/
  /templates/pages/
  /templates/content/
3. Open http://your-website.com/[PATH TO CMS]/index.php, this will autmatically start setup.
4. Read license agreement, press "I accept the agreement" if you accept it, and click "Next".
5. Enter the name of the website, the password for "root" user and specify how long CMS should keep login cookies and then click "Next".
6. Enter database connection settings and click "Next".
7. Finish installation by clicking "Finish" button.
8. After that login into CMS (http://your-website.com/[PATH TO CMS]/cms/):
  Username: "root"
  Password: [the password you have specified in step 5]

Create page template

Now let's create a page template:

Download template files

Go to Administration > Templates & Content Elements > Add Template (in toolbar at top) > Page Template

Enter the name of template "hello_world". And enter contents of index.html and config.xml as specified below:

config.xml:

<?xml version="1.0" encoding="utf-8"?>
<PageTemplate>
  <friendlyName>Hello World!</friendlyName>
 <author>Your Name</author>
    <version>1.0</version>
    <structure>
     <column>
            <friendlyName>Content</friendlyName>
          <width>60%</width>
        </column>
       <column>
            <friendlyName>Sidebar</friendlyName>
          <width>40%</width>
        </column>
   </structure>
</PageTemplate>

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>{$page->GetTitle()}</title>
     {$page->GetHeaderHtml()}
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
  </head>
 <body>
      <div id="page">
           <div id="header"><h1>Hello World!</h1></div>
            <div id="menu">{menu from=0 levels="2"}</div>
         <div id="content">
                {content column=0}
            </div>
          <div id="sidebar">
                {content column=1}
            </div>
          <div class="clear"></div>
       </div>
  </body>
</html>

Create following page structure:
Go to page properties of each page and change template to "Hello World!" and switch "Visibility" status to "Visible".
Add some content to pages (to column "Content").
Now if you go to front-end you should see something like that:

Now let's stylize page with some CSS.
Add these two lines in the header of index.html :

<link href="{$smarty.const.REL_PATH}cms/libs/yui/reset-fonts/reset-fonts.css" media="all" rel="stylesheet" type="text/css" rev="stylesheet" />
<link href="{$smarty.const.REL_PATH}{$smarty.const.TEMPLATES_PATH}pages/hello_world/style.css" media="all" rel="stylesheet" type="text/css" rev="stylesheet" />

style.css:

div.clear {
    clear: both;
}
h2 {
    font-weight: bold;
    font-size: 18px;
    margin: 15px 0 8px 0;
}
p {
    margin: 10px 0;
}
a {
    color: #0971ad;
}

/**
        HEADER
************************/
#page {
    margin: 10px auto;
    width: 800px;
}
#page #header {
    background: transparent url(images/hello-world.jpg) no-repeat;
    height: 134px;
    margin-bottom: 5px;
    width: 800px;
}
#page #header h1 {
    display: none;
}
#page #menu, #page #content, #page #sidebar {
    float: left;
}


/**
        MENU
**************************/

#menu {
    margin-top: 14px;
    width: 160px;
}
#menu li {
    margin: 2px 0 2px 20px;
}
#menu li.active a, #menu li.active li.active a {
    font-weight: bold;
}
#menu li.active li a {
    font-weight: normal;
}



/**
        CONTENT & SIDEBAR
**************************/
#content {
    width: 475px;
}

#sidebar {
    float: right;
    padding: 20px 0 0 20px;
    width: 145px;
}

/**
        TEASER
************************/
div.teaser {
    margin-bottom: 20px;
    width: 142px;
}
div.teaser div.hd {
    background: #0093e6 url(images/teaser-hd.gif) no-repeat;
    color: #fff;
    font-size: 12px;
    padding: 3px 0 0 10px;
}
div.teaser div.bd {
    background: #e5e5e5 url(images/teaser-ft.gif) no-repeat left bottom;
    font-size: 12px;
    padding: 10px;
}
div.teaser div.bd b {
    display: block;
}

Now you should see something like this:

Create custom content element(s)

Go to Administration > Templates & Content Elements > Add Template > Content Template

Enter the name of template "teaser". And enter contents of index.html and config.xml as specified below:
config.xml:

<?xml version="1.0" encoding="utf-8"?>
<ContentTemplate>
   <friendlyName>Teaser</friendlyName>
   <author>Your name</author>
    <version>1.0</version>
    <userControls>
      <textbox multiline="false" name="subheader" friendlyName="Sub header"></textbox>
        <textbox multiline="true" name="text" friendlyName="Text" maxlength="255"></textbox>
  </userControls>
</ContentTemplate>

index.html:

<div class="teaser">
    <div class="hd">{$element->header}</div>
 <div class="bd">
      <b>{$data.subheader}</b>
      {$data.text}
  </div>
</div>

Go to page browser, click Add Content button > Sidebar > Content element > Teaser
And finally, our front-end should display now something like that:

Lightnote CMS - web 2.0 content management system

Get started