Updated template partially according to discussion with LH and MK

slt/css/desktop.css

@@ -1,121 +1,83 @@
-body {
-  background-color: #ebebeb;
-  overflow: scroll;
-  padding: 0px;
-}
 
-#topmenu a {
+/*
-  color: inherit;
+Structure of page
-}
+*/
 
 #topmenu-div {
   width: 100vw;
 }
 
-
+#topmenu
-#topmenu {
+{
-  background-color: black;
-  color: white;
-  font-weight: bold;
-  text-align: center;
   position: fixed;
   display: block;
   width: 100vw;
-  z-index: 5000;
 }
 
-#topmenu > .nav {
+#topmenu > .nav 
+{
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;
-  padding: 0px;
-  margin: 0px;
   position: relative;
   align-items: center;
-  min-height: 40px;
 }
 
-#topmenu > .nav > li {
+#topmenu > .nav > li 
+{
   display: inline-block;
-  text-align: left;
 }
 
-#topmenu .nav > li > a {
+#topmenu .nav > li > a 
-  font-size: x-large;
+{
-  padding: 10px;
   position: relative;
-  z-index: 3001;
-}
-
-#topmenu .nav > li > a,
-#topmenu .nav > li:hover > a {
-	background-color: inherit;
-} 
-
-#topmenu > .nav > li:hover {
-  background-color: white;
-  color: black;
 }
 
 #topmenu > .nav > li > .nav-child {
   position: absolute;
   display: none;
-  z-index: 3000;
-  background-color: white;
-  margin: 0px 20px 10px 0px;
-  border: none;
-  padding: 0px;
 }
 
 #topmenu > .nav > li:hover > .nav-child {
   display: block;
-  box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
 }
 
 #topmenu > .nav > li > .nav-child > li > a {
   display: block;
-  padding: 10px;
 }
 
-#topmenu > .nav > li > .nav-child > li:hover > a {
+#page-div
-  background-color: gray;
+{
-}
+	display: flex;
-
+	flex-flow: row;
-#topmenu > .nav > li > .nav-child > li:hover > a:hover {
-	text-decoration: none;
-}
-
-#page {
-  padding-top: 35px;
-  max-width: 1200px;
 	width: 100%;
-  background-color: white;
+	min-height: 100vh;
 }
 
-/*
+#left_side, #right_side
- * Header line positioning
+{
- */
+	flex: 1 0 auto;
+}
+
+#page 
+{
+	flex: 0 0 auto;
+}
 
 #header {
     justify-content: space-around;
 }
 
-
 #slideshow {
   display: inline-block;
 }
 
-/*
- * Content positioning
- */
-
 #content {
   display: flex;
 }
 
 #left_menu {
   flex: 1 1 20%;
-  margin: 15px 0px 15px 5px;
   display: block;
 }
 
@@ -123,11 +85,6 @@ body {
 	display: block;
 }
 
-.nav a:hover {
-	background-color: #eeeeee;
-	text-decoration: none;
-}
-
 #main_column {
   flex: 1 1 60%;
   display: flex;
@@ -144,18 +101,155 @@ body {
 
 #right_column {
   flex: 1 1 15%;
-  margin: 15px 5px 15px 0px;
   display: block;
 }
 
-/*
- * Footer positioning
- */
-
 #mobile_menu {
   display: none;
 }
 
+
+
+
+/*
+Form of page (paddings, margins, ...)
+*/
+
+body
+{
+  overflow: scroll;
+  padding: 0px;	
+}
+
+#topmenu {
+  z-index: 5000;
+}
+
+#topmenu > .nav {
+  padding: 0px;
+  margin: 0px;
+  min-height: 40px;
+}
+
+#topmenu .nav > li > a {
+  font-size: large;
+  padding: 10px;
+  z-index: 3001;
+}
+
+#topmenu > .nav > li > .nav-child {
+  z-index: 3000;
+  margin: 0px 20px 10px 0px;
+  border: none;
+  padding: 0px;
+}
+
+#topmenu > .nav > li:hover > .nav-child {
+  box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
+}
+
+#topmenu > .nav > li > .nav-child > li > a {
+  padding: 10px;
+}
+
+#left_side, #right_side
+{
+	padding-top: 35px;
+}
+
+#page {
+  padding-top: 35px;
+  width: 1000px;
+}
+
+#left_menu {
+  margin: 15px 0px 15px 5px;
+}
+
+#right_column {
+  margin: 15px 5px 15px 0px;
+}
+
+
+
+
+
+/*
+Additional content
+*/
+
+body {
+  background-color: var(--bgcolorside);
+}
+
+#topmenu a {
+  color: inherit;
+}
+
+#topmenu {
+  background-color: var(--bgcolor1);
+  color: var(--fgcolor1);
+  font-weight: bold;
+  text-align: center;
+}
+
+#topmenu > .nav > li {
+  text-align: left;
+}
+
+#topmenu .nav > li > a {
+  font-size: large;
+}
+
+#topmenu .nav > li > a,
+#topmenu .nav > li:hover > a {
+	background-color: inherit;
+} 
+
+#topmenu > .nav > li:hover {
+  background-color: var(--bgcolor3);
+  color: var(--fgcolor3);
+}
+
+#topmenu > .nav > li > .nav-child {
+  background-color: var(--bgcolor3);
+  color: var(--fgcolor3);
+}
+
+#topmenu > .nav > li > .nav-child > li:hover > a {
+  background-color: var(--bgcolor2);
+  color: var(--fgcolor2);
+}
+
+#topmenu > .nav > li > .nav-child > li:hover > a:hover {
+	text-decoration: none;
+}
+
+.nav a:hover {
+	background-color: #eeeeee;
+	text-decoration: none;
+}
+
+#left_side
+{
+	background-image: var(--imgleft);
+}
+
+#right_side
+{
+	background-image: var(--imgright);
+}
+
+#left_side, #right_side
+{
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+
+
+
+
 /*
  * Debug
  */

slt/css/visual.css

@@ -1,3 +1,7 @@
+body {
+	font-size: 12px;
+}
+
 a {
   text-decoration: none;
 }
@@ -29,3 +33,24 @@ h2 > a {
 li.row-fluid {
 	display: block;
 }
+
+#page {
+	background-color: var(--bgcolor4);
+	color: var(--fgcolor4);
+}
+
+#left_menu > ul.menu {
+	background-color: var(--bgcolor3);
+	color: var(--fgcolor3);
+}
+
+#left_menu > ul.menu li.active > a {
+	background-color: var(--bgcolor2);
+	color: var(--fgcolor2);
+}
+
+#left_menu > ul.menu li.current > a
+{
+	background-color: var(--bgcolor1);
+	color: var(--fgcolor1);
+}

slt/index.php

@@ -31,8 +31,29 @@ if($this->params{'titlepage'} === '1')
 <?php 
 }
 ?>
+
+:root {
+	--bgcolor1: <?php echo $this->params{'bgcolor1'}; ?>;
+	--bgcolor2: <?php echo $this->params{'bgcolor2'}; ?>;
+	--bgcolor3: <?php echo $this->params{'bgcolor3'}; ?>;
+	--bgcolor4: <?php echo $this->params{'bgcolor4'}; ?>;
+	--fgcolor1: <?php echo $this->params{'fgcolor1'}; ?>;
+	--fgcolor2: <?php echo $this->params{'fgcolor2'}; ?>;
+	--fgcolor3: <?php echo $this->params{'fgcolor3'}; ?>;
+	--fgcolor4: <?php echo $this->params{'fgcolor4'}; ?>;
+	--bgcolorside: <?php echo $this->params{'bgcolorside'}; ?>;
+	--imgleft: <?php echo (empty($this->params{'imgleft'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgleft'} . "\")") ; ?>;
+	--imgright: <?php echo (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgright'} . "\")") ; ?>;
+}
+
 </style>
-<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
+
+<!--
+<?php
+//print_r($this->params); 
+?>
+-->
+
 </head>
 <body>
 
@@ -42,7 +63,9 @@ if($this->params{'titlepage'} === '1')
   </div> <!-- #topmenu -->
 </div> <!-- #topmenu-div -->
 
-<div id='page'>
+<div id='page-div'>
+	<div id='left_side'></div>
+	<div id='page'>
 	
 		<div id='header'>
 			<div id='slideshow'>
@@ -75,7 +98,9 @@ if($this->params{'titlepage'} === '1')
 			<jdoc:include type="modules" style="none" name="footer" />
 		</div> <!-- #footer -->
 		
-</div> <!-- #page -->
+	</div> <!-- #page -->
+	<div id='right_side'></div>
+</div> <!-- #page-div -->
 
 </body>
 </html>

slt/templateDetails.xml

@@ -73,28 +73,23 @@
   <config>
     <fields name="params">
       <fieldset name="advanced">
-      	<!--<field name="mylistvalue" type="list" default="1" label="Select an option" description="">
-			<option value="0">Option 1</option>
-			<option value="1">Option 2</option>
-		</field>-->
 		<field name="titlepage" type="list" default="0" label="Switch to titlepage mode" description="">
 			<option value="0">No</option>
 			<option value="1">Yes</option>
 		</field>
-      <!--<field name="unser_header_bild"
+      </fieldset>
-                    type="media"
+      <fieldset name='colors'>
-                    default=""
+		<field name="fgcolor1" type='color' default='#fff' label='Foreground Color 1'></field>
-                    label="Label"
+		<field name="bgcolor1" type='color' default='#080' label='Background Color 1'></field>
-                    description="Description"
+		<field name="fgcolor2" type='color' default='#000' label='Foreground Color 2'></field>
-                    filter="string"
+		<field name="bgcolor2" type='color' default='#4f4' label='Background Color 2'></field>
-                    />-->
+		<field name="fgcolor3" type='color' default='#000' label='Foreground Color 3'></field>
-      <!--<field name="unser_header_bild"
+		<field name="bgcolor3" type='color' default='#8f8' label='Background Color 3'></field>
-                    type="media"
+		<field name="fgcolor4" type='color' default='#000' label='Foreground Color 4'></field>
-                    default=""
+		<field name="bgcolor4" type='color' default='#cfc' label='Background Color 4'></field>
-                    label="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL"
+		<field name="bgcolorside" type='color' default='#ebebeb' label='Background Color at the Sides'></field>
-                    description="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC"
+		<field name="imgleft" type='media' directory='' label='Left background image'></field>
-                    filter="string"
+		<field name="imgright" type='media' directory='' label='Left background image'></field>
-                    />-->
       </fieldset>
     </fields>
   </config>