{{indexmenu_n>500}}
===== Templates =====
==== Basic understanding ====
The system itself is providing templates for almost every Content Part of an article. They can be found at [[:english:phpwcms-system:article:contentparts|inc_cntpart]]/name-of-cp (attention: some of them are not self-explaining!) and at template/inc_default (the default if no specific template has been chosen)\\ 
Now - how is this going to work\\ 
While you are working at an article you mostly want to add some content for your readers. This will be achieved by adding a Content Part by selecting one from the pull down menu at the top of the page's basic edit window (the window you'll get when adding a new article)\\ 
--image--
\\
Beyond the basics you can do some fantastic things while designing a template and add some neat little tricks. Here is one for showing a logged-in / logged-out state (just to tease you ;-) ) \\ 
This is a snippet taken from a template for accordion tabs and the tab title is showing different images when logged in/not logged in:
<code html>
.....
<div id="tab{ID}" class="tabs <!--LOGGED_OUT_START//-->tabfeature_{ID}<!--LOGGED_OUT_END//--><!--LOGGED_IN_START//-->tabfeaturelogin_{ID}<!--LOGGED_IN_END//-->">{TABS_ENTRIES}</div>
.....
</code>
And the CSS:
<code css>
#tab1839.tabs.tabfeature_1839 .toggler.at10Start {
	background: transparent url(/pics/notlogged-trans.png) 50% 100% no-repeat;
}
#tab1839.tabs.tabfeaturelogin_1839 .toggler.at10Start {
background: transparent url(/pics/logged-trans.png) 50% 100% no-repeat;
}
/*and some hover states could be added too of course*/
#tab1839 .toggler.at10Start div {
visibility:hidden;
/*hide the tab title and show the image only - only an example*/
}
</code>
This -as always- can be done better or by choosing another procedure, but you'll probably get the picture.\\ 
Later we'll show you some more and some fully featured templates and the necessary scripts and CSS.... stay tuned LOL
FIXME Explanation for Templates (and what you can do with them ;-) )

\\

Technics: [[english/technics/system-variables/templates#mount_a_static_file_as_a_template_in_the_main|Mount a static file as a template in the "main:"]] \\
Technics: [[english/technics/system-variables/templates#templateembed_the_fields_headerfooterleftrightin_main|Template: Embed the fields "header:", "footer:", "left:", "right:" in "main:"]]

\\
===== Short link overview =====

{{indexmenu>english:templates|js#doku navbar msort nsort nocookie notoc}}