Find Answers/Purlem Templates

Create your own Purlem Template

Marty Thomas
posted this on February 05, 2012 02:03 PM

With a few simple tags, you can turn any HTML page into a re-usable Purlem template.

Editable Region Format

<purl label="Label" name="Name">Default Data</purl label="Label">

Label: The editable region
Name: The name of the editable region as shown to the user
Default Data: The default data displayed on the landing page - No line breaks allowed!

Making content editable

1 textarea, 3 textboxes

Name: The name of the editable area shown to the user
Label: The editable region

  • <purl label="textarea" name="Content Area"><h2>Hi #firstName,</h2><p>Welcome to your personalized website!</p></purl label="textarea">
  • <purl label="textbox1" name="Header Title">Text Box 1</purl label="textbox1">
  • <purl label="textbox2" name="Header Title">Text Box 2</purl label="textbox2">
  • <purl label="textbox3" name="Header Title">Text Box 3</purl label="textbox3">
<div id="header">
    <h1><purl label="textbox1" name="Header Title">Welcome #firstName</purl label="textbox1"></h1>

Making images editable

You can make up to 3 images editable. These tags can be placed either within the HTML or CSS.

  • <img src="/path/to/placholder.jpg" editable="image1" name="Logo" class="image1">
  • <img src="/path/to/placholder2.jpg" editable="image2" name="Other Image" class="image2">
  • <purl label="image3" name="Background Image">/path/to/placholder3.jpg</purl label="image3">

CSS Example:

<style type="text/css">
body {
    background: url(<purl label="image3" name="Background Image">/path/to/placholder3.jpg</purl label="image3">);

Making color editable

You can make up to 3 colors editable. These tags can be placed either within the HTML or CSS.

  • <purl label="color1" name="Body Background">#FFFFFF</purl label="color1">
  • <purl label="color2" name="Body Background">#FFFFFF</purl label="color2">
  • <purl label="color3" name="Body Background">#FFFFFF</purl label="color3">
<style type="text/css">
body {
    background-color:<purl label="color1" name="Body Background">#f4f4f4</purl label="color1">;

Adding Form

This will tell the editor where to display the form in the landing page.

  • <purl label="form">Form goes here</purl label="form">   
<div class="form">
  <purl label="form">Form goes here</purl label="form">      

Making page title editable

Placed in between the <title> tags.

  • <purl label="title">Title</purl label="title">
<title><purl label="title">Title</purl label="title"></title>