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 [2012/07/23 23:29]
127.0.0.1 external edit 		tutorials:design_adv:using_non_geo_templates [2014/09/25 16:55] (current)
Line 24: Line 24:
  
 ===== Converting Templates into Geo Template Set ===== ===== Converting Templates into Geo Template Set =====
 +
 +<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. 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.
Line 35: Line 37:
   - 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. <   - 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 49: 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. <
-  - In your template set, create a new file **external/css/theme_styles.css**.  Edit the file using the editor in the admin panel, and use the button to replace contents with default. This will copy the contents of the theme_styles.css file from the default template set, and apply a few changes to the top of the file that will make software updates much easier((Do NOT simply copy the file from default using FTP, or the changes will not be applied and it will make software updates harder.)).  < +  - 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.  < 
-  - Repeat the step above, but for the following files: +  - 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> <
-    * **external/css/primary_theme_styles.css** < +
-    * **external/css/secondary_theme_styles.css** < +
-< +
-  - In your templates, add the following lines inside the **<head>...</head>** section: <code html><link href="{external file='css/theme_styles.css'}" rel="stylesheet" type="text/css" /> +
-<link href="{external file='css/primary_theme_styles.css'}" rel="stylesheet" type="text/css" /> +
-<link href="{external file='css/secondary_theme_styles.css'}" rel="stylesheet" type="text/css" /></code> < +
-  - Do the templates use **jQuery**?  If not, skip this step.  If they do use jQuery ((Which seems to be more and more common with generic "non-Geo" templates)), you will need to apply a work-around to allow JQuery to work "along side" Prototype and Scriptaculous, which is used heavily by the core software.  See [[http://docs.jquery.com/Using_jQuery_with_Other_Libraries|Using jQuery with Other Libraries]] tutorial available on [[http://docs.jquery.com]] for instructions on how to do this.  Or alternatively, if you are familiar enough with Prototype and Scriptaculous, you can re-code any portions of the templates that use jQuery, to use Prototype and Scriptaculous instead. <+
   - 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 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.   - 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/theme_styles.css** < +    * **external/css/custom.css** <
-    * **external/css/primary_theme_styles.css** < +
-    * **external/css/secondary_theme_styles.css** <+
 < <
- 
  
tutorials/design_adv/using_non_geo_templates.1343086174.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