Custom Template Reference
(→Custom script includes)
(→Uploading custom templates)
|Line 154:||Line 154:|
==Uploading custom templates==
==Uploading custom templates==
Revision as of 17:55, 21 February 2007
Download .zip how-to package with PDF tutorial
Want to learn how to create your own templates for Pro Edition? Download this great how-to article (with example files!) written by Soholaunch customer Jaun-Vincent Haasbroek.
This section covers the creation and integration of custom templates for use with the Soholaunch Pro Edition, and is intended for graphic designers and site developers. As such, a working knowledge of Adobe Photoshop and HTML programming is recommended.
How Pro Edition interprets template information
Within the maintenance platform, users will only have access to the page “content” area for editing. This means that each site must have a template design that maintains continuity throughout the site. Automatic menu generation is built in to the Soholaunch management tool so that Menu Display buttons and sub-page buttons can be defined within the template (using special Pound Variables). This gives you the option of placing Menu Display systems vertically, on the left or right of the page layout, or horizontally, across the top or bottom of your pages.
You may also wish to custom-design your main navigation system and not use the Menu Display feature at all. This allows you to have total control over font, colors and sizes of your navigation structure. For even greater flexibility in design, different templates may be assigned to individual site pages throughout your site.
Your template designs can take on any level of complexity that you wish them to have. However, please note that the user, via the management tool, cannot change any images, text, or links built into the template. This should always be planned and noted well ahead of the build process.
Template folder and files
Place all files(images,index.html,custom.css, etc) into a folder and name the folder like this...
Category-Sub_Category-Color Example: Category-Template_Name-Color
Possible files in your template folder (aside from images):
index.html (REQUIRED) - The main HTML template file for your website used accross all site pages. This file must exist in your template folder in order for site pages to display at all.
cart.html (OPTIONAL) - Custom shopping cart template. If found in your template folder, it will be used in place of index.html on shopping cart system pages (as in: when website visitor is browsing/purchasing products via your online checkout process).
home.html (OPTIONAL) - If found in your template folder, it will be used in place of index.html on the "Home Page" (whatever page you've assigned to be your start/index/home/default page).
news.html (OPTIONAL) - Custom blog/article display template. If found in your template folder, it will be used in place of index.html when visitor views full text of blog entry or news item.
custom.css (OPTIONAL) - If found in your template folder, it will be used in place of the default stylesheet (runtime.css).
cart.css (OPTIONAL) - If found in your template folder, it will be used in place of the default stylesheet (runtime.css) on shopping cart system pages. This is mainly usefull in conjunction with cart.html. That way you can have a separate template html file as well as a separate style sheet for shopping cart system pages.
shopping_cart.css (OPTIONAL) - If found in your template folder, will be included instead of pulling the colors/styles set in Shopping Cart > Display Settings. Note that this performs a completely different function than cart.css.
template_variable_rules.php (OPTIONAL) - If found in your template folder, it will be included within pgm-realtime_builder.php right before all of the other #variables# are processed, allowing your template to use custom pound variables and even override standard pound variable functionality if you want to.
Source file overrides
pgm-auto_menu.php (OPTIONAL) - This is the file that puts together the html output for the various menu navigation systems (vmenu, hmains, etc) when your website is viewed. If found in your template folder, it will be used instead of the standard pgm-auto_menu.php file. The idea here it to download the original pgm-auto_menu.php from your docroot or from sohoadmin/client_files/base_files (same file, 2 locations), make a copy of it and stick it in your template folder, then modify it to all kinds of crazy things with your menu system.
pgm-faq_display.php (OPTIONAL) - When a visitor views a page with FAQs on it, this file is called to build the HTML output for the FAQs. If you make a copy of this file and stick it in your template folder, your (presumably modified) copy will be used instead of the standard file. Do this when you want to trick out how your FAQs display, like Soholaunch did on our main website --- links to the support page, scroll down to see FAQs...we added those big 'Q' graphics and customized the font.
pgm-promo_boxes.php (OPTIONAL) - When a visitor views a page whose template uses #NEWSBOX#, #BOX1#, etc, this file is called to build the HTML output for the news/promo boxes. If you make a copy of this file and stick it in your template folder, your (presumably modified) copy will be used instead of the standard file. Do this when you want to trick out how your news/promo boxes display further than you can via the Template Box Manager. Literally unlimited modification potential here.
pgm-blog_display.php (OPTION) - Called when visitor views a page with a blog dropped on it. This is the file that spits out the archive links, etc. If found in your template folder, it will be used instead of the standard pgm-auto_menu.php file. Added in v4.9 r32.
Pound Variables: unique variables that tell Pro Edition where to place specific “client changeable” headers, Menu Display buttons, and automatic text menus within your layout. These are not case sensitive, and can be placed visually within your HTML editor as text, so long as they contain the pound sign.
#CONTENT# - Tells the system where to display the table that will hold all the content created within the Pro Edition’s Page Editor. Note: User will not be able to manage page content unless this variables is placed somewhere in your html template file (i.e. index.html).
#LOGO# - Replaced with data from "Template Manager > Template header line". Inserts an editable Header line that can be changed by the user via the Soholaunch Pro Edition's Template Manager feature.
#LOGOIMG# - Custom Logo variable added which inserts a logo which is chosen in the Template Manager Module.
#SLOGAN# - Custom Logo variable added which inserts a company slogan or moto which is chosen in the Template Manager Module.
#VMENU# - Replaced with vertical menu navigation (main and sub pages) as configured via the Menu Display module.
#HMAINS# - Main page links only, arranged horizontally (links managed via the Menu Display module; must set "Auto-Menu Display Type" to "Text Links"). #VMAINS# - Main page links only, arranged vertically (links managed via the Menu Display module; must set "Auto-Menu Display Type" to "Text Links").
#HSUBS# - Sub page links only, arranged horizontally (links managed via the Menu Display module; must set "Auto-Menu Display Type" to "Text Links").
#VSUBS# - Sub page links only, arranged vertically (links managed via the Menu Display module; must set "Auto-Menu Display Type" to "Text Links").
#TMENU# - Inserts a horizontal, text based menu system that matches the “setup” of the Main and Sub menu system as configured via the Menu Display feature. Typically used for footer links.
#PAGENAME# - Replaces with name of current page (underscores converted into spaces).
#PAGETITLE# - Unique page name. Replaced with text defined via Edit Pages > Page Properties > Page Title
#USERSONLINE# - Replaced with the number of visitors currently browsing your website. This particular variable may be also be used within the Text Editor.
#AUTODATESTAMP# - Replaced the current weekday, month, day, and year.
#PROMOTXT1#/#PROMOTXT2# - Text variables added which inserts the first 255 characters of blog_data pulled from random blog_content entry (under special "Promo Box 1/2" blog categories)
#PROMOHDR1#/#PROMOHDR1# - Promo entry title. Works with --- the blog_title associated with blog_content entry pulled for #PROMOTXT1#/#PROMOTXT2#
#NEWSBOX# - Newsbox variable added which inserts text arranged by date, blog_title, and if desired a few lines of blog_data.
Ruben 11:40, 22 May 2006 (CDT) Below are a list of BIZ tags which information is pulled from the Global settings area.
contact information tags that can be used:
#BIZ-DOMAIN# - Replaces with Domain name.
#BIZ-COMPANY# - Replaces with Company name.
#BIZ-ADDRESS1# - Replaces with 1st address line.
#BIZ-ADDRESS2# - Replaces with 2nd address line.
#BIZ-ZIP# - Replaces with zip code.
#BIZ-CITY# - Replaces with City name.
#BIZ-STATE# - Replaces with State name.
#BIZ-COUNTRY# - Replaces with Country name.
#BIZ-EMAIL# - Replaces with email address.
#BIZ-PHONE# - Replaces with phone number.
#BIZ-FAX# - Replaces with fax number.
#COPYRIGHT# -Replaced with copyright text from global settings, prefixed with the copyright symbol ©
Custom script includes
Replaced with output of "includethis.inc" (if found), which should be placed in the template's folder along with index.html, custom.css, etc.
Replaced with output of "includethis2.inc" (if found), which should be placed in the template's folder along with index.html, custom.css, etc
Initiates php call to include("myfile.php"). Note that the pound variable itself is not actually replaced in the template html when this happens. Include file (i.e. myfile.php) should be in your template folder.
Replaced with folder name of template assigned to page currently being viewied. Added so plugin/template developers can know the current template folder for image paths, etc.
Example value of #template_folder#:
Replaced with full server path from root, up to and including folder name of template assigned to page currently being viewied.
Example value of #template_path#:
Added so plugin developers can know the current template folder for script include paths and such.
====#template_path_full_url#==== - Replaced with absolute url path to template folder, accounts for http/https, helps with image src's and such.
Example value of #template_path_full_url#:
Template Images - Giving the user control over certain images
One of the top modification requests from purchases of custom templates is "Can you change that one image to something else?". This is what the Template Images feature was designed to address. You can give the user control over any image in your template by prefixing the image's file name with "_userimg-", like so...
As the developer, this is all you have to worry about. Just make sure your image file has that _userimg- prefix and the Soholaunch tool will take care of the rest.
Because it's only the filename that is special, it doesn't matter where or how you use the image in your template html. It could be a background image assigned via a css in rule in your custom.css, it could be a normal image tag...whatever.
Uploading custom templates
If you're running v4.8.5 or later... Zip up your Template Folder and Files and upload the .zip file via Template Manager > Upload Custom Template (below Base Site Template selection). Once uploaded the product will automatically extract your .zip file in the correct location, and the template will be availible in the list of templates (drop-downs and browse by screenshot).
If you're running a version prior to v4.8.5, or if you want to quickly update individual template files... Log-in to your site via FTP and upload your template folder (containing all template files) to this folder:
When using custom navigation elements, you will need to know how to code various links. Since the entire site created within the product platform is database-driven, it is necessary to call pages differently than when coding for traditional HTML pages. Theses links must be added inside the template file.
Normal Page Links
Let’s say that you have created a navigation button that should be linked to the “About Us” Page. The following code is what should be used to link your navigation element:
Note: The page name is case sensitive and page name must be accurately depicted for proper operation. Notice that all spaces between words in the page names are separated by an underscore. This must be manually coded in place of spaces for the link to work properly.
The actual page name is directly related to the page name created within the “Create Pages” module of the Soholaunch Pro Edition.
Because your site is database driven, you will always call the “index.php” file when linking to normal site pages, like so...
And thanks to recent upgrades to make Soholaunch-created website more SEO-friendly, you can also link to the .php file that is automatically created for each site page, like so...
Note: Don't hard-code menu links if you're planning to sell your template on the Addons site. This option is only reccommended if you're building a template for a specific site only and you know exactly what links will be on the menu and that they're not going to change much. But even in those cases it'll usually be easier for you in the long run to use the Menu Navigation system, even if heavily-modified, because at some point you're almost certainly going to want to add, reorder, or remove menu links... better to make that process as easy as clicking a couple buttons in Pro Edition's Menu Navigation feature.