adapted tvguideng templates

4 files changed, 315 insertions, 9 deletions

diff --git a/HISTORY b/HISTORY
index a83ec83..85efc53 100644
--- a/HISTORY
+++ b/HISTORY
@@ -224,3 +224,4 @@ Version 0.3.1
 
 - Fixed hide root menu from a subview template
 - Fixed translation of grids
+- adapted tvguideng templates
diff --git a/skins/blackhole/xmlfiles/plug-tvguideng-root.xml b/skins/blackhole/xmlfiles/plug-tvguideng-root.xml
index bb7fc94..fe69af9 100644
--- a/skins/blackhole/xmlfiles/plug-tvguideng-root.xml
+++ b/skins/blackhole/xmlfiles/plug-tvguideng-root.xml
@@ -59,7 +59,28 @@
     {posterheight}            height of scraped poster
     {posterpath}              absolute path of scraped poster
     -->
-    <viewelement name="header">
+    <viewelement name="header_hor">
+        <areascroll condition="not{isdummy}++not{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="1%" y="1%" width="58%" height="18%" layer="2">
+            <drawtext x="0" y="0" font="{semibold}" width="100%" fontsize="20%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
+            <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="25%" color="{clrWhite}" text="{title}" />
+            <drawtextbox name="shorttext" x="0" y="45%" width="100%" font="{regular}" fontsize="15%" color="{clrWhite}" text="{shorttext}" />
+            <drawtextbox x="0" y="{posy(shorttext)} + {height(shorttext)}" width="100%" font="{regular}" fontsize="15%" color="{clrWhite}" text="{description}" />
+        </areascroll>
+        <area condition="not{isdummy}++{hasposter}" x="1%" y="1%" width="{areaheight}*0.18*{posterwidth}/{posterheight}" height="18%" layer="2">
+            <drawimage imagetype="image" path="{posterpath}" x="0" y="0" width="100%" height="100%"/>
+        </area>
+        <areascroll condition="not{isdummy}++{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="12%" y="1%" width="46%" height="18%" layer="2">
+            <drawtext x="0" y="0" font="{semibold}" width="100%" fontsize="20%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
+            <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="25%" color="{clrWhite}" text="{title}" />
+            <drawtextbox name="shorttext" x="0" y="45%" width="100%" font="{regular}" fontsize="15%" color="{clrWhite}" text="{shorttext}" />
+            <drawtextbox x="0" y="{posy(shorttext)} + {height(shorttext)}" width="100%" font="{regular}" fontsize="15%" color="{clrWhite}" text="{description}" />
+        </areascroll>
+        <area condition="{isdummy}" x="1%" y="1%" width="58%" height="18%" layer="2">
+            <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="35%" color="{clrWhite}" text="{title}" />
+        </area>
+    </viewelement>
+
+    <viewelement name="header_ver">
         <areascroll condition="not{isdummy}++not{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="1%" y="1%" width="58%" height="18%" layer="2">
             <drawtext x="0" y="0" font="{semibold}" width="100%" fontsize="20%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
             <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="25%" color="{clrWhite}" text="{title}" />
@@ -102,7 +123,7 @@
     {yellow}                  label of yellow button
     {blue}                    label of blue button
     -->
-    <viewelement name="footer">
+    <viewelement name="footer_hor">
         <area condition="{red1}" x="0" y="90%" width="25%" height="10%" layer="2">
             <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="60%"/>
         </area>
@@ -204,6 +225,107 @@
         </area>
     </viewelement>
 
+    <viewelement name="footer_ver">
+        <area condition="{red1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{red1}" x="0" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{green1}" x="0" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{yellow1}" x="0" y="90%" width="25%" height="10%" layer="4">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{blue1}" x="0" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{blue}" />
+        </area>
+
+        <area condition="{red2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{red2}" x="25%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{green2}" x="25%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{yellow2}" x="25%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{blue2}" x="25%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{blue}" />
+        </area>
+        
+        <area condition="{red3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{red3}" x="50%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{green3}" x="50%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{yellow3}" x="50%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{blue3}" x="50%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{blue}" />
+        </area>
+        
+        <area condition="{red4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{red4}" x="75%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{green4}" x="60%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{yellow4}" x="75%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="60%"/>
+        </area>
+        <area condition="{blue4}" x="75%" y="90%" width="25%" height="10%" layer="3">
+            <drawtext align="center" valign="center" font="{regular}" fontsize="50%" color="{clrWhite}" text="{blue}" />
+        </area>
+    </viewelement>
     <!-- Available Variables time:
     {time}                   timestring in hh:mm
     {sec}                    current seconds
@@ -211,7 +333,7 @@
     {hour}                   current hours
     {hmins}                  current "hourminutes" to display an hour hand
     -->
-    <viewelement name="time">
+    <viewelement name="time_hor">
         <area x="81%" y="0" width="7%" height="5%" layer="3">
             <drawtext x="0" valign="center" font="{digital}" fontsize="90%" color="{clrWhite}" text="{time}" />
         </area>
@@ -226,6 +348,20 @@
         </area>
     </viewelement>
 
+    <viewelement name="time_ver">
+        <area x="81%" y="0" width="7%" height="5%" layer="3">
+            <drawtext x="0" valign="center" font="{digital}" fontsize="90%" color="{clrWhite}" text="{time}" />
+        </area>
+        <area x="{areawidth}*0.865" y="{areawidth}*0.005" width="13%" height="{areawidth}*0.13" layer="4">
+            <drawimage imagetype="skinpart" path="watchhands/s_{sec}" x="0" y="0" width="100%" height="100%"/>
+        </area>
+        <area x="{areawidth}*0.865" y="{areawidth}*0.005" width="13%" height="{areawidth}*0.13" layer="4">
+            <drawimage imagetype="skinpart" path="watchhands/m_{min}" x="0" y="0" width="100%" height="100%"/>
+        </area>
+        <area x="{areawidth}*0.865" y="{areawidth}*0.005" width="13%" height="{areawidth}*0.13" layer="5">
+            <drawimage imagetype="skinpart" path="watchhands/h_{hmins}" x="0" y="0" width="100%" height="100%"/>
+        </area>
+    </viewelement>
     <!-- Tokens available in datetimeline
     {weekday}                weekday of current display
     {date}                   date of current display
diff --git a/skins/metrixhd/xmlfiles/plug-tvguideng-root.xml b/skins/metrixhd/xmlfiles/plug-tvguideng-root.xml
index 4c09d78..3a909f2 100644
--- a/skins/metrixhd/xmlfiles/plug-tvguideng-root.xml
+++ b/skins/metrixhd/xmlfiles/plug-tvguideng-root.xml
@@ -53,7 +53,28 @@
     {posterheight}            height of scraped poster
     {posterpath}              absolute path of scraped poster
     -->
-    <viewelement name="header">
+    <viewelement name="header_hor">
+        <areascroll condition="not{isdummy}++not{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="1%" y="1%" width="68%" height="19%" layer="2">
+            <drawtext x="0" y="0" font="{semibold}" width="100%" fontsize="25%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
+            <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="30%" color="{clrWhite}" text="{title}" />
+            <drawtextbox name="shorttext" x="0" y="50%" width="100%" font="{light}" fontsize="20%" color="{clrWhite}" text="{shorttext}" />
+            <drawtextbox x="0" y="{posy(shorttext)} + {height(shorttext)} - {areaheight}*0.15" width="100%" font="{light}" fontsize="20%" color="{clrWhite}" text="{description}" />
+        </areascroll>
+        <area condition="not{isdummy}++{hasposter}" x="1%" y="1%" width="{areaheight}*0.2*{posterwidth}/{posterheight}" height="19%" layer="2">
+            <drawimage imagetype="image" path="{posterpath}" x="0" y="0" width="100%" height="100%"/>
+        </area>
+        <areascroll condition="not{isdummy}++{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="12%" y="1%" width="56%" height="19%" layer="2">
+            <drawtext x="0" y="0" font="{semibold}" width="100%" fontsize="25%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
+            <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="30%" color="{clrWhite}" text="{title}" />
+            <drawtextbox name="shorttext" x="0" y="50%" width="100%" font="{light}" fontsize="20%" color="{clrWhite}" text="{shorttext}" />
+            <drawtextbox x="0" y="{posy(shorttext)} + {height(shorttext)} - {areaheight}*0.15" width="100%" font="{light}" fontsize="20%" color="{clrWhite}" text="{description}" />
+        </areascroll>
+        <area condition="{isdummy}" x="1%" y="1%" width="68%" height="19%" layer="2">
+            <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="35%" color="{clrWhite}" text="{title}" />
+        </area>
+    </viewelement>
+
+    <viewelement name="header_ver">
         <areascroll condition="not{isdummy}++not{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="1%" y="1%" width="68%" height="19%" layer="2">
             <drawtext x="0" y="0" font="{semibold}" width="100%" fontsize="25%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
             <drawtext x="0" y="20%" font="{semibold}" width="100%" fontsize="30%" color="{clrWhite}" text="{title}" />
@@ -96,7 +117,7 @@
     {yellow}                  label of yellow button
     {blue}                    label of blue button
     -->
-    <viewelement name="footer">
+    <viewelement name="footer_hor">
         <area x="0" y="92%" width="25%" height="8%" layer="2">
             <drawtext condition="{red1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
             <drawrectangle condition="{red1}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
@@ -139,6 +160,48 @@
         </area>    
     </viewelement>
 
+    <viewelement name="footer_ver">
+        <area x="0" y="92%" width="25%" height="8%" layer="2">
+            <drawtext condition="{red1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
+            <drawrectangle condition="{red1}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
+            <drawtext condition="{green1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
+            <drawrectangle condition="{green1}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
+            <drawtext condition="{yellow1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
+            <drawrectangle condition="{yellow1}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
+            <drawtext condition="{blue1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
+            <drawrectangle condition="{blue1}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
+        </area>
+        <area x="25%" y="92%" width="25%" height="8%" layer="2">
+            <drawtext condition="{red2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
+            <drawrectangle condition="{red2}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
+            <drawtext condition="{green2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
+            <drawrectangle condition="{green2}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
+            <drawtext condition="{yellow2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
+            <drawrectangle condition="{yellow2}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
+            <drawtext condition="{blue2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
+            <drawrectangle condition="{blue2}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
+        </area>
+        <area x="50%" y="92%" width="25%" height="8%" layer="2">
+            <drawtext condition="{red3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
+            <drawrectangle condition="{red3}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
+            <drawtext condition="{green3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
+            <drawrectangle condition="{green3}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
+            <drawtext condition="{yellow3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
+            <drawrectangle condition="{yellow3}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
+            <drawtext condition="{blue3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
+            <drawrectangle condition="{blue3}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
+        </area>
+        <area x="75%" y="92%" width="25%" height="8%" layer="2">
+            <drawtext condition="{red4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
+            <drawrectangle condition="{red4}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
+            <drawtext condition="{green4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
+            <drawrectangle condition="{green4}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
+            <drawtext condition="{yellow4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
+            <drawrectangle condition="{yellow4}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
+            <drawtext condition="{blue4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
+            <drawrectangle condition="{blue4}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
+        </area>    
+    </viewelement>
     <!-- Available Variables time:
     {time}                   timestring in hh:mm
     {sec}                    current seconds
@@ -154,7 +217,7 @@
     {monthnameshort}         3 letter abbrivation of month name
     {year}                   year in yyyy
     -->
-    <viewelement name="time">
+    <viewelement name="time_hor">
        <area x="70%" y="0" width="{areawidth}*0.145" height="12%" layer="2">
             <drawtext align="right" y="5%" font="{light}" fontsize="45%" color="{clrWhite}" text="{dayname}" />
             <drawtext align="right" y="45%" font="{light}" fontsize="45%" color="{clrWhite}" text="{day}. {monthnameshort}" />
@@ -164,6 +227,16 @@
         </area>
     </viewelement>
 
+    <viewelement name="time_ver">
+       <area x="70%" y="0" width="{areawidth}*0.145" height="12%" layer="2">
+            <drawtext align="right" y="5%" font="{light}" fontsize="45%" color="{clrWhite}" text="{dayname}" />
+            <drawtext align="right" y="45%" font="{light}" fontsize="45%" color="{clrWhite}" text="{day}. {monthnameshort}" />
+        </area>
+        <area x="85%" y="0" width="15%" height="12%" layer="2">
+            <drawtext align="center" valign="center" font="{light}" fontsize="75%" color="{clrWhite}" text="{time}" />
+        </area>
+    </viewelement>
+    
     <!-- Tokens available in datetimeline
     {weekday}                weekday of current display
     {date}                   date of current display
diff --git a/skins/nopacity/xmlfiles/plug-tvguideng-root.xml b/skins/nopacity/xmlfiles/plug-tvguideng-root.xml
index b071037..5ea027e 100644
--- a/skins/nopacity/xmlfiles/plug-tvguideng-root.xml
+++ b/skins/nopacity/xmlfiles/plug-tvguideng-root.xml
@@ -63,7 +63,28 @@
     {posterheight}            height of scraped poster
     {posterpath}              absolute path of scraped poster
     -->
-    <viewelement name="header">
+    <viewelement name="header_hor">
+        <areascroll condition="not{isdummy}++not{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="1%" y="1%" width="71%" height="18%" layer="2">
+            <drawtext x="0" y="0" font="{vdrOsd}" width="100%" fontsize="20%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
+            <drawtext x="0" y="20%" font="{vdrOsd}" width="100%" fontsize="25%" color="{clrWhite}" text="{title}" />
+            <drawtextbox name="shorttext" x="0" y="45%" width="100%" font="{vdrOsd}" fontsize="15%" color="{clrWhite}" text="{shorttext}" />
+            <drawtextbox x="0" y="{posy(shorttext)} + {height(shorttext)}" width="100%" font="{vdrOsd}" fontsize="15%" color="{clrWhite}" text="{description}" />
+        </areascroll>
+        <area condition="not{isdummy}++{hasposter}" x="1%" y="1%" width="{areaheight}*0.18*{posterwidth}/{posterheight}" height="18%" layer="2">
+            <drawimage imagetype="image" path="{posterpath}" x="0" y="0" width="100%" height="100%"/>
+        </area>
+        <areascroll condition="not{isdummy}++{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="12%" y="1%" width="60%" height="18%" layer="2">
+            <drawtext x="0" y="0" font="{vdrOsd}" width="100%" fontsize="20%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
+            <drawtext x="0" y="20%" font="{vdrOsd}" width="100%" fontsize="25%" color="{clrWhite}" text="{title}" />
+            <drawtextbox name="shorttext" x="0" y="45%" width="100%" font="{vdrOsd}" fontsize="15%" color="{clrWhite}" text="{shorttext}" />
+            <drawtextbox x="0" y="{posy(shorttext)} + {height(shorttext)}" width="100%" font="{vdrOsd}" fontsize="15%" color="{clrWhite}" text="{description}" />
+        </areascroll>
+        <area condition="{isdummy}" x="1%" y="1%" width="58%" height="18%" layer="2">
+            <drawtext x="0" y="20%" font="{vdrOsd}" width="100%" fontsize="35%" color="{clrWhite}" text="{title}" />
+        </area>
+    </viewelement>
+
+    <viewelement name="header_ver">
         <areascroll condition="not{isdummy}++not{hasposter}" orientation="vertical" mode="forthandback" delay="1000" scrollspeed="medium" x="1%" y="1%" width="71%" height="18%" layer="2">
             <drawtext x="0" y="0" font="{vdrOsd}" width="100%" fontsize="20%" color="{clrWhite}" text="{day} {daynumeric}.{month} {start} - {stop}" />
             <drawtext x="0" y="20%" font="{vdrOsd}" width="100%" fontsize="25%" color="{clrWhite}" text="{title}" />
@@ -106,7 +127,7 @@
     {yellow}                  label of yellow button
     {blue}                    label of blue button
     -->
-    <viewelement name="footer">
+    <viewelement name="footer_hor">
         <area condition="{red1}" x="0" y="90%" width="25%" height="10%" layer="2">
             <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="40%"/>
             <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{red}" />
@@ -176,6 +197,75 @@
         </area>
     </viewelement>
 
+   <viewelement name="footer_ver">
+        <area condition="{red1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue1}" x="0" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{blue}" />
+        </area>
+
+        <area condition="{red2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue2}" x="25%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{blue}" />
+        </area>
+        
+        <area condition="{red3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue3}" x="50%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{blue}" />
+        </area>
+        
+        <area condition="{red4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonred" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{red}" />
+        </area>
+        <area condition="{green4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttongreen" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{green}" />
+        </area>
+        <area condition="{yellow4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonyellow" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{yellow}" />
+        </area>
+        <area condition="{blue4}" x="75%" y="90%" width="25%" height="10%" layer="2">
+            <drawimage imagetype="skinpart" path="buttonblue" align="center" valign="center" width="90%" height="40%"/>
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="35%" color="{clrWhite}" text="{blue}" />
+        </area>
+    </viewelement>
     <!-- Available Variables time:
     {time}                   timestring in hh:mm
     {sec}                    current seconds
@@ -191,12 +281,18 @@
     {monthnameshort}         3 letter abbrivation of month name
     {year}                   year in yyyy
     -->
-    <viewelement name="time">
+    <viewelement name="time_hor">
         <area x="72%" y="1%" width="7%" height="5%" layer="3">
             <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="75%" color="{clrWhite}" text="{time}" />
         </area>
     </viewelement>
 
+    <viewelement name="time_ver">
+        <area x="72%" y="1%" width="7%" height="5%" layer="3">
+            <drawtext align="center" valign="center" font="{vdrOsd}" fontsize="75%" color="{clrWhite}" text="{time}" />
+        </area>
+    </viewelement>
+    
     <!-- Tokens available in datetimeline
     {weekday}                weekday of current display
     {date}                   date of current display