Creating a template
30 Nov 2009
In this tutorial I will guide you through the procedure for adding your own template design to ripe.
Log into your admin panel and click design. You will see your list of current templates. To create a new template type a name for your template into the new template textbox and click the create new template button.
Ripe will create a new template which will be a copy of the breeze template. This is just for reference purposes. You can now see your new template in your list of templates. Click the pencil icon to edit your template.
You now see your html code. Above the code are tabs to edit different parts of your template such as the CSS file the image folder. Simply upload the images that your template uses into the image folder. Then you just need to replace the html and CSS code with your own and click save each time. Now your code will need just a couple code changes to make use of the ripe system.
Integration with Ripe
In your CSS code make sure your images url references the correct place. If you have uploaded an image called "bg.gif" into the images folder and are referencing it from your CSS file your CSS code should look similar to this: "background-image: url(images/bg.gif);" So now on to the Ripe tags. A ripe tag looks like this: {RIPE_TAG} Ripe reads through your HTML template file and when it comes across a ripe tag it will replace the ripe tag with whatever the tag is referencing to. For example if you click to edit one of the current ripe templates you will see in the code many Ripe tags dotted around. Placing the ripe tag {CONTENT} into your template will display the content of the page that the visitor is on.
A list of available Ripe tags.
You will need to use ripe tags to get the correct location to your template files such as the style sheet and images. You can use the ripe tag {TMPL_PATH} for this. Also if you would like to use any files that you may have uploaded using the file manager then you can reference this location by using the ripe tag {FILES_PATH}.