Web developer/designer guide

This section of the help file is intended for the web designer/developer who is going to setup the system. It is assumed that they are familiar with all the various web file formats (CSS, HTML, JSON, XML and so on). It is also assumed that they will be quite happy to hack around with the files using a text editor and upload them to a web server via FTP or their own preferred tools. If this doesn't describe you - you should probably stop now and pay someone else to do it. Or expect a very long learning curve!

Installing

Installation is fairly straightforward. You will need to get a copy of the single file 'install.php' from the nixCMS web-site. Copy this to the folder on your web-server where you wish nixCMS to be installed. Then set your browser to that location. The install script will run retrieving only those files that are required from the nixCMS repository. Installation completed. (For safety now delete the install.php script? Actually, you don't need to as it is blocked by the .htaccess file.)

After installing the files, you will need to check the settings in .htaccess. These need to be changed, so that calls are translated t othe current folder location (TODO: redesign .htacess so URLs are relative?)

Upgrading

For reference the same style of script is used to perform upgrades. Note that when doing an upgrade, the script attempts to do a three-way merge between the previous install/upgrade, the current files and the new files. This means that only files that have changed are downloaded and upgraded. It also means that any files you have changed are left untouched.

It is possible that a conflict can occur. This happens when the upgrade script detects a file that has chenged and should be upgraded that has also been changed by you since the previous install/upgrade. In this situation, the upgrade is aborted. You then have to decide whether to force through the upgrade or make changes to the modified files.

Adding users

There is no facility to add/change users within the user interface or editor. users can only be created by someone with developer access to the system. The process is as follows:

  1. Draw up list of users names and passwords
  2. Use the makehash.php script to convert these names/ passwords into a user hash table
  3. paste the generated code into the validate.php script at the place marked.

Changing or adding globals

nixCMS includes it's globals in a simple XML file, having the following format:

 
  <globals>
  <item name="brand" type="string" description="Short label appears in top nav bar next to logo." readOnly="false">nixCMS</item>
  <item name="newPage" type="memo" description="Initial text for a newly created page. Note: comments are stripped from final output." readOnly="false">
  ...
  </item>
</globals>
  

You can change the value of these. You can also add your own. You can also set whether they are read-only or not. Values that are not read-only can be changed by logged in users. Typically you might add things like phone numbers or email address to globals. The users can then update them for themselves if they change.

Globals that you define can be inserted into the all web pages via the Template (described later). They can also be incorporated into individual web pages, simply add a tag wit the following format:

<nixglobal name="brand" />
  

Changing theme/stylesheet (CSS)

When first installed nixCMS uses the current version of bootstrap Available via a CDN. However as the designer, you are free to change this. One simple option is to keep this version of bootstrap but override specific individual styles in CSS. You can do this either by supplying an additional CSS file or by embedding the styles directly into the generated HTML.

Changing the Template

...

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:atom="http://www.w3.org/2005/Atom">
   
  <xsl:output method="html" indent="yes" encoding="utf-8" omit-xml-declaration="yes" />
  <xsl:param name="path" /> 
  <xsl:param name="platform" /> 
  <xsl:param name="q" />
  <xsl:param name="rand" />
  <xsl:param name="url" />

  <xsl:variable name="globals" select="document('globals.xml')/globals" />

  <xsl:include href="cms.xsl" />
  

....

<xsl:template match="/">
<xsl:text disable-output-escaping="yes"><!DOCTYPE html ></xsl:text>
<html ng-app="adminApp">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <xsl:apply-templates select="/html/head/title" mode="head" />
  <xsl:apply-templates select="/html/head/meta" mode="head" />
  
  <link rel="icon" type="image/png" href="{$path}images/favicon.png" />
  <link rel="icon" type="image/gif" href="{$path}images/favicon.gif" />
  <link rel="apple-touch-icon" href="{$path}images/favicon.png" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link href="{$path}css/default.css" rel="stylesheet" /> <!-- change this to link to your css. It's simplest to make this an absolute location -->
  <style type="text/css">
  /* or put CSS here */ 
  </style>

  <xsl:if test="not(/html/head/meta[@name = 'description'])">
    <meta name="description" content="Default description of site - if none provided" />
  </xsl:if>
  <xsl:apply-templates select="/html/head/style" mode="head" />
</head>
<body ng-controller="MainController as x">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        <a class="navbar-brand" href="{$path}index.html"><img src="{$path}images/logo.png" style="display:inline-block;height:28px;padding-right:8px" /><span class="hidden-xs"><xsl:value-of select="$globals/item[@name='brand']" /></span></a>
      </div>

      <form class="navbar-form navbar-right" role="search" method="GET" action="{$path}search/">
        <div class="input-group">
          <!--span class="input-group-addon">Find</span -->                                                                                                          
          <input type="text" class="form-control input-sm" style="min-width:240px" 
            name="q" placeholder="enter search words or phrase" />
          <span class="input-group-btn">
            <button class="btn btn-default btn-sm" type="submit">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
          </span>
        </div><!-- /input-group -->
      </form>  
    
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="{$path}blog/"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Blog</a></li>
          <li><a href="{$path}help/index.html"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help</a></li>
          <li><a href="{$path}contact.html"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact Us</a></li>
        </ul>
      </div>
    </div>
  </nav>
  
  <br /><br /><br />
  <div class="visible-xs-block">
    <br /><br /><br />
  </div> 
  
  <div class="container">
    <div class="collapse in" id="pane1">
      <xsl:choose>
        <xsl:when test="$url = 'search/index.html'">
          <xsl:call-template name="searchIndex" /> 
        </xsl:when> 
        <xsl:when test="$url = 'blog/index.html'">
          <xsl:call-template name="blogIndex" /> 
        </xsl:when> 
        <xsl:when test="starts-with($url, 'blog/')">
          <p>man now we are blogging!</p> 
          <xsl:apply-templates select="/html/body/*" />
          <p>done blogging!</p> 
        </xsl:when> 
        <xsl:otherwise>
          <xsl:apply-templates select="/html/body/*" />
        </xsl:otherwise> 
      </xsl:choose> 
    </div> 
    <div class="collapse" id="pane2" style="border-width:3px;border-style:solid;border-color:#008;border-radius:6px;padding:6px">
      <xsl:call-template name="editor" /> 
    </div>
  </div>
  
  <br /><br /><br />

  <footer class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <a href="{$path}copyright.html"><span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span> 2015</a>
        </div>
        <div class="col-sm-4">
          <small style="font:size:4pt">[<xsl:value-of select="$path" />|<xsl:value-of select="$platform" />|<xsl:value-of select="$rand" />|<xsl:value-of select="$url" />]</small>
        </div>
        <div class="col-sm-4" style="text-align:right">
          <a ng-click="x.openEditor()">edit</a> 
        </div>
      </div>
    </div>
  </footer>
  
  <xsl:call-template name="dialogs" /> 
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="{$path}js/wysihtml-toolbar.min.js"></script>
  <script src="{$path}js/app.js"> </script>
  <script>
  url = '<xsl:value-of select="$url" />';    /* inject url and path into Javascript */
  path = '<xsl:value-of select="$path" />';
  </script> 
</body>
</html>
</xsl:template>
  

....

<!-- content mode -->


<xsl:template match="@*|node()">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

</xsl:stylesheet>
  

....

param value description
platform desktop Server sniffing of platform. Returns 'mobile' or 'desktop'.
path / base path to the nixCMS. Can be used when constructing URLs in web pages.
url help/developer.html URL of current page.
rand k Random character between 'a' & 'z'.

{{item.description}}