History: Template Tricks
Source of version: 88 (current)
Copy to clipboard
! About
Below, we will document some little template ((Tips)). Typically show content depending on something. Can be done directly in templates/*.tpl files or in Admin > Look & Feel.
! Custom CSS and JS
Starting in Tiki5, in Admin > Look & Feel (tiki-admin.php?page=look) > Miscellaneous, there is a Custom Code section to add custom CSS and JavaScript.
You can create styles/custom.js or styles/yourtheme/custom.js and that should get included automatically. You may need to empty your Tiki cache.
!! Change size of subtitle
{CODE(caption="custom CSS" colors="css")}
#sitesubtitle {
font-size: 24px;
}
{CODE}
! Help - I broke my theme
Apparently, a problem with my custom theme is preventing me from accessing my site normally.
Reset the theme "manually": If you can't access the admin pages to set your site's theme back to one that is known to work, you can reset the theme from the back end, so to speak.
__Database method:__ Use phpMyAdmin on your server to access your Tiki database. In the table "tiki_preferences", find the row for "site_style". Edit this row by replacing the custom theme name with a standard theme, such as thenews.css.
__FTP method (easier):__ Using your FTP client, go to the styles directory of your Tiki installation and rename the theme currently set as the site theme, such as by changing its ".css" file extension to ".txt". Tiki will revert to the default. Log in using the default theme and fix what is wrong. Also clear the site caches.
When trying out a new theme, it is much better to use the "switch theme" module to select it. Don't make a new and untried theme the site theme without first trying it out from the switch-theme module.
!! I am stuck in a theme
To change themes, you can point your browser to a non faulty theme:
# Point your browser to: tiki-switch_theme.php?theme=fivealive.css
# Then, also check to Clear the cache with tiki-admin_system.php?do=all
!! If anything doesn't change
For some unknown reason the theme doesn't change. Look directly in the database in -+'''tiki_preferences'''+- look at:
{CODE(colors="sql")}
UPDATE
`tiki_preferences`
SET
`value` = 'fivealive.css'
WHERE
`tiki_preferences`.`name` = 'style';
{CODE}
! Howto
!! Escaping variables used in Smarty
When modifying templates, it is important to check that variables that display output on screen be escaped except in certain circumstances, to act as a safeguard agains unfiltered user input being displayed back on the page. The question is when to escape and when not to escape? See [http://www.smarty.net/docs/en/language.modifier.escape.tpl]
*If the output of your template will be used in another template __as a variable that will be escaped there__, then there is no need to escape it the first time as it will lead to double escaping.
*If the variable is expected to possibly contain HTML, then it cannot be escaped otherwise the HTML will be displayed as text on screen. In those cases, it is the responsibility of the code that generated the HTML (e.g. the wiki parser to ensure that the HTML output is filtered), and the code of the input user interface to perform filtering in case any user enters any HTML - only trusted users should be allowed to enter any HTML).
*If the variable is used for redisplaying what the user entered __in an input text field__, then it cannot be escaped otherwise it will lead to double escaping the next time the user submits the form.
*In all other cases, the variable should be escaped using the escape variable.
**Note that if the variable is to be used in a URL, then it must be escaped using the "url" method rather than just the standard method. See [http://www.smarty.net/docs/en/language.modifier.escape.tpl] for more information.
!! Adding a print button only if current page is a wiki page
{CODE(colors="smarty")}
{if $page neq ''}
<a title="{tr}Print{/tr}" href="tiki-print.php?page={$page|escape:"url"}">
<img src="https://themes.tiki.org/show_image.php?id=54"/>{tr}Print{/tr}
</a>
{/if}
{CODE}
!! Adding some HTML (ex.: a logo) to the print version of wiki pages
{CODE(caption="Admin -> Look and Feel -> Customization -> HTML <head>" colors="smarty")}{if $SCRIPT_NAME eq '/tiki-print.php'}
<img src="http://themes.tiki.org/show_image.php?id=53" alt="Site Logo" style="border: none">
{/if}
{CODE}
!! Adding a "Hello John" indication
{CODE(colors="smarty")}
{if $user}
Hello {$user}
{/if}
{CODE}
!! Adding content only for a group
!!! In content
*((doc:PluginGroup))
!!! In a template
{CODE(colors="smarty")}{if 'Admins'|in_group or 'Editors'|in_group}
You are a member of the Admins or Editors group.
{/if}
{CODE}
!! Adding content only for a permission
{CODE(colors="smarty")}
{if $tiki_p_admin eq 'y'}
You have full admin rights
{/if}
{CODE}
!! Adding content only for a preference
{CODE(colors="smarty")}
{if $prefs.feature_wiki eq "y"}
The Wiki feature is on
{/if}
{CODE}
!!! Dislay the value of a Tiki preference in content
https://doc.tiki.org/PluginSmarty#Display_a_Tiki_preference_in_content_such_as_a_wiki_page
!! Adding content only for a category
{CODE(colors="smarty")}
{if isset($objectCategoryIds) and in_array(257, $objectCategoryIds)}
show this
{/if}
{CODE}
!! Display content conditional to current language
{CODE(colors="smarty")}
{if $prefs.language eq "fr"}
<a href="accueil">
{elseif $prefs.language eq "es"}
<a href="inicio">
{else}
<a href="tiki-index.php">
{/if}{tr}Home{/tr}</a>
{CODE}
This is an Smarty block to display only if language matches.
It's one quick hack like ((doc:PluginLang)), but to use in modules and templates.
''Example'':
~np~{translation lang="en"}Hello{/translation}~/np~
~np~{translation lang="pt-br"}Olá{/translation}~/np~
If the current language is en, Hello will be displayed. If it is pt-br, Olá.
To make users switch language, you can add ((doc:Module switch_lang)) or hard code some links such as:
{CODE(colors="smarty")}
{if $prefs.language eq "fr"}
<a href="tiki-switch_lang.php?language=fr">-English-</a>
-Français-
<a href="tiki-switch_lang.php?language=es">-Español-</a>
{elseif $prefs.language eq "es"}
<a href="tiki-switch_lang.php?language=en">-English-</a>
<a href="tiki-switch_lang.php?language=fr">-Français-</a>
-Español-
{else}
-English-
<a href="tiki-switch_lang.php?language=fr">-Français-</a>
<a href="tiki-switch_lang.php?language=es">-Español-</a>
{/if}
{CODE}
!! How to know where something is in a template?
Admin > Look & Feel > Add HTML comment at start and end of each Smarty template (TPL). Then, clear your template cache (tiki-admin_system.php?do=templates_c)
The system name for this feature is "log_tpl". Then, when you "view source" with your browser, you will see which template was used to create it.
Make sure to turn off once you go into production, or else your email notifications will also have a note!
!! How do I know which template to modify to affect the look & feel of a specific URL?
Generally, if the page name is tiki-abc.php, look templates/tiki-abc.tpl
If you can't find it:
# Activate the "Smarty Template usage indicator" in tiki-admin.php
# You need to clear the template cache (tiki-admin_system.php?do=templates_c) for this change to be taken into effect.
# You can then check the final page source to see what code is produced by what Smarty template file. (View HTML source from your browser)
As indicated on that page, "Use only for development, not in production because these warnings are added to emails as well, and visible to the users"
!! How do I change the email messages?
Look in: templates/mail/
Ex.: templates/mail/share_subject.tpl contains
{CODE(colors="smarty")}{tr}A friend sends you a link from: {/tr} {$mail_site}{CODE}
You have three options:
# Modify that file
** If you update your site via FTP, this will break at the next upgrade
# Copy that file into your custom theme and modify it there
** ex.: templates/styles/mycustomestylehere/mail/share_subject.tpl
** Thus, when you upgrade via FTP, this file will remain. However, you should check for changes in the original file
# Use the ((doc:Interface Translation)) features of Tiki.
** You should do this for any language you use. Even if your site is only in English, you can use the English to English translation file to have custom strings and keep your Tiki code untouched and make upgrades easier (pretty nifty if you ask me!)
After any file change, make sure to empty all your cache
!! How to show content just when in certain pages/features. Ex.: tiki-searchresults.php
So if you want to modify tiki-searchresults.php, you find templates/tiki-searchresults.tpl
!!! For the container
templates/tiki.tpl is the master container.
Say you want to affect the master container based on the current page, you can do
{CODE(colors="smarty")}
{if $mid eq "tiki-searchresults.tpl"}
bla bla
{/if}
{CODE}
!!! Add a Banner for each Blog, like a personal logo header
add the following code in __Site Ads and Banners Content:__in __Site Ads and Banners__ section in Administration menu. http://www.yoursite.com/tiki-admin.php?page=ads
this exemple shown a banner set in zone 'ZoneName' if the blogid #2 is active.
{CODE(colors="smarty")}
{if $blogId eq '2'}
{banner zone=ZoneName}
{/if}
{CODE}
!! How to force switch Theme for Anonymous
You could use the Group Theme feature but it seems broken currently in Tiki 5 so here's a workaround using JavaScript code in Admin > Look & Feel > General Layout > Custom HTML <head> Content ("Registered users can switch themes" - preference name change_theme - must be enabled):
{CODE(colors="smarty")}{if !$user and $prefs.style ne "jqui.css"}<script type="text/javascript">
<!--
window.location = "tiki-switch_theme.php?theme=jqui.css"
//-->
</script>{/if}{CODE}
!! How to make a page full width (no side columns but header and body): Liquid-width
Web pages can be liquid-width (using 100% of the browser viewport from left to right) or fixed-width (using some part of the total width). Bootstrap uses a container class div to limit the width of the web page's content to 1170px (default) in the center of the screen. But sometimes, for the graphic design or other reason, we want to have one or more page sections that don't have this width limitation.
See ((Liquid-width section in page))
!! Add wiki syntax in Custom code text areas of Look & Feel
{CODE(colors="smarty")}{wiki}{literal}
::My __wiki__ code::
{/literal}{/wiki}{CODE}
This works until ((doc:Tiki6)), because starting in ((doc:Tiki7)), all the zones are now drag & drop ((doc:modules))
!! Add JavaScript tracking code
See ((doc:Piwik)) example.
!! Add your own PHP code
You can add PHP to Smarty using the [http://www.smarty.net/docs/en/language.function.php.tpl|php smarty tag|nocache], but for this to work, you need to deactivate the Smarty Security (which is on by default). A safer and better way is to [http://tikiwiki.svn.sourceforge.net/viewvc/tikiwiki/trunk/lib/smarty_tiki/|Create your own Smarty plugin|nocache].
!! Add Post-It Notes
See ((doc:Custom Code HowTo - Post-It Notes))
!! Add a top-level menu
!!! Until Tiki6
tiki-admin.php?page=look -> General Layout options -> Secondary site menu custom code
{CODE(caption="replace 47 with your actual menu ID")}{menu id=47 css=y type=horiz}{CODE}
!!! Tiki7 and above
This is easier now, and you can use ((doc:Module menu)), which you can drag & drop (and double click to edit parameters) at tiki-admin_modules.php
You need to set the params to the module such as nobox=y, etc...
!! Timed content
* ((doc:PluginContent))
!! Dynamic content
* ((doc:PluginRcontent))
* ((doc:Module random_pages))
!! Show the content without columns
point your browser like this example: tiki-index_p.php?page=i18n
Or use ((doc:PluginAppFrame)) or ((doc:PluginLayout))
!! Add a wiki page in module
* ((doc:Module menupage))
!! How to Add Custom jQuery Code Using the Custom Code Textareas
* ((doc:Custom Code HowTo - jQuery))
!! Debug
Put in a template or in Look & Feel custom code to have a popup with information on all the variables, at each page refresh.
{CODE(colors="smarty")}
{debug}
{CODE}
To avoid driving your users mad :-)
{CODE(colors="smarty")}
{if $user eq 'admin'}
{debug}
{/if}
{CODE}
!! Categories used in templates
Admin -> Category -> Categories used in templates (TPL)
(categories_used_in_tpl)
How to use? Something like
http://doc.tiki.org/Category+Admin#Using_the_current_object_categories_in_a_tpl
[http://dev.tiki.org/Hello+World#To_do_something_specific_in_a_template_ex.:_tiki.tpl_conditional_to_the_current_item_being_in_a_category._Ex.:_different_header_picture.|another]
To determine __if__ an object is categorized, use:
{CODE(colors="smarty")}
{if !empty($objectCategoryIds)}
NOT categorized
{else}
AM categorized
{/if}
{CODE}
!! Show or hide modules by category
This is a new native feature in ((doc:Tiki8)). Just admin any module and indicate when to hide/show as you would edit any module param...
!! Section
{CODE(colors="smarty")}
{if $section eq "blogs"}
text shown just when in one of the blog pages
{/if}
{CODE}
!! Perspective
The current perspective ID is not available to the templates. However, you can simply use the value of something that was overridden in this template. This could be in one of the Site identity fields.
{CODE(caption="To change the menu depending on the Site title")}{if $prefs.sitetitle eq "Workspace Sales" colors="smarty"}
{phplayers id=45 type=horiz css=y}
{else}
{phplayers id=47 type=horiz css=y}
{/if}
{CODE}
!! Variables
!!! Dynamic variables
((doc:Dynamic variables))
!!! Use current page name as content
[http://doc.tiki.org/Advanced+Wiki+Syntax+usage+examples#How_to_display_URL_param_in_a_page_or_the_page_name_or_the_user_name|How to display URL param in a page or the page name or the user name]
!! Alternate view of wiki content
!!! Raw
http://themes.tiki.org/tiki-index_raw.php?page=Template+Tricks
!!! Middle only, useful to include in an iframe
http://themes.tiki.org/tiki-index_p.php?page=Template+Tricks
!!! Fullscreen
works for all features, not just wiki pages
http://themes.tiki.org/tiki-index.php?page=Template+Tricks&fullscreen=y
related:
doc:((doc:Fullscreen))
dev:((dev:Fullscreen))
!!! Slideshow
* ((doc:Slideshow))
!!! Mobile
* ((doc:Mobile))
!!! Clearing cache
* ((doc:cache))
! Improve communication for planned maintenance
If your site changes hosts, you may have time to plan a nice message on the maintenance page of the old host. The maintenance mode only permits a short sentence, as the maintenance page should work even if the database is unavailable.
This is the part of tiki-error_simple.php you are looking for.
{CODE(caption="Section of tiki-error_simple.php" colors="smarty")}echo '</p>
<form name="loginbox" action="tiki-login.php?page=tikiIndex" method="post">
{CODE}
Note that all is into a ~np~<pre>~/np~ tag, so don't forget the line breaks. Also, handle single quotes with care.
{CODE(caption="new example message" wrap="1" colors="smarty")}echo '</p>
The site xxxxxx.xxx is being transferred between servers between 19:30 and ca. 21:00 GMT today, 29 December 2011.
Access during this time may be interrupted for short periods. No editing of pages and no posting will be possible during this time.
While the new location is being propagated over the Internet (can take hours) you can <a href="http://new-xxxx.xxx">reach the site here.</a>
<form name="loginbox" action="tiki-login.php?page=tikiIndex" method="post">{CODE}
! Related
* ((dev:Templates Best Practices))
* ((doc:Advanced Wiki Syntax usage examples))