Розділи: Documentation / Extending Cotonti / Themes
You can think of Cotonti as a "dumb machine", it simply picks data from MySQL database and sends it to client (web browser) through a template engine, the "theme".
Theme — a set of files used to programm pages layout and its styling. style named xxx.tpl in folders inside /skins folder (for example: /themes/mytheme)
Template file (usually have .tpl extension) — a file made of simple HTML code, plus some placeholders named "tags"
Tag — special marked place holder to be substituted on templace parsing with some variable content. CoTemplate tags enclosed with curly brackets {}, and can be placed anywhere within HTML code, like this:
<a href="{PHP.cfg.mainurl}" title="{PHP.L.Home}">
{PHP.L.Home}
<span>Start here</span>
</a>
Nearly all pages (except popups) are built this way:
At the very beginning, Cotonti connects to the MySQL database, grabs some global data, loads the levels, the categories, statistics and perform a load of other actions. At this point nothing is sent to the client (your browser) yet.
Then it loads the file /system/header.php
This file mainly outputs the HTML code for the top of the website.
This is done through the TPL file : themes/…/header.tpl
Then the body of the page is loaded, and same as before, some HTML code is created for the middle of the page, still with a tpl file.
Then the file /system/footer.php is loaded.
It's outputing the HTML code for the bottom of the website.
And once again, this output is done through a TPL file : themes/…/footer.tpl
So a page is almost always made of 3 separate parts:
- The header (the top) : Always header.tpl
- The body of the page (the middle) : A file *.tpl
- The footer (the bottom) : Always footer.tpl
The body can be the the home page, the forums, an event, userlist, the administration panel, a plugin, etc.
Basically a "theme" is a set of TPL files, TPL stands for "templates".
A TPL file is made of HTML code, plus placeholders named "tags".
In almost all pages, the HTML send to the client browser is made of 3 TPLs, added one after the other, in this order :
For example, Cotonti will output the homepage using : header.tpl + index.tpl + footer.tpl
For the forums home it will be: header.tpl + forums.sections.tpl + footer.tpl
So if you plan to build your own theme, the fastest and easiest way is to go with an official development theme (i.e. Nemesis) and first start to tweak header.tpl, footer.tpl and the CSS file. By editing those only 3 files you can quickly get interesting results.
For some reasons, the popups for the ratings and the polls do not follows this, those standalone pages have their own header and footer in their main TPL file.
Tags are looking like this : {XXX_YYY}
In short, a tag is an object dynamically created by the PHP code, inside there're values such as strings, HTML code, URLs, pictures, etc.
Note: that tags that are not "global" will only work in a given TPL file. The name of the tag often tells where this tag is valid
(for example: tag {PAGE_XXX} will only work in page.tpl, {COMMENTS_XXX} will only work in comments.tpl and so on).
To see the list of tags available on the current page, append &tpl_debug=1 to the page parameters (more info about debuggin themes).
Global tags are a special kind of tags, valid in all skin files.
Most of the time, those tags are coming from PHP code variables, or from the configuration table, or from global plugins.
All global tags are looking like this : {PHP.tagnamehere}
For the complete list of global tags, you can insert a vardump for PHP tag in your template: {PHP|dump}. This feature is available since 0.9.1.
Sample, some fairly common global tags :
{PHP.cfg.adminemail}
{PHP.cfg.maintitle}
{PHP.cfg.mainurl}
{PHP.usr.name}
{PHP.usr.id}
{PHP.out.copyright}
Розділи: Documentation (Genoa and older) / Dutch / Skins
{ADMIN_MAIN}
en verander het in:<div id="pagtab">
{ADMIN_MAIN}
</div>
Розділи: Documentation (Genoa and older) / English / Skins
{ADMIN_MAIN}
and change it to:<div id="pagtab">
{ADMIN_MAIN}
</div>
Розділи: Documentation (Genoa and older) / English / Skins
<tr>
<td>{PHP.L.Begin}:</td>
<td>{PAGEADD_FORM_BEGIN}</td>
</tr>
<!-- BEGIN: ADMIN -->
<tr>
<td>{PHP.L.Parser}:</td>
<td>{PAGEADD_FORM_TYPE}</td>
</tr>
<!-- END: ADMIN -->
Розділи: Documentation (Genoa and older) / Dutch / Skins
<tr>
<td>{PHP.L.Begin}:</td>
<td>{PAGEADD_FORM_BEGIN}</td>
</tr>
<!-- BEGIN: ADMIN -->
<tr>
<td>{PHP.L.Parser}:</td>
<td>{PAGEADD_FORM_TYPE}</td>
</tr>
<!-- END: ADMIN -->
Розділи: Documentation (Genoa and older) / Türkçe / Temalar
<!-- IF {PHP.tag_i} > 0 -->, <!-- ENDIF --><a href="{PAGE_TAGS_ROW_URL}">{PAGE_TAGS_ROW_TAG}</a>
değiştirin:<!-- IF {PHP.tag_i} > 0 -->, <!-- ENDIF --><a href="{PAGE_TAGS_ROW_URL}">{PAGE_TAGS_ROW_TAG}</a>
<!-- BEGIN: DOWNLOAD -->
{PAGE_FILE_ICON}<a href="{PAGE_FILE_URL}">{PHP.L.Download}: {PAGE_SHORTTITLE}</a><br/>
<!-- END: DOWNLOAD -->
değiştirin:<!-- BEGIN: DOWNLOAD -->
{PAGE_FILE_ICON}<a href="{PAGE_FILE_URL}">{PHP.L.Download}: {PAGE_FILETITLE}</a><br/>
<!-- END: DOWNLOAD -->
<div class="pagnav">{PAGE_PAGEPREV} {PAGE_PAGNAV} {PAGE_PAGENEXT}</div>
değiştirin:<div class="paging">{PAGE_PAGEPREV} {PAGE_PAGENAV} {PAGE_PAGENEXT}</div>
Розділи: Documentation (Genoa and older) / Dutch / Skins
<!-- IF {PHP.tag_i} > 0 -->, <!-- ENDIF --><a href="{PAGE_TAGS_ROW_URL}">{PAGE_TAGS_ROW_TAG}</a>
met<!-- IF {PHP.tag_i} > 0 -->, <!-- ENDIF --><a href="{PAGE_TAGS_ROW_URL}">{PAGE_TAGS_ROW_TAG}</a>
Verschil is de spatie na -->,<!-- BEGIN: DOWNLOAD -->
{PAGE_FILE_ICON}<a href="{PAGE_FILE_URL}">{PHP.L.Download}: {PAGE_SHORTTITLE}</a><br/>
<!-- END: DOWNLOAD -->
met<!-- BEGIN: DOWNLOAD -->
{PAGE_FILE_ICON}<a href="{PAGE_FILE_URL}">{PHP.L.Download}: {PAGE_FILETITLE}</a><br/>
<!-- END: DOWNLOAD -->
<div class="pagnav">{PAGE_PAGEPREV} {PAGE_PAGNAV} {PAGE_PAGENEXT}</div>
met<div class="paging">{PAGE_PAGEPREV} {PAGE_PAGENAV} {PAGE_PAGENEXT}</div>
Розділи: Documentation (Genoa and older) / English / Skins
<!-- IF {PHP.tag_i} > 0 -->, <!-- ENDIF --><a href="{PAGE_TAGS_ROW_URL}">{PAGE_TAGS_ROW_TAG}</a>
with<!-- IF {PHP.tag_i} > 0 -->, <!-- ENDIF --><a href="{PAGE_TAGS_ROW_URL}">{PAGE_TAGS_ROW_TAG}</a>
Difference is the space after -->,<!-- BEGIN: DOWNLOAD -->
{PAGE_FILE_ICON}<a href="{PAGE_FILE_URL}">{PHP.L.Download}: {PAGE_SHORTTITLE}</a><br/>
<!-- END: DOWNLOAD -->
with<!-- BEGIN: DOWNLOAD -->
{PAGE_FILE_ICON}<a href="{PAGE_FILE_URL}">{PHP.L.Download}: {PAGE_FILETITLE}</a><br/>
<!-- END: DOWNLOAD -->
<div class="pagnav">{PAGE_PAGEPREV} {PAGE_PAGNAV} {PAGE_PAGENEXT}</div>
with<div class="paging">{PAGE_PAGEPREV} {PAGE_PAGENAV} {PAGE_PAGENEXT}</div>
Розділи: Themes
Skin converted from ChocoTemplates.com
Original template demo
The menu-structure can be found in the readme-file
Розділи: Documentation (Genoa and older) / English / Skins
/* ============== Ratings CSS ============== */
<td colspan="2" class="valid">
<input type="submit" value="{PHP.skinlang.pageadd.Submit}" />
</td><td colspan="2" class="valid">
<!-- IF {PHP.usr_can_publish} -->
<input name="rpublish" type="submit" class="submit" value="{PHP.L.Publish}" onclick="this.value='OK';return true" />
<input type="submit" value="{PHP.L.Putinvalidationqueue}" />
<!-- ELSE -->
<input type="submit" value="{PHP.L.Submit}" />
<!-- ENDIF -->
</td>
PHP.L.plu_therescurrently} {WHOSONlINE_VISITORS} {PHP.L.plu_visitors} {WHOSONlINE_MEMBERS} {PHP.L.plu_members}<br /> <br />PHP.L.plu_therescurrently} {WHOSONlINE_VISITORS} {WHOSONlINE_TEXTVISITORS} {WHOSONlINE_MEMBERS} {WHOSONlINE_TEXTMEMBERS}<br /> <br />
Розділи: Themes
Розділи: News / Announcements
 |
Today we have received the last votes and opinions on the three skins which were selected for the final round of the competition. It was a spectacular race because nobody really knew which skin would take over. Every single point from the jury was very significant. However, now it is time to take a deep breath because here are the the winners and their prizes: |
Розділи: News / Announcements
Розділи: Articles
Розділи: News / Announcements