Geodesic Solutions Community Wiki

User Tools

Site Tools

You are here: Auction and Classified Software Support Home » Tutorials » Design - Advanced » Using Non-Geo Templates
tutorials:design_adv:using_non_geo_templates

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
tutorials:design_adv:using_non_geo_templates [2010/05/18 23:19]
jonyo 		tutorials:design_adv:using_non_geo_templates [2014/09/25 16:55] (current)
Line 1: Line 1:
 +{{indexmenu_n>60}}
 ====== Using Non-Geo Templates ====== ====== Using Non-Geo Templates ======
  
Line 15: Line 16:
   * Knowledge of HTML and CSS. <   * Knowledge of HTML and CSS. <
   * Familiar with Smarty Templates. <   * Familiar with Smarty Templates. <
-  * Familiar with any other standards or "technology" utilized by the templates you with to use. <+  * Familiar with any other standards or "technology" utilized by the templates you wish to use. <
   * Not afraid to learn new things. ;-) <   * Not afraid to learn new things. ;-) <
  
Line 24: Line 25:
 ===== Converting Templates into Geo Template Set ===== ===== Converting Templates into Geo Template Set =====
  
-This is not yet a complete list of what is needed, we will be adding to it over time as needed.  If you find something you had to do let us know about it and if applicable, we may add it to the instructions.+<tip c n>**Note:** These instructions last updated for **version 7.3.0** and up.  Some of these instructions are specific to new features and/or changes to the design that will not work on older versions.  You can pull up the previous instructions by using the option to view previous revisions of this wiki page, look at the revision before "changes for 7.3.0" were applied.</tip> 
 + 
 +This is perpetually a work in progress((even more so than the rest of the WIKI)), we will be adding to it over time as needed.  If you find something you had to do let us know about it and if applicable, we may add it to the instructions.
  
   - Make sure the templates you are about to convert, are not already a Geo template set.  If the template folder has a **//main_page/ //sub-folder**, chances are it is **already a Geo template set** and you do not need to follow these instructions.  If you need help using a 3rd party Geo template set, see [[admin_menu/design/template_sets/start#Upload Template Set]]. <   - Make sure the templates you are about to convert, are not already a Geo template set.  If the template folder has a **//main_page/ //sub-folder**, chances are it is **already a Geo template set** and you do not need to follow these instructions.  If you need help using a 3rd party Geo template set, see [[admin_menu/design/template_sets/start#Upload Template Set]]. <
Line 32: Line 35:
   - Anything that is **not** a template file, such as images, CSS files, JS files, or other media files, go in **my_templates/external/** folder.  If you already copied any such files into main_page/ folder, delete those now and put them into the external/ folder.   - Anything that is **not** a template file, such as images, CSS files, JS files, or other media files, go in **my_templates/external/** folder.  If you already copied any such files into main_page/ folder, delete those now and put them into the external/ folder.
   - Within the external/ folder, we recommend to organize it into sub-folders for each "media type", for instance place all images inside **external/images/**, all CSS files inside //external/css/ //, etc.  This is not required, just recommended to make the template set a little easier to manage.  The rest of this tutorial will assume that you have organized it this way.   - Within the external/ folder, we recommend to organize it into sub-folders for each "media type", for instance place all images inside **external/images/**, all CSS files inside //external/css/ //, etc.  This is not required, just recommended to make the template set a little easier to manage.  The rest of this tutorial will assume that you have organized it this way.
-  - If templates you just put in main_page/ are **not** already //Smarty Templates//, you will need to escape Smarty parsing within the template files.  That is, if you find any curly brackets **{** or **}** inside non-Smarty template files, you will need to //escape// them, either by surrounding text with {literal}..{/literal} or by replacing { with {ldelim} similar to HTML encoding((Don't do both methods though!  Pick one or the other.)).  See [[http://www.smarty.net/manual/en/language.escaping.php|Escaping Smarty Parsing]] page for more info. <+  - If templates you just put in main_page/ are **not** already //Smarty Templates//, you may need to escape Smarty parsing within the template files.  That is, if you find any curly brackets **{** or **}** inside non-Smarty template files, make sure the **{** is directly followed by white-space((A space, a newline, a tab, etc.)) to ensure it is not interpreted as a Smarty tag.  If doing that is not possible, or if you want the templates to work on versions before **version 6.0.0**((Versions before 6.0 use older version of Smarty which is not as "smart" about what may or may not be a smarty tag, so any curly brackets you will need to escape.)), you will need to //escape// them, either by surrounding text with {literal}..{/literal} or by replacing { with {ldelim} similar to HTML encoding((Don't do both methods though!  Pick one or the other.)).  See [[http://www.smarty.net/manual/en/language.escaping.php|Escaping Smarty Parsing]] page for more info. <
   - Make sure each template file ends in **.tpl** <   - Make sure each template file ends in **.tpl** <
-  - In each template file, add **{header_html}** Smarty tag in the **<head>...</head>** section.  This is a special Smarty tag used by the Geo software, that allows the system to place necessary “head” information into your pages so that some dynamic content within you Geo installation work properly.+  - In each template file, add **{head_html}** Smarty tag in the **<head>...</head>** section.  This is a special Smarty tag used by the Geo software, that allows the system to place necessary “head” information into your pages so that some dynamic content within you Geo installation work properly.
   - In each template file, add **{body_html}** Smarty tag in the **<body>...</body>** section, where you want the **main part of the page** to display.  This is a special Smarty tag used by the Geo software, to put dynamic content specific for each page within the system.   - In each template file, add **{body_html}** Smarty tag in the **<body>...</body>** section, where you want the **main part of the page** to display.  This is a special Smarty tag used by the Geo software, to put dynamic content specific for each page within the system.
 +  - In each template file, add **{footer_html}** Smarty tag in the **<body>...</body>** section, as close to the end </body> tag as possible.  This is a special Smarty tag used by the Geo software, to load JS near the end so that the main part of the page displays before trying to load certain JS (delayed JS loading).
   - Upload the my_templates/ folder to your site, into the **geo_templates/** folder((If you already have a template set named the same thing, be sure to re-name one template set or the other, don't overwrite your existing template set with this one!)), and CHMOD 777 the folder **and all sub-folders and files recursively** so that the template files can be changed in the admin. <   - Upload the my_templates/ folder to your site, into the **geo_templates/** folder((If you already have a template set named the same thing, be sure to re-name one template set or the other, don't overwrite your existing template set with this one!)), and CHMOD 777 the folder **and all sub-folders and files recursively** so that the template files can be changed in the admin. <
   - In the admin panel, go to **Design > Template Sets** and check the **Admin Editing** next to the template set you just uploaded (make sure it is the only one being edited, if in advanced mode), and save changes.   - In the admin panel, go to **Design > Template Sets** and check the **Admin Editing** next to the template set you just uploaded (make sure it is the only one being edited, if in advanced mode), and save changes.
   - In the admin panel, go to **Design > Page Attachments** and assign a template attachment for each page.  If you know you are going to want to customize a template to be different for different pages, now is the time to create a copy of the main template, for use on the different pages.   - In the admin panel, go to **Design > Page Attachments** and assign a template attachment for each page.  If you know you are going to want to customize a template to be different for different pages, now is the time to create a copy of the main template, for use on the different pages.
   - Take note of all the filenames for media files in your **external/** folder.  For each media file:   - Take note of all the filenames for media files in your **external/** folder.  For each media file:
-    - In the admin panel, go to **Design > Text Search** and search for the filename.  Click on the **Template Contents** tab to find all the places that reference that media file, within your templates.+    - In the admin panel, go to **Design > Text Search** and search for the filename.  Click on the **Template Contents** tab to find all the places that reference that media file, within your templates. <
     - Look for the first found match for any template file, that references the file "directly" instead of by using the external Smarty tag.  In other words, you are looking for first one where the match is not preceded by something like **{external file=**.  Click the button to edit that template. <     - Look for the first found match for any template file, that references the file "directly" instead of by using the external Smarty tag.  In other words, you are looking for first one where the match is not preceded by something like **{external file=**.  Click the button to edit that template. <
-    - On the edit page, click on the **<..> Source Code Editor** tab if it is not already on that tab.+    - On the edit page, click on the **<..> Source Code Editor** tab if it is not already on that tab. <
     - In the template source code that is displayed in the editor, find where the file you searched for is being used, you will be replacing it with an "external" Smarty tag.  To do this, highlight the entire URL for the file, and above the editor window, click on the blue tag icon to bring up the **Insert a Tag** tool.  Within the tool, click the **external** tab.  Then in the Select File drop-down, find the file you are replacing, and select it.  Then click **Insert External Tag** button, and close the tool.  Ensure that the URL got replaced by the external tag properly, then save the contents of the template file. <     - In the template source code that is displayed in the editor, find where the file you searched for is being used, you will be replacing it with an "external" Smarty tag.  To do this, highlight the entire URL for the file, and above the editor window, click on the blue tag icon to bring up the **Insert a Tag** tool.  Within the tool, click the **external** tab.  Then in the Select File drop-down, find the file you are replacing, and select it.  Then click **Insert External Tag** button, and close the tool.  Ensure that the URL got replaced by the external tag properly, then save the contents of the template file. <
     - Repeat for any other places that the media file is referenced. <     - Repeat for any other places that the media file is referenced. <
Line 48: Line 52:
   - Make sure you repeat the above step for each media file. <   - Make sure you repeat the above step for each media file. <
   - In the admin, go to **Design > Manager**.  Now edit any template file you want to add Geo modules or Addon Tags to, and in the edit window, use the **Insert a Tag** tool to insert modules, addon tags, or other dynamic Geo information.  You may be replacing parts of the template with the Geo equivalent, or you may be adding new content, or inserting content into "blank" areas on the template, depending on how the templates are set up. <   - In the admin, go to **Design > Manager**.  Now edit any template file you want to add Geo modules or Addon Tags to, and in the edit window, use the **Insert a Tag** tool to insert modules, addon tags, or other dynamic Geo information.  You may be replacing parts of the template with the Geo equivalent, or you may be adding new content, or inserting content into "blank" areas on the template, depending on how the templates are set up. <
-  - Copy the built-in CSS file **external/css/theme_styles.css** from the default template set, to your own template set.  You will need to be in **Advanced Mode** to do this, and check the box for "Admin Edit" next to the default template set.  Then browse to the above mentioned file in the default template set, select the file, click "copy" at the bottom, and navigate to your own template set external/ folder, and click "paste". < +  - In your template set, create a new file **external/css/custom.css**.  This is a CSS file that will be loaded by the software automatically, we recommend putting any CSS required in this file.  Doing so will allow the system to minify and compress it automatically, speeding up the page load time.  There is no need to reference this CSS file directly in any templates as long as you properly added the {head_html} tag.  < 
-  - In your templates, add the following line in the **<head>...</head>** section: <code html><link href="{external file='css/theme_styles.css'}" rel="stylesheet" type="text/css" /></code> <+  - Do the templates use **jQuery**?  If so, you will need to **remove** anywhere in the templates that add the jQuery js file, because the software will automatically add the file for you.  When the jQuery file is added twice, it can break the built-in custom jQuery plugins that are part of the software.  Look for places that reference a jQuery.min.js file (or similarly named file), if you find any, remove the entire <script> tag that you find it in.  Here is an example of what you might be removing: <code html><script type="text/javascript" src="js/jquery.min.js"></script></code> <
   - Now activate your template set at **Design > Template Sets** by checking the box in the **Active** column for your template set.  Make sure it is the only template set that is active (other than the default template set if in advanced mode). <   - Now activate your template set at **Design > Template Sets** by checking the box in the **Active** column for your template set.  Make sure it is the only template set that is active (other than the default template set if in advanced mode). <
-  - View the "front side" and browse the site.  You will most likely need to heavily modify the **external/css/theme_styles.css** file so that the look of dynamic page content, and dynamic module content, match the look of the rest of your templates.  This is where the HTML and CSS knowledge we mentioned at the top of the page comes in. < +  - View the "front side" and browse the site.  You will most likely need to heavily modify the following 3 files so that the look of dynamic page content, and dynamic module content, match the look of the rest of your templates.  This is where the HTML and CSS knowledge we mentioned at the top of the page comes in. 
 +    * **external/css/custom.css** < 
 +<
  
tutorials/design_adv/using_non_geo_templates.1274224762.txt.gz · Last modified: 2014/09/25 16:55 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki