Theme Manager

From Contensive Wiki
Jump to: navigation, search

Terms

Theme 
The static components that make up a User interface (UI), typically html/css/javascript.
UI 
User Interface
UI Deployment Package 
A zip file that contains all the information needed to deploy the UI to a site or an addon.
Template 
The html/css/js that makes up the code of a page. The content is added to the template to render the final page.
Layout 
The html/css/js much like a template, except it can be used for individual addons.

Roles

How To

Theme Manager Quick Import Tutorial

This tutorial shows you how to use the Quick Import tool in the Theme Importer. The purpose of the Theme Importer Quick Import to to scrape a template from an existing website and setup a Template record under Manage Design that can be used on the current site.

Steps to capture a website page into a site template:

  1. Install the Theme Manager from the Addon Manager.
  2. Go to Navigator >> Manage Addons >> click on Theme Manager.
  3. Click on Quick Import at the top of the the page.
  4. In Template Name, enter "TestTheme". This name has to be unique, so if this template already exists either delete in the templates, or modify this name to make is unique.
  5. In Source URL, enter http://www.contensive.com.
  6. For Import, select Save To File
  7. Click [Begin Import]
  8. When complete, there will be a few errors relating to resources that could not be copied to the site because they are reserved. That is OK.
  9. Go to Navigator >> Manage Design >> click on templates.
  10. Edit the new record named TestTheme.
  11. It contains an import statement with the filename that was created during the import, "Template_TestTheme"
  12. To see the file, use the Website File Manager (Navigator >> Tools >> click on Website File Manager) and edit the new template file. All the templates resources will be that as well.

Steps to use the new TestTheme for a page

  1. Go the the public site for your website and turn on Edit.
  2. Navigate to a page you want to convert to the new template, or add a child page.
  3. Edit the new page.
  4. Go to the Features tab, and select Test Theme in the Template selector.
  5. Hit OK to save the page and when you return to the public site, it will use the new template.

Reference

There are several approaches to theme installation wrapped up in this collection.

  1. Scraper
  2. Theme Macros
  3. Theme Deploy

UI Scraper

The UI scraper is an addon that copies the html/css/js from another site and creates a template that can be used on the local site.

UI Macros

With UI Macros a developer can create a sequence of steps that manipulate html files. This can be used to manipulate imported html, typically create template variations from a single html file. The advantage of creating a maco is if the provided html file is changed, the macro can be re-run to update a template or layout.

UI Deploy

This addon takes a UI deployment file (zip) and imports it as needed. In this case, the html/css/javascript must follow certain class/ID guidelines that inform the import.

Process

  1. A deployment file is a zip file containing one or more html files and all referenced css/javascript in subfolders
  2. Unzip the UI Deployment file, provided either as an upload or from the deployment History.
  3. copy all complete folders directly into the appRoot.
  4. Open each html file one at a time and process them
    1. Process the Body of the document
      1. Cut the html inner body and search from the top for attribute classes OR IDs that match the following patterns and replace the content as follows:
      2. Search for ids and classes in the following form: <anytag class="fpoAddonName">placeHolderContent</anytag> and replace with <anytag>{% {JSON Command for AddonName} %}</anytag>
      3. Addon arguments are passed as name=value pairs, formatted as follows:
      4. An underscore represents a space
      5. A single dash represents an equal sign.
      6. A double dash delimits elements of the command
      7. for example:
        <div class="fpo--Content_Box">placeholder</div> --creates-- <div>{% {"addon":{"addon":"Content Box"}} %}</div>
      8. for example:
        <div class="fpo--AddonName--name1-value1--long_name-long_value">placeholder content</div> --creates-- <div>{% {"addon":{"addon":"AddonName",{"name1":"value1","long name":"long value"}}} %}</div>
      9. for example:
        <div class="fpo--menu--name-top_nav">placeholder content</div>--creates--<div>{% {"addon":{"addon":"menu","name":"top nav"}]} %}</div>
      10. if the addon exists, just make the html change. if the addon does not exist, create it and put in the addon the placeholder html that is removed.
      11. Add or locate a template record with the exact name of the html document and add or update the html field with the resulting html block. Copy the body tag from the file to the body field of the template.
    2. Process the head of the document
      1. starting at the first head tag, process each one at a time going down
      2. For layouts, only process script tags and link rel="stylesheet" tags
      3. For Templates, process all tags except title tags
      4. For linked styles that point to a folder in the appRoot of this application, locate or create an addon with the style URL as its name and put in the active script a line that reads the file and adds to the head.
      5. For linked styles that point to a remote host, locate or create an addon with the style URL as its name, download the stylesheet and paste it into the addon stylesheet.
      6. For all style addons, make them dependent on the style that proceeded them.
      7. For scripts, treat the same as styles.
      8. For all other head tags, add them to the otherHead section of the template.

Test Cases

Revision History