How To...

Other pages

Reset a lost or forgotten password
Process a password
Update la.plume Micro CMS
HTML guide
Troubleshoot
How the system works
The page structure HTML

Change the design of la.plume Micro CMS

The design is a combination of the HTML page structure and the stylesheet:

/laplume/css/stylesheet.css

The underlying HTML page structure can't be changed but the stylesheet can.

By editing the stylesheet you can change the design completely but you need to know something about CSS (Cascading Stylesheets) and web page structure. Parts of the page can be moved around, made wider or narrower, fonts and colours changed etc (but the page structure itself can't be changed). For instance the navigation menu can be placed at the top or bottom of the page and the main content expanded to. Pretty much whatever you like.

From Version 9.1 (November 2014) there's a choice of themes: Default and White. Themes are selected in site admin 'Pages'.

See also the stylesheets »

Change the favicon

A favicon is a small graphic that typically appears on tabs or alongside bookmarks in most browsers. To change the favicon just upload your new one to overwrite the existing file favicon.ico in the main (root) folder. For the new favicon to appear you may need to delete the bookmark then bookmark the page again.

Add a logo

Adding your own logo to the default theme. The size of the logo space is 190 pixels wide x 64 pixels high and the distance from the top of the page to the top of the space is 36 pixels. Create an image for the logo no bigger than 190 x 64 pixels and upload it with the filename logo.png (or whatever).

Then in admin, edit and update the stylesheet as follows:

#menu {
line-height: 1.2;
background: url("../img/logo.png") 0 36px no-repeat;
}

The logo will then display on every page.

The background colour of the logo space is #f7f7f7. If your logo fills the space of 190 x 64 pixels the background may not matter, but if the logo is smaller you can expand its canvas to that size and with that background colour. Depending on its dimensions you can also move its position:

#menu {
line-height: 1.2;
background: url("../img/logo.png") 40px 40px no-repeat;
}

In this example the logo is positioned 40 pixels from the top of the page and 40 pixels from the left side of the menu column. Some trial and error and Photoshop skills may be needed to get things looking right.

Prior to Version 8.0 of la.plume Micro CMS a feather logo was included in the default theme. As part of a theme update this has now been removed as superfluous to some users' requirements. If you want one you can add one (in my opinion it must be well done or not done).

Edit the navigation menu

From Version 8.3 (previous versions were slightly different).

The default navigation menu is listed alphabetically except for the home page at the top and the contact page (if there is one) at the bottom. In admin/setup you can change to non-alphabetical, in which case the menu order is controlled by moving page names up and down. Edit the menu order with 'Get the menu' and 'Save the menu' in admin/pages.

Pages are added or removed from the main navigation menu by the use of a % percent symbol in the banner text. If a page is shown in the menu its name will be included in the menu file /inc/inmenu.txt (view the file with 'Get the menu'). You can also remove a page from the menu by deleting it manually then 'Save the menu'.

You can store a page name in the menu file by preceding it with a leading # hash symbol. The # symbol prevents the page being displayed in the menu. Removing the symbol adds it to the menu.

More about the navigation menu »

Use the #extra div

The 'extra' div is an HTML box, empty by default but can be used to add additional content below the navigation menu. The suggested width (if you are using images, for example) is 190 pixels in the default theme. The height doesn't really matter.

The content of the #extra div is added manually to /inc/extra.php (prior to version 8.5), then uploaded, or, from 8.5 onwards, in Admin/Extra. By using a bit of PHP you can vary the content according to which page, or range of pages, is viewed. As an example, for the home page only:

<?php if ($thisPage == "index") { ?>
Extra content here (home page only).
<?php } ?>

The PHP variable $thisPage is the page filename as shown under 'Existing pages' in Admin:pages - it contains the filename of the page currently being viewed. As an example, for the page you are viewing now $thisPage is "how-to".

Alternatively, if you want the same 'extra' content on every page, just write in some HTML for text, images, or whatever. Edit the stylesheet as required:

#extra {
line-height: 1.2;
More rules...
}

Note: from version 8.5 onwards the content of the #extra div is edited in Admin and is located in /extra-content.php.

Install la.plume Micro CMS on localhost

localhost means this computer—the one you are on now. The CMS will install on localhost provided your computer is running as a server, typically with Microsoft Windows Internet Information Services (IIS) installed/enabled or Apache Web Server. You must also install PHP and set everything up correctly.

If you are using IIS, disable Directory Browsing and set the Default Document as index.php for the folder in which you install the system, eg:

http://localhost/laplume/

There are limitations with IIS. Although la.plume Micro CMS will run, an .htaccess file will not be created because Windows does not support mod_rewrite so URLs cannot be rewritten. In this case public URLs (except the home page) will have a .php file extension.

The same applies when installing on a remote Windows server. Also, PHP's mail() function does not work on Windows so comments and the contact page won't work either. The CMS is designed for Apache Web Server, in which case PHP mail() and mod_rewrite should work.

Display a single image on its own page

A single image can be displayed on its own page URL, eg: Clouds Abersoch. To find the URL for an image page, click the image filename in la.plume Admin: images

The suggested maximum image width for an image page is 800 pixels when a CSS 'border' class is specified, otherwise 840 pixels. A small image in a normal page can be used as a link to a larger version. Both versions need to be uploaded.

The image filename becomes an auto-capitalised heading below the image (it's best not to use actual capitals in the filename itself). To password-protect the image page add a tilde ~ to the beginning of the image filename.

From Version 8.0 onwards

To create a space in the heading, put an underscore in the filename where you want a space to appear. To create an apostrophe use AA and to create a line break use BB. For example:

The image filename ~my_sisterAAs_weddingBBst_michaelAAs_church.jpg will have the following heading:

MY SISTER'S WEDDING
ST MICHAEL'S CHURCH

... and the image page will be password-protected.

Page last modified: October 04, 2018