Follow Us:


Helpful Guides

We're Here to Help

If you need quick answers just jump on the Forums and one of the staff or a member of the community will be able to help. Otherwise feel free to read through our Documentation or maybe check out a Video or two.

User Guide

Here you can find more detailed information and documentation on FI, like Tags, Web Forms, Headlines and more.

Themes Guide

You'll find out how easy it is to import and prepare a theme, there's also example here to help you get started.

Quick Start Guide

Just getting started ? This is a perfect place to begin, be sure to also check out the Getting Started section of the User Guide too.

More To Come...

We're working hard on creating new Guides to help. If you feel you could improve on them or want to add your own, feel free to post them on the Forums.

Quick Start Guide

So you've set up your first site or just installed FI on your server and you want to get going, but not sure where to start?

Don't worry just follow the steps on this page and you'll soon start seeing for yourself how quick and easy everything is. If you'd like more in depth details, checkout the User Guide.

Table of Contents

  1. Log in to your administration portal
  2. Click on Uploads
  3. Click on Upload Image
  4. Find a Logo (that's saved for web)
  5. Type "Logo" in to the description field

You can then reference this image in your page, in the next section we'll show you how.

Display an Image

  1. Click on View Site
  2. Click on Edit in the first editable region (or Block) that you see
  3. Click on the Image Button that looks like a little square inside a circle
  4. A new browser window will appear
  5. Click on the newly uploaded logo image
  6. Click on the Green Tick and your changes will be saved

Remember to hit publish when you make changes so the world can see your great site !

Editing a Template

Lets put your logo in the top of your template so it's hard coded and non editable by a Block.

  1. Click on Admin to go back to the administration portal
  2. Click on Templates
  3. Click on Default
  4. Find the code that says <div class="logo">
  5. Delete the code inside that div.
  6. Add the image tag reference for your logo by typing { image:logo }
  7. Click Save Changes
  8. Click View Site

Import a Site

Lets import a website that you've been working on shall we? First of all make sure:

  • Your CSS is in a folder called css
  • Your Javascript is in a folder called js
  • Your images are in a folder called images
  • Your templates are saved as .html files
  • The whole site is then zipped up as a .zip file

Then you simply upload the zip file by:

  • Clicking on Templates from within the administration portal
  • Click on Import Theme
  • Browse for your new zip file
  • Click Import Theme button in the form
  • Click on Pages
  • Click on Add Page
  • Give the page a name of Test
  • Select one of the template files that have just been created
  • Click View Page

Web Magic! Your site should have been imported with images and CSS.

If you want to spend more time with this we suggest you look at how to make a theme on the Themes Guides Page , where you can find more information.

Theme Guide

Themes Guide

FI isn't like most other content management platforms in that it doesn't require you to use specific themes. You can use any static HTML/CSS theme by just following a few simple preparations.

To upload a theme to your FI site either prepare your static HTML/CSS using the instructions below, or you can download some example themes for your site. Once you have your theme in a ZIP file simply upload it using the Import Theme button in the Templates section of the Administration portal.

Example Themes

Simple example themes to get you started.

Preparing Themes

Forging themes in FI is easy! You don't need to know PHP or any clever syntax, just HTML/CSS goodness. Although FI does offer some clever syntax to give you more functionality, but note, it's not needed.

Themes are imported using the 'Template Import' tool in the Templates section of FI administration, note for super complicated themes you may want to do this manually, you should be fine though given the themes adhere to these rules:

  • Be compressed to a ZIP file
  • Not have any files that are bigger than 200kb.
  • Only contain: HTML, CSS, Javascript and Image files (GIF, JPEG, PNG).

You can use folders and you can call the files what you like.

First Steps

Firstly you will need to make your static, offline XHTML/CSS site and do the usual browser testing and validation. Then when finished you will want to make sure all the paths are absolute to the root (e.g. /images).

  • Make sure your CSS files go to: /css
  • Make sure your Images go to: /images or /gfx
  • Make sure your Javascript go to: /js

Also make sure your HTML files are named based on what you want to call the templates. For example you might want 'home.html' for your Home template, and 'contact.html' for your Contact template.

Defining Content Areas

Fi uses Includes to separate the commonly used header and footer parts of the HTML file. FI will automatically do this for you as long as you tell it where the content area lies. Use the code below.

<!--content--> <p>My content!</p> <!--endcontent-->

Note: Please don't use spaces in your comments.

Defining Blocks

Next you will want to tell FI which parts of your template are editable regions. So delete the dummy HTML content and then just replace it with the following.


Theme Name

Lastly, tell FI what you want the theme to be called. In the head use this code:

<meta name="theme" content="Your Theme" />

That's it! Once you've made your theme and zipped it up, your ready to go. If you feel like sharing or showing off your great work feel free to upload it somewhere and share it with the community!
You can post submissions on the Forums , if it's better or equal to the examples posted here we'll feature it.


We promise not to send you spam.
Seriously, the mailing list is private and you'll only receive an e-mail once a month with a summary of all the latest going-ons with ForgeIgniter.
Remember you're always free to Unsubscribe if you're not happy for a unknown reason only known to you.

© 2010 - 2017, ForgeIgniter. All Rights Reserved.