How to create a Flippij Theme Package

In order to successfully upload a theme package into the Flippij system, you will need to follow some guidelines.

A Theme Package consists of one zip file which is uploaded to the system. The zip file should contain ONE folder that contains all the theme package files. This fold name should be the name of your theme package.

Example: This theme has been named MyFirstTheme

MyFirstTheme.zip
      |_ MyFirstTheme (Folder)
           |_default.template (File)
           |_default.css (File)
           |_thumb.jpg (File)

Each Flippij theme package will Require at least the following files:

• default.template
  • This is the default layout that all pages will use unless changed during page editing. This is just a HTML page including the Flippij markup tags.
• default.css
  • This is the default CSS file that all .template files should use.
• thumb.jpg
  • This should be a thumb nail image for your theme. It should be a jpeg file of size 138x100px.

The theme package may also contain other files such as:

File Types	Extensions
Layout Templates	.template
Images	.jpg .gif .png .swf
Javascript	.js
Cascading Style Sheets	.css

We consider it best practice to put all the files used for the theme layouts in the theme package.

 

Details about the template files

All .template files can be referred to as layout templates. They are HTML files that contain the Flippij markup syntax used by the Flippij template engine system. You can create however many .template files you’d like. The only .template file that is required is the default.template. This layout will be used on all pages by default unless changed from the Edit Page interface on the Flippij System. Please note that you should only use alphanumeric characters in the naming of the .template file. You should use underscores in place of spaces.

Example:         default.template, defautl001.template , home.template, no_menu.templateetc…

NOTE : There is NO need to put the follow tags in the .template file. This will be created by the Flippij template engine.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<link href="/theme/MyFirstTheme/default.css" rel="stylesheet" type="text/css" />

Details about the default.css files

There is nothing special about the default.css file. It is standard Cascading Style Sheets markup. The only thing to make note of, is that if you refer to any images from the CSS file you will need to use the path of /theme// if you are following the best practice method.

            Example:         background(/theme/MyFirstTheme/main_bk.jpg)

 

The Flippij Markup Syntax

• <FPJ:HeaderContent/>
  • This take outputs all the HTML header data control by Flippij. Put this tag in between the HTML header tags.
• <FPJ:MenuContent/>
  • This tag outputs <li><a></a></li> tags generated by the Flippij Main menu system. You should have something like this. <ul><FPJ:MenuContent/></ul>
• <FPJ:MainContent/>
  • This tag outputs the page content collected by Flippij's page editor. You can put this where ever you want that content to show up.
• <FPJ:WebLinksContent/>
  • Will document soon.
• <FPJ:CopyRightContent/>
  • This tag outputs the content collected by Flippij's settings editor. This would normally be put at the footer of the page.
• <FPJ:SiteTitle/>
  • This tag outputs the content collected by Flippij's settings editor. This is used in the generation of the <FPJ:HeaderContent/> output but can be used elsewhere also.
• <FPJ:SiteCaption/>
  • This tag outputs the content collected by Flippij's settings editor. This is used in the generation of the <FPJ:HeaderContent/> output but can be used elsewhere also.