Information Center

In the Information Center you will find everything you need to know about SobiPro and its applications!
It is also the place to download SobiPro, its applications and language packages.

Information Center

Quick jump to:

The default Template - File Structure of the default Template

File Structure of the default Template

Last updated: 8. November 2017

Refers to version: 1.4.4+ (V4)

The default template included in SobiPro is a sophisticated template with a lot of features implemented, using a loop to show the fields defined in the fields manager. The most recent version of the default template is default4. The default4 template is based on Bootstrap 3. You will find a description of the template features in Template Settings.
If you develop your own SobiPro template, it is highly recommended to start with this template as a basis.

A SobiPro template consists of several files which meaning is described below.

Template Files in default4 screenshot

Folder category

The folder category contains the default category view file view.xsl with calls to the templates for top menu, navigation, entries and categories.

Folder common

The folder common contains several helper files:

Template Files in default4 screenshot
alphaindex.xsl
Template for the alpha index (letters) only.
alphamenu.xsl
Template for the alpha menu. Displays the alpha fields drop-down list and calls the alpha index (letters) template.
categories.xsl
Template for the categories list (categoriesLoop). Calls the template for a single category (category.xsl).
category.xsl
Template for a single category in the categories list.
editfields.xsl
Template to output one field in entry form. Called from default loop in edit.xsl. Can be called separately for one field to output all fields separately for more sophisticated design.
<xsl:call-template name="editfield">
    <xsl:with-param name="fieldname" select="entry/fields/field_name"/>
</xsl:call-template>
entries.xsl
Template to display all entries (entriesLoop) within a category or the search function. Build the structure of all entries and calls the vCard template while displaying single entry.
font.xsl
Template to load Google fonts. Will be called from the topmenu template.
manage.xsl
Displays the managing functions like edit entry, approve aso, within an entry.
messages.xsl
Displays the message bar.
navigation.xsl
Template for the site navigation.
searchfields.xsl
Template to output one field in the search. Called from default loop. Can be called separately for one field to output all fields separately for more sophisticated design.
<xsl:call-template name="searchfield">
    <xsl:with-param name="fieldname" select="fields/field_name"/>
    <xsl:with-param name="position" select="position()"/>
</xsl:call-template>
showfields.xsl
Template to output one field in vCard and details view. Called from default loop. Can be called separately for one field to output all fields separately for more sophisticated design.
Call one field separately in vCard view:
<xsl:call-template name="showfield">
    <xsl:with-param name="fieldname" select="fields/field_name"/>
    <xsl:with-param name="view" select="'vcard'"/>
</xsl:call-template>
Call one field separately in details view:
<xsl:call-template name="showfield">
    <xsl:with-param name="fieldname" select="entry/fields/field_name"/>
    <xsl:with-param name="view" select="'dv'"/>
</xsl:call-template>
topmenu.xsl
Template for the top menu.
vcard.xsl
The template to display single entry within a category, any listing view or the search function.

Folder css

The folder css contains the LESS and CSS files for the template.

Template Files in default4 screenshot
custom.less (formerly default.less)
LESS file for the custom CSS file. Your own CSS changes goes in here. If you want to modify some styles, add your changes to this LESS file and compile it. If you do not want to use the LESS file, add your changes to the CSS file. In this case, do NOT compile the LESS file as it would overwrite your changes!
custom.css (formerly default.css)
Custom CSS file. Your own CSS changes goes in here. If you want to modify some styles, add your changes to the LESS file and compile it. If you do not want to use the LESS file, add your changes to this CSS file. In this case, do NOT compile the LESS file as it would overwrite your changes!
theme.less
LESS file for the theme CSS file. This is the main theme file.

Do not make any changes in this file! If you want to modify some styles, add your changes to the file custom.less resp. custom.css!

theme.css
Theme CSS file. This file will be automatically generated by compiling theme.less!

Do not make any changes in this file! If you want to modify some styles, add your changes to the file custom.less resp. custom.css!

review.less
LESS file for the Review & Rating application CSS file (not part of the default template). This file is available only if the Review & Rating application is installed and enabled for the section.
review.css
Review & Rating application CSS file (not part of the default template). This file will be automatically generated by compiling review.less!
entries-module.css
Default CSS file for the Entries module (not part of the default template). This file is available only if the Entries module is installed and used for the section.

The folder tmpl contains correction files. Unfortunately the most Joomla! templates change the default Bootstrap layout or influences the styles of SobiPro templates. Therefore we try to make some so called correction files to revert these changes for the SobiPro template. As we do not have other Joomla! templates, we can create correction files for only those templates we have. If you need to tweak it a bit more, put your corrections into these files or create your own correction file for the Joomla! template you use.

You need to add the correction file you want to use in the general configuration file config.ini:
css_files = "theme,tmpl/correctionfile,custom"

tmpl/jbootstrap.css
Correction file for Joomla! Bootstrap 2 loaded in front-end together with a SobiPro Bootstrap 3 template.
tmpl/joostrap.css
Correction file for Joostrap templates.

Folder entry

The folder entry contains the files used for an entry in details view and entry form.

Template Files in default4 screenshot
details.xsl
Template for the entry details view page.
details.ini
Configuration file to load javascript files in the details view. By default the following javascript files are loaded: js_files = "alpha,bootstrap.b3typeahead,autosuggest,details".
edit.xsl
Template for the entry form (add/edit entry page).
edit.ini
Configuration file to load javascript files in the entry form. By default the following javascript files are loaded: js_files = "edit,bootstrap.tooltips,bootstrap.popover,bootstrap.b3typeahead,form".
edit.json
Configuration file for the entry form. Automatically generated from the Template Settings!

Folder feeds

SobiPro has integrated a RSS function. The folder feeds contain the template and configuration files for it.

Template Files in default4 screenshot
rss.xsl
Template for Atom/RSS feeds. Modify it to suit your needs.
rss.ini
Configuration file for RSS feeds.
rss.json
Configuration file for the feeds, automatically generated from the Template Settings!

Folder js

The folder js contains the javascript files, necessary for this template.

Template Files in default4 screenshot
alpha.js
This javascript file contains the scripts for the alpha index selector, the deleting on an entry from front-end and the categories container show/hide functionality.
autosuggest.js
This script is for the autosuggestion of entries in the top menu search box.
details.js
Javascripts necessary for tooltips, carousel slider and Google map.
form.js
Javacripts used in the entry form of SobiPro.
navigation.js
The AJAX navigation script.
search.js
This javascript file contains the scripts for the search function of SobiPro.

Folder listing

The folder listing contains specific entry listings. The default entry listings are the category and section view.

Template Files in default4 screenshot
alpha.xsl (core)
This listing view shows the entries available for the letter of the selected alpha index. It's a core functionality.
date.xsl (core)
This listing view shows entries from a specific date. Activate this view by adding a Joomla menu item for SobiPro with selected functionality Link to listing by date. Read more about Joomla! menu item for SobiPro - Select Functionality 'Link to listing by date'. It's a core functionality.
user.xsl (core)
This listing view shows the entries of the logged in user. Activate this view by adding a Joomla menu item for SobiPro with selected functionality Link to user listings. Read more about Joomla! menu item for SobiPro - Select Functionality 'Link to user listings'. It's a core functionality.

Folder payment

The folder payment contains the files necessary for the pyament functionality of SobiPro.

Template Files in default4 screenshot
list.xsl
List of payments on the payment page.
payment.xsl
Payment page after an entry has been added.
submit.xsl
Template for the preview of the payment.

Folder search

The folder search contains the default search form file search.xsl.

Template Files in default4 screenshot
search.xsl
Default search form template.
search.ini
Configuration file to load javascript files in the search form. By default the following javascript files are loaded:js_files = "alpha,navigation,bootstrap.b3typeahead,autosuggest,search"

Folder section

The folder section contains the default section view file view.xsl with calls to the templates for top menu, navigation, entries and categories. It also contains the section-wide AJAX navigation files.

Template Files in default4 screenshot
view.xsl
Default section view template.
ajax.xsl
AJAX navigation file, valid for the views section, category, listing (all listing views) and search (search form).
ajax.ini
AJAX configuration file.
Template Files in default4 screenshot

Folder themes

The folder themes contains the different colour themes of the template.

Files in the root folder

Template Files in default4 screenshot
config.ini
Configuration file to load javascript and CSS files in the entry form.
By default the following javascript files: js_files = "alpha,bootstrap.b3typeahead,autosuggest,navigation" and the following CSS files are loaded: css_files = "theme,custom".
config.json
Main template configuration file. Automatically generated from the Template Settings! This is file is not shown in the tree, access it via the template information screen.
config.xml
The Template Settings file. This is the template file for (showing) the template settings. Do not change this file unless you are instructed to do so. Wrong changes made to this file results in the possibility of destroying the template settings functionality. This is file is not shown in the tree, access it via the template information screen.
template.php
PHP file with additional PHP functions to use within templates.
template.xml
The template's installer file. Do not change this file unless you are instructed to do so.
translation.xml
Translation file for texts in templates. Read more about this translation file in Translate text in Template files.

Loading extra Javscript files

You can add additional javascript files to the template if you implement functionality which is based on javascript.

  1. If the file does not already exist in the SobiPro javascript folder components/com_sobipro/lib/js (or its sub-folders), add the file to the javascript folder js of your section template. If you want to use the same script for several section templates, you can also add the file to the template storage.
  2. Add the script's file name to the ini file of the view you want to use the script functions. E.g. if you want to use the script in the edit form, add the script's file name to entry/edit.ini by appending it to the already existing file names of js_files (omit the file extension .js). If there doesn't yet exist an ini file for that specific view, just create it. Please note, by adding an ini file to a view, the javascript files loaded via the main config.ini file from the template's root folder are not longer loaded, so it may be necessary to add them to your new ini file. The name of the new ini file has to be the same as the view file (besides the file extension).

    [general]
    template_type = "xslt"
    js_files = "your js file goes here"

    You do not need to add a folder to the script name if the script file is located either in the templates folder js or in the SobiPro folder components/com_sobipro/lib/js. SobiPro does load javascript files only from these folders or sub-folders of these folders. If you add your file to e.g. a sub folder js/myfolder, the script's file name in the ini file has to be myfolder.filename. If you have added the file to the template storage, e.g. in the folder storage/js, you need to add to the ini file storage.js.filename
    If your script file name contains dots, you need to rename the file first as dots are used for folder separators.

Copyright (C) 2006-2017 Sigsiu.NET GmbH (https://www.sigsiu.net). All rights reserved.

This documentation and all images therein are copyrighted and protected by law. You may not publish, distribute or sell them or parts of it without explicit written permission of Sigsiu.NET GmbH.

Published on Saturday, 30 January 2016.
Visited 1741 times.
Powered by SobiPro
to Top