From 5c29c305d9e74cb5da216c5bf2c265576b30a24a Mon Sep 17 00:00:00 2001
From: Christian Wolf <c.wolf@lsr.uni-saarland.de>
Date: Fri, 27 Oct 2017 15:57:15 +0200
Subject: [PATCH] Updated template partially according to discussion with LH
 and MK

---
 slt/css/desktop.css     | 236 ++++++++++++++++++++++++++++------------
 slt/css/visual.css      |  25 +++++
 slt/index.php           |  91 ++++++++++------
 slt/templateDetails.xml |  31 +++---
 4 files changed, 261 insertions(+), 122 deletions(-)

diff --git a/slt/css/desktop.css b/slt/css/desktop.css
index 8858156..8b2e3ea 100644
--- a/slt/css/desktop.css
+++ b/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 {
-  background-color: black;
-  color: white;
-  font-weight: bold;
-  text-align: center;
+#topmenu
+{
   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 {
-  font-size: x-large;
-  padding: 10px;
+#topmenu .nav > li > a 
+{
   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 {
-  background-color: gray;
+#page-div
+{
+	display: flex;
+	flex-flow: row;
+	width: 100%;
+	min-height: 100vh;
 }
 
-#topmenu > .nav > li > .nav-child > li:hover > a:hover {
-	text-decoration: none;
+#left_side, #right_side
+{
+	flex: 1 0 auto;
 }
 
-#page {
-  padding-top: 35px;
-  max-width: 1200px;
-  width: 100%;
-  background-color: white;
+#page 
+{
+	flex: 0 0 auto;
 }
 
-/*
- * Header line positioning
- */
-
 #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
  */
diff --git a/slt/css/visual.css b/slt/css/visual.css
index c74a32b..a355274 100644
--- a/slt/css/visual.css
+++ b/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);
+}
diff --git a/slt/index.php b/slt/index.php
index 390a648..10435c5 100644
--- a/slt/index.php
+++ b/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,40 +63,44 @@ if($this->params{'titlepage'} === '1')
   </div> <!-- #topmenu -->
 </div> <!-- #topmenu-div -->
 
-<div id='page'>
-
-	<div id='header'>
-		<div id='slideshow'>
-			<jdoc:include type="modules" style="none" name="slideshow" />
-		</div> <!-- #slideshow -->
-	</div> <!-- #header -->
+<div id='page-div'>
+	<div id='left_side'></div>
+	<div id='page'>
 	
-	<div id='mobile_menu'>
-		<jdoc:include type="modules" style="none" name="mobile_menu" />
-	</div>
-
-	<div id='content'>
-		<div id='left_menu'>
-			<jdoc:include type="modules" style="none" name="left_menu" />
-		</div> <!-- #left_menu -->
-		<div id='main_column'>
-			<div id='main_content'>
-				<jdoc:include type="component" style="none" />
-			</div>
-			<div id='footline'>
-				<jdoc:include type="modules" style="none" name="footline" />
-			</div> <!-- #footline -->
-		</div><!-- main_column -->
-		<div id='right_column'>
-			<jdoc:include type="modules" style="none" name="right_column" />
-		</div><!-- #right_column -->
-	</div> <!-- #content -->
-
-	<div id='footer'>
-		<jdoc:include type="modules" style="none" name="footer" />
-	</div> <!-- #footer -->
+		<div id='header'>
+			<div id='slideshow'>
+				<jdoc:include type="modules" style="none" name="slideshow" />
+			</div> <!-- #slideshow -->
+		</div> <!-- #header -->
+		
+		<div id='mobile_menu'>
+			<jdoc:include type="modules" style="none" name="mobile_menu" />
+		</div>
 	
-</div> <!-- #page -->
+		<div id='content'>
+			<div id='left_menu'>
+				<jdoc:include type="modules" style="none" name="left_menu" />
+			</div> <!-- #left_menu -->
+			<div id='main_column'>
+				<div id='main_content'>
+					<jdoc:include type="component" style="none" />
+				</div>
+				<div id='footline'>
+					<jdoc:include type="modules" style="none" name="footline" />
+				</div> <!-- #footline -->
+			</div><!-- main_column -->
+			<div id='right_column'>
+				<jdoc:include type="modules" style="none" name="right_column" />
+			</div><!-- #right_column -->
+		</div> <!-- #content -->
+	
+		<div id='footer'>
+			<jdoc:include type="modules" style="none" name="footer" />
+		</div> <!-- #footer -->
+		
+	</div> <!-- #page -->
+	<div id='right_side'></div>
+</div> <!-- #page-div -->
 
 </body>
 </html>
diff --git a/slt/templateDetails.xml b/slt/templateDetails.xml
index 4f4d002..746e35d 100644
--- a/slt/templateDetails.xml
+++ b/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"
-                    type="media"
-                    default=""
-                    label="Label"
-                    description="Description"
-                    filter="string"
-                    />-->
-      <!--<field name="unser_header_bild"
-                    type="media"
-                    default=""
-                    label="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL"
-                    description="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC"
-                    filter="string"
-                    />-->
+      </fieldset>
+      <fieldset name='colors'>
+		<field name="fgcolor1" type='color' default='#fff' label='Foreground Color 1'></field>
+		<field name="bgcolor1" type='color' default='#080' label='Background Color 1'></field>
+		<field name="fgcolor2" type='color' default='#000' label='Foreground Color 2'></field>
+		<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="bgcolor3" type='color' default='#8f8' label='Background Color 3'></field>
+		<field name="fgcolor4" type='color' default='#000' label='Foreground Color 4'></field>
+		<field name="bgcolor4" type='color' default='#cfc' label='Background Color 4'></field>
+		<field name="bgcolorside" type='color' default='#ebebeb' label='Background Color at the Sides'></field>
+		<field name="imgleft" type='media' directory='' label='Left background image'></field>
+		<field name="imgright" type='media' directory='' label='Left background image'></field>
       </fieldset>
     </fields>
   </config>