First of all we need to add new rendering option to templavoila plugin:
Setup.TS
TCEFORM.tx_templavoila_tmplobj.rendertype.addItems.mobile = Mobile version
Afterwards, create a new sub-templates for desired pages (admin backend).
We can detect users agent with Typo3 built-in conditions:
[useragent= agent]
Check if useragent is mobile:
[useragent = *iPhone*] || [useragent = *iPod*] || [useragent = *iPad*] || [useragent = *Android*] || [useragent = *OperaMini*] || [useragent = *BlackBerry*]
Setup.TS
[useragent = *iPhone*] || [useragent = *iPod*] || [useragent = *iPad*] || [useragent = *Android*] || [useragent = *OperaMini*] || [useragent = *BlackBerry*]
# if it's mobile, set childtemplate to mobile
plugin.tx_templavoila_pi1.childTemplate = mobile
page = PAGE
page >
page = PAGE
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
#name of child template
page.10.childTemplate = mobile
#change doctype and encoding
page.config >
page.config {
#output will be utf-8
renderCharset = utf-8
#doctype for mobile devices will be XHTML MP 1.0
doctype (
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
)
}
[else]
page = PAGE
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
[END]
while you’re at it you might want to change your menu layout to include different navigation. This will create menu from pages that have pageID 199 as their parent:
Setup.TS
[useragent = *iPhone*] || [useragent = *iPod*] || [useragent = *iPad*] || [useragent = *Android*] || [useragent = *OperaMini*] || [useragent = *BlackBerry*]
lib.mainMenu = HMENU
lib.mainMenu{
special = directory
special.value = 199
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.wrapItemAndSub = <li><div class="someclass">|</div></li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
}
[global]
and you should change template files of various plugins…