Differences

This shows you the differences between two versions of the page.

--- tutorials:design_adv:portable_template_set [2010/04/14 23:18]
jonyo created
+++ tutorials:design_adv:portable_template_set [2014/09/25 16:55] (current)
@@ Line 10: / Line 10: @@
-One of the main //features// of the template set system, is the "portability" of a template set.  What this means, is that a template set can easily be transfered to a different installation, on a totally different domain name, with minimal work.  However, this requires the template set is created with portability in mind.  Having a portable template set is a must for any designer wishing to distribute custom template sets created.  It is also a good idea for site owners as well, as it makes it easy to work on a design on a "test installation" then easily transfer the design to the live site once it is ready.
+One of the main //features// of the template set system, is the "portability" of a template set.  What this means, is that a template set can easily be transfered to a different installation, on a totally different domain name, with minimal work.  However, this requires the template set is created with portability in mind.  Having a portable template set is a must for any designer wishing to distribute custom template sets created.  It is also a good idea for site owners as well, as it makes it easy to work on a design on a "test installation" then easily transfer the design to the live site once it is ready.  It may even be **necessary** for parts that are shared between the client side and the admin panel, such as buttons used in the cart.
 ===== Creating Portable Template Set =====
-Below are some tips to follow while you are in the process of customizing your template design.  If you are already finished creating a custom template set, but it is not "portable", see the instructions in the next section.
+Below are some helpful //Dos and Don'ts// to follow while you are in the process of customizing your template design, or even creating a new template set from scratch.  If you are already finished creating a custom template set, but it is not "portable", see the instructions in the next section.
-  * Always upload any media files (Images, CSS files, JS files, etc) into the **external** folder within your template set.  Template files go in **main_page**, any other type of file goes in **external**. <
-  * More tips to come!  ((TODO:  Add more tips here!)) <
-===== Make Existing Template Set Portable =====
+  * <html><strong style="color: green;">Do</strong></html> always put any //media files//((Media files include:  images, CSS files, JS files, or any file that would be directly referenced by a template.  If your design uses an occasional PHP file (which we discourage if not necessary), that would also be considered a media file.)) used for the design, into the **external** folder within your template set. <
+  * <html><strong style="color: maroon;">Do Not</strong></html> put //media files// in the **main_page** folder within the template set.  This folder is reserved for **.tpl** template files only. <
+  * <html><strong style="color: maroon;">Do Not</strong></html> put //media files// **outside** of your template set.  (See the first "DO" tip above) <
+  * <html><strong style="color: green;">Do</strong></html>, within **template files**, use the special Smarty tag that looks like **{external file='folder/filename.png'}** in place of a URL for a media file located in the **external/** folder in your template set.  The "**Add a Tag**" tool on the template editor can create the tag for you, you just select the external file you want to reference and it will insert the tag for you.  The default templates have plenty of examples of how to use this as well.
+    * <html><strong style="color: green;">Good:</strong></html> <code html><a href="index.php"><img src="{external file='images/logo.jpg'}" alt="My Site!" /></a></code> <
+    * <html><strong style="color: maroon;">Bad:</strong></html> <code html><a href="index.php"><img src="geo_templates/my_templates/external/images/logo.jpg" alt="My Site!" /></a></code> <
+    * <html><strong style="color: maroon;">Even Worse:</strong></html>((Because if your HTML looks like this, and the image actually displays, you are breaking the first "Do" above.)) <code html><a href="index.php"><img src="images/logo.jpg" alt="My Site!" /></a></code> <
+<
+  * <html><strong style="color: green;">Do</strong></html>, within **CSS files**, use the **relative URL**, relative to the CSS file, for any URL to other media files.  For example, if referencing an image file located in **geo_templates/my_templates/external/images/bg.jpg** you might use the following in your CSS file located at **geo_templates/my_templates/external/css/main.css**:<code css>div.main {
+background-image : url('../images/bg.jpg');
+}</code>**Note:** This is a made-up example only. <
+  * <html><strong style="color: maroon;">Do Not</strong></html> use the **absolute URL** for media files.  See tips above for what you should use instead. <
+  * <html><strong style="color: maroon;">Do Not</strong></html>, in **links**, use **absolute URL** for any link to a page on your own site.  In other words, don't use an absolute URL for a link when it is possible to use a relative URL instead.
+  * More tips to come!  If you think of any useful tips not covered here, let us know!  ((TODO:  Add more tips here!)) <
+===== Make Existing Geo Template Set Portable =====
 If you already have a customized template set, but it is not transferring to another site easily so you need help making your template set more portable, below are some general instructions to help you get there.

Geodesic Solutions Community Wiki

User Tools

Site Tools

Differences

Page Tools