Geodesic Solutions Community Wiki

User Tools

Site Tools

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

Sidebar

tutorials:design_adv:using_non_geo_templates

Table of Contents

Using Non-Geo Templates

This tutorial will walk you through the steps necessary for taking outside templates1), and turn them into a usable Geo template set that you can use on your site or even distribute for use on other Geo sites.

<tip c w>Warning: This is an advanced tutorial, involving making changes to template files.

Before attempting to follow the tips or instructions here, we highly recommend that you have a firm grasp of the basics.

Remember that problems caused by customizations (including custom templates) are not covered by Geo support, if support finds that something works with the "default" templates but not with customized templates, they will not be able to help further. Geo Support can try to help you with the how and where for editing templates, but they cannot make changes for you or try to troubleshoot problems related to customized templates. </tip>

What you Need

Skills

  • Knowledge of HTML and CSS. <
  • Familiar with Smarty Templates. <
  • Familiar with any other standards or "technology" utilized by the templates you wish to use. <
  • Not afraid to learn new things. ;-) <

Handy tools:

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 progress2), 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.

  1. 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 Upload Template Set. <
  2. Create a new empty folder to work on converting the templates in. For the purposes of this tutorial, we will use my_templates as the folder name. <
  3. Create the following 2 sub-folders in my_templates: main_page/ and external/ <
  4. From the original templates, copy all template files into the my_templates/main_page/ folder. You can use sub-folders to organize the template files if you wish. <
  5. 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.
  6. 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.
  7. 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-space3) 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.04), you will need to escape them, either by surrounding text with {literal}..{/literal} or by replacing { with {ldelim} similar to HTML encoding5). See Escaping Smarty Parsing page for more info. <
  8. Make sure each template file ends in .tpl <
  9. 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.
  10. 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.
  11. 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).
  12. Upload the my_templates/ folder to your site, into the geo_templates/ folder6), and CHMOD 777 the folder and all sub-folders and files recursively so that the template files can be changed in the admin. <
  13. 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.
  14. 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.
  15. Take note of all the filenames for media files in your external/ folder. For each media file:
    1. 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. <
    2. 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. <
    3. On the edit page, click on the <..> Source Code Editor tab if it is not already on that tab. <
    4. 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. <
    5. Repeat for any other places that the media file is referenced. <

<

  1. Make sure you repeat the above step for each media file. <
  2. 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. <
  3. 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. <
  4. 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: 
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <

  5. 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). <
  6. 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 <

<

1)
For instance, generic-use templates you might find on a site that sells those type of things.
2)
even more so than the rest of the WIKI
3)
A space, a newline, a tab, etc.
4)
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.
5)
Don't do both methods though! Pick one or the other.
6)
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!
tutorials/design_adv/using_non_geo_templates.txt · 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