Merge branch 'fix/mobile-menu-colors'

First approach to fix #702 in the temaplte by reducing complexity

.buildpath

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<buildpath>
-	<buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/>
-	<buildpathentry kind="src" path=""/>
-</buildpath>

.project

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>template</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.wst.common.project.facet.core.builder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
-			<name>org.eclipse.wst.validation.validationbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
-			<name>org.eclipse.dltk.core.scriptbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.php.core.PHPNature</nature>
-		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
-	</natures>
-</projectDescription>

.settings/org.eclipse.php.core.prefs

@@ -1,2 +0,0 @@
-eclipse.preferences.version=1
-include_path=0;/template

.settings/org.eclipse.wst.common.project.facet.core.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<faceted-project>
-  <fixed facet="php.component"/>
-  <fixed facet="php.core.component"/>
-  <installed facet="php.core.component" version="1"/>
-  <installed facet="php.component" version="5.6"/>
-</faceted-project>

res/templateDetails.tmpl.xml

@@ -50,39 +50,51 @@
   <config>
     <fields name="params">
       <fieldset name="advanced">
-		<field name="titlepage" type="list" default="0" label="Switch to titlepage mode" description="">
+        <field name="titlepage" type="list" default="0" label="Switch to titlepage mode" description="">
-			<option value="0">No</option>
+          <option value="0">No</option>
-			<option value="1">Yes</option>
+          <option value="1">Yes</option>
-		</field>
+        </field>
       </fieldset>
       <fieldset name='TPL_SLT_COLORS_TOPMENU'>
       	<field name="topfgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_TOP'></field>
-		<field name="topbgcolor1" type='color' default='#000' label='TPL_SLT_BACKGROUND_COLOR_TOP'></field>
+        <field name="topbgcolor1" type='color' default='#000' label='TPL_SLT_BACKGROUND_COLOR_TOP'></field>
-		<field name="topfgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_TOP_DARK'></field>
+        <field name="topfgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_TOP_DARK'></field>
-		<field name="topbgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_TOP_DARK'></field>
+        <field name="topbgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_TOP_DARK'></field>
-		<field name="topfgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_TOP_LIGHT'></field>
+        <field name="topfgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_TOP_LIGHT'></field>
-		<field name="topbgcolor3" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_TOP_LIGHT'></field>
+        <field name="topbgcolor3" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_TOP_LIGHT'></field>
       </fieldset>
       <fieldset name='TPL_SLT_COLORS_MAIN'>
-		<!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
+        <field type="spacer" name="menu-colors" label="Top-menu colors" />
-		<field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
+        <!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
-		<field name="mainlicolor" type='color' default='#222' label='TPL_SLT_LINK_COLOR_MAIN'></field>
+        <field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
-		<field name="mainbgcolortop" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_MAIN_TOP'></field>
+        <field name="mainlicolor" type='color' default='#222' label='TPL_SLT_LINK_COLOR_MAIN'></field>
-		<field name="mainbgcolorbot" type='color' default='#fff' label='TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM'></field>
+        <field name="mainbgcolortop" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_MAIN_TOP'></field>
+        <field name="mainbgcolorbot" type='color' default='#fff' label='TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM'></field>
         
-		<field name="fgcolor1" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_1'></field>
+        <field type="spacer" name="menu-colors" label="Menu colors" />
-		<field name="licolor1" type='color' default='#222' label='TPL_SLT_LINK_COLOR_1'></field>
+        <field name="fgcolor1" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_1'></field>
-		<field name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
+        <field name="licolor1" type='color' default='#222' label='TPL_SLT_LINK_COLOR_1'></field>
-		<field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
+        <field name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
-		<field name="licolor2" type='color' default='#222' label='TPL_SLT_LINK_COLOR_2'></field>
+        <field type="spacer" name="spacer1" hr="true" />
-		<field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
+        <field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
-		<field name="fgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_3'></field>
+        <field name="licolor2" type='color' default='#222' label='TPL_SLT_LINK_COLOR_2'></field>
-		<field name="licolor3" type='color' default='#222' label='TPL_SLT_LINK_COLOR_3'></field>
+        <field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
-		<field name="bgcolor3" type='color' default='#888' label='TPL_SLT_BACKGROUND_COLOR_3' format='rgba'></field>
+        <field type="spacer" name="spacer2" hr="true" />
+        <field name="fgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_3'></field>
+        <field name="licolor3" type='color' default='#222' label='TPL_SLT_LINK_COLOR_3'></field>
+        <field name="bgcolor3" type='color' default='#888' label='TPL_SLT_BACKGROUND_COLOR_3' format='rgba'></field>
         
-		<field name="bgcolorside" type='color' default='#ebebeb' label='TPL_SLT_BACKGROUND_COLOR_AT_SIDES'></field>
+        <field type="spacer" name="effect-colors" label="Effect coloring" />
-		<field name="imgleft" type='media' directory='' label='TPL_SLT_LEFT_BACKGROUND_IMAGE'></field>
+        <field name="fgeffect" type="color" default="#000" label="TPL_SLT_FOREGROUND_EFFECT_COLOR"></field>
-		<field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field>
+        <field name="bgeffect" type="color" default="#eee" label="TPL_SLT_BACKGROUND_EFFECT_COLOR"></field>
+        <field type="spacer" name="spacer3" hr="true" />
+        <field name="fgeffecthdr" type="color" default="#000" label="TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR"></field>
+        <field name="bgeffecthdr" type="color" default="#ccc" label="TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR"></field>
+
+        <field type="spacer" name="side-images" label="Side configuration" />
+        <field name="bgcolorside" type='color' default='#ebebeb' label='TPL_SLT_BACKGROUND_COLOR_AT_SIDES'></field>
+        <field name="imgleft" type='media' directory='' label='TPL_SLT_LEFT_BACKGROUND_IMAGE'></field>
+        <field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field>
       </fieldset>
     </fields>
   </config>

slt.xml

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<updates>
-	<update>
-		<name>Joomla Template</name>
-		<description>Template for the SLT for the Joomla! CMS</description>
-		<element>slt</element>
-		<type>template</type>
-		<version>0.0.1</version>
-	<!-- 	<infourl title="Joomla!">http://www.joomla.org/</infourl> -->
-		<downloads>
-			<downloadurl type="full" format="tar">http://localhost/slt-update/slt1.tar</downloadurl>
-		</downloads>
-		<!--<tags>
-			<tag>stable</tag>
-		</tags>-->
-		<maintainer>Christian Wolf</maintainer>
-	<!-- 	<maintainerurl>http://sammoffatt.com.au</maintainerurl> -->
-	<!-- 	<section>Testing</section> -->
-	<!-- 	<targetplatform name="joomla" version="1.6"/> -->
-	</update>
-</updates>

slt/.stylelintrc.json

@@ -6,6 +6,8 @@
     ],
     "rules": {
         "indentation": 4,
-        "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$"
+        "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$",
+        "string-quotes": "single",
+        "declaration-colon-newline-after": null
     }
   }

slt/css/components/_index.scss

@@ -6,3 +6,4 @@
 @use 'verbandstag';
 @use 'vereine';
 @use 'contact-list';
+@use 'read-more';

slt/css/components/_read-more.scss

@@ -0,0 +1,9 @@
+.readmore > .btn {
+    color: var(--color-menu, #000);
+    background-color: var(--color-menu-background, #eee);
+
+    &:hover {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+}

slt/css/core/_core.scss

@@ -6,6 +6,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    background-color: var(--color-side-background, #fff);
 
     /*    padding: 0px 20px 10px 20px; */
     padding: 0;
@@ -23,6 +24,13 @@ a {
     text-decoration: none;
 }
 
+a,
+a:hover,
+a:active,
+a:visited {
+    color: var(--color-main-link, #000);
+}
+
 p {
     text-align: justify;
     hyphens: auto;

slt/css/core/_default-classes.scss

@@ -21,10 +21,35 @@ li.row-fluid {
     padding-bottom: 0;
 }
 
-.row-striped .row-fluid:nth-child(n),
+// .row-striped .row-fluid:nth-child(n),
-.list-striped li:nth-child(n),
+// .list-striped li:nth-child(n),
-.table-striped tbody > tr:nth-child(n) > td {
+// .table-striped tbody > tr:nth-child(n) > td {
-    background-color: initial;
+//     background-color: initial;
+// }
+
+.table-striped {
+    > thead > tr {
+        color: var(--color-effect-header, #000);
+        background-color: var(--color-effect-background-header, #aaa);
+    }
+}
+
+.list-striped li:nth-child(odd),
+.row-striped .row-fluid:nth-child(odd),
+.table-striped > tbody > tr:nth-child(odd) {
+    color: var(--color-effect, #000);
+    background-color: var(--color-effect-background, #ccc);
+}
+
+.list-striped li:hover,
+.row-striped .row-fluid:hover,
+.table-striped > tbody > tr:hover {
+    color: var(--color-effect-header, #000);
+    background-color: var(--color-effect-background-header, #aaa);
+}
+
+.table-hover > tbody > tr:hover > * {
+    color: unset;
 }
 
 .well {

slt/css/dynamic-styles.css.php

@@ -25,165 +25,53 @@ header("Cache-Control: must-revalidate, max-age=$offset, public");
 
 $leftImageValue = empty($params['imgleft'])
     ? 'none'
-    : "url(\"" . JPATH_BASE . '/' . $params['imgleft'] . "\")";
+    : "url(\"" . JPATH_BASE . $params['imgleft'] . "\")";
 $rightImageValue = empty($params['imgright'])
     ? 'none'
-    : "url(\"" . JPATH_BASE . '/' . $params['imgright'] . "\")";
+    : "url(\"" . JPATH_BASE . $params['imgright'] . "\")";
 ?>
 
-<?php if ($params['titlepage'] === '1') { ?>
+<?php if ($params['titlepage'] === '1') {
-#left-menu
+    echo "#left-menu { display: none; }\n";
-{
+} ?>
-	display: none;
-}
-<?php } ?>
 
-body
+:root {
-{
+	--color-fg-top: <?php echo $params['topfgcolor1']; ?>;
-	background-color: <?php echo $params['bgcolorside']; ?>;
+	--color-bg-top: <?php echo $params['topbgcolor1']; ?>;
+	--color-fg-top-dark: <?php echo $params['topfgcolor2']; ?>;
+	--color-bg-top-dark: <?php echo $params['topbgcolor2']; ?>;
+	--color-fg-top-light: <?php echo $params['topfgcolor3']; ?>;
+	--color-bg-top-light: <?php echo $params['topbgcolor3']; ?>;
+
+	--color-main: <?php echo $params['mainfgcolor']; ?>;
+	--color-main-link: <?php echo $params['mainlicolor']; ?>;
+
+	--color-page-bg-top: <?php echo $params['mainbgcolortop']; ?>;
+	--color-page-bg-bottom: <?php echo $params['mainbgcolorbot']; ?>;
+
+	--color-menu: <?php echo $params['fgcolor1']; ?>;
+	--color-menu-background: <?php echo $params['bgcolor1']; ?>;
+	--color-menu-active: <?php echo $params['fgcolor2']; ?>;
+	--color-menu-background-active: <?php echo $params['bgcolor2']; ?>;
+
+	--color-effect: <?php echo $params['fgeffect']; ?>;
+	--color-effect-background: <?php echo $params['bgeffect']; ?>;
+	--color-effect-header: <?php echo $params['fgeffecthdr']; ?>;
+	--color-effect-background-header: <?php echo $params['bgeffecthdr']; ?>;
+
+	
+	--color-side-background: <?php echo $params['bgcolorside']; ?>;
+	--image-left-side: <?php echo $leftImageValue; ?>;
+	--image-right-side: <?php echo $rightImageValue; ?>;
 }
 
-a, a:hover, a:active, a:visited
+<?php // Stop execution here, the rest is for debugging
-{
-	color: <?php echo $params['mainlicolor']; ?>;
-}
 
-#page-bg
+exit(); ?>
-{
-	background-image: linear-gradient(to bottom, <?php echo $params[
-     'mainbgcolortop'
- ] .
-     ',' .
-     $params['mainbgcolorbot']; ?>);
-	color: <?php echo $params['mainfgcolor']; ?>;
-}
 
-#mobile-menu li > a {
+:root {
-	background-color: <?php echo $params['bgcolor2']; ?>;
+	--color-effect: blue;
-    color: <?php echo $params['licolor2']; ?>;
+	--color-effect-background: red;
-}
+	--color-effect-header: yellow;
-
+	--color-effect-background-header: green;
-#mobile-menu li.current > a {
-	background-color: <?php echo $params['bgcolor3']; ?>;
-    color: <?php echo $params['licolor3']; ?>;
-}
-
-ul.mod-menu {
-	background-color: <?php echo $params['bgcolor1']; ?>;
-	color: <?php echo $params['fgcolor1']; ?>;
-}
-
-#mobile-menu {
-	background-color: <?php echo $params['bgcolor1']; ?>;
-	color: <?php echo $params['fgcolor1']; ?>;
-}
-
-ul.mod-menu li.current > a,
-ul.mod-menu li.current:hover > a
-{
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['licolor2']; ?>;
-}
-
-ul.nav > li > a:hover,
-ul.nav > li > a:focus,
-ul.mod-menu__sub > li > a:hover,
-ul.mod-menu__sub > li > a:focus
-{
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['licolor3']; ?>;
-}
-
-#topmenu,
-#topmenu > ul.mod-menu {
-  background-color: <?php echo $params['topbgcolor1']; ?>;
-  color: <?php echo $params['topfgcolor1']; ?>;
-}
-
-#topmenu .mod-menu__sub > li.current
-
-{
-  background-color: <?php echo $params['topbgcolor2']; ?>;
-  color: <?php echo $params['topfgcolor2']; ?>;
-}
-
-#topmenu .mod-menu__sub {
-  background-color: <?php echo $params['topbgcolor3']; ?>;
-  color: <?php echo $params['topfgcolor3']; ?>;
-}
-
-#topmenu .nav > li:hover,
-#topmenu .nav > li:focus,
-#topmenu .nav > li.active,
-#topmenu .mod-menu__sub > li:hover,
-#topmenu .mod-menu__sub > li:focus
-{
-  background-color: <?php echo $params['topbgcolor2']; ?>;
-  color: <?php echo $params['topfgcolor2']; ?>;
-}
-
-#left-side-image
-{
-	background-image: <?php echo $leftImageValue; ?>;
-}
-
-#right-side-image
-{
-	background-image: <?php echo $rightImageValue; ?>;
-}
-
-.list-striped li:nth-child(odd),
-.row-striped .row-fluid:nth-child(odd),
-.table-striped > tbody > tr:nth-child(odd)
-{
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['fgcolor2']; ?>;
-}
-.row-striped .row-fluid:nth-child(odd) a,
-.table-striped > tbody > tr:nth-child(odd) a
-{
-	color: <?php echo $params['licolor2']; ?>;
-}
-.list-striped li:hover,
-.row-striped .row-fluid:hover,
-.table-striped > tbody > tr:hover
-{
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-.row-striped .row-fluid:hover a,
-.table-striped > tbody > tr:hover a
-{
-	color: <?php echo $params['licolor3']; ?>;
-}
-.table-striped > thead > tr
-{
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-
-table.alternating tr:nth-child(even) {
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['fgcolor2']; ?>;
-}
-table.alternating tr:nth-child(even) a
-{
-	color: <?php echo $params['licolor2']; ?>;
-}
-table.alternating tr:nth-child(1) {
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-table.alternating tr:nth-child(1) a {
-	color: <?php echo $params['licolor3']; ?>;
-}
-.readmore > .btn
-{
-	color: <?php echo $params['fgcolor1']; ?>;
-	background-color: <?php echo $params['bgcolor1']; ?>;
-}
-.readmore > .btn:hover
-{
-	color: <?php echo $params['fgcolor3']; ?>;
-	background-color: <?php echo $params['bgcolor3']; ?>;
 }

slt/css/layout/_alternating-table.scss

@@ -0,0 +1,19 @@
+.alternating {
+    tr:nth-child(even) {
+        color: var(--color-effect, #000);
+        background-color: var(--color-effect-background, #ccc);
+
+        a {
+            color: inherit;
+        }
+    }
+
+    tr:nth-child(1) {
+        color: var(--color-effect-header, #000);
+        background-color: var(--color-effect-background-header, #aaa);
+
+        a {
+            color: inherit;
+        }
+    }
+}

slt/css/layout/_index.scss

@@ -9,3 +9,4 @@
 @use 'main-content';
 @use 'blog';
 @use 'mobile-table';
+@use 'alternating-table';

slt/css/layout/_menu.scss

@@ -1,37 +1,47 @@
 @use '../abstract' as abstract;
 
-.nav {
-    font-size: inherit;
-
-    a {
-        color: inherit;
-    }
-}
-
-.mod-menu__sub {
-    font-size: small;
-
-    > li > a {
-        @include abstract.for-desktop {
-            display: block;
-        }
-    }
-}
-
 .nav,
 .mod-menu__sub {
     padding: 0;
 
     > li {
         display: block;
+    }
+}
 
-        > .mod-menu__sub {
+.nav {
-            padding-left: 10px;
+    font-size: inherit;
-            margin-left: 10px;
+    color: var(--color-menu, #000);
+    background-color: var(--color-menu-background, #eee);
 
-            /* border-left: solid gray 1px; */
+    a {
+        color: inherit;
+    }
 
-            /* TODO */
+    li.current > a {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+
+    li > a:hover,
+    li > a:focus {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+
+    .mod-menu__sub {
+        font-size: small;
+        padding-left: 10px;
+        margin-left: 10px;
+
+        /* border-left: solid gray 1px; */
+
+        /* TODO */
+
+        > li > a {
+            @include abstract.for-desktop {
+                display: block;
+            }
         }
     }
 }

slt/css/layout/_mobile-menu.scss

@@ -23,10 +23,31 @@
         padding-right: 0;
     }
 
-    li > a {
+    li {
-        margin: 5px 0;
+        > a {
-        padding: 10px;
+            margin: 5px 0;
-        display: block;
+            padding: 10px;
+            display: block;
+            color: var(--color-menu, #000);
+            background-color: var(--color-menu-background, #eee);
+        }
+
+        &.current > a {
+            color: var(--color-menu-active, #000);
+            background-color: var(--color-menu-background-active, #ccc);
+        }
+
+        margin-left: 5px;
+        margin-right: 5px;
+
+        ul {
+            border: none;
+        }
+
+        > ul.nav {
+            margin-left: -5px;
+            margin-right: -5px;
+        }
     }
 
     .nav {
@@ -41,20 +62,6 @@
         flex-direction: column;
     }
 
-    li {
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-
-    li > ul.nav {
-        margin-left: -5px;
-        margin-right: -5px;
-    }
-
-    li ul {
-        border: none;
-    }
-
     > ul.mod-menu {
         background-color: initial;
         color: initial;

slt/css/layout/_mobile-table.scss

@@ -16,8 +16,9 @@ table:not(.no-responsive-table) {
             border-style: none;
             border-bottom-style: solid;
             border-width: 1px;
+            border-color: var(--color-mobile-table-border, #000);
 
-            &:nth-child(2) {
+            &:nth-child(1) {
                 border-top-style: solid;
             }
 

slt/css/layout/_page-layout.scss

@@ -36,6 +36,11 @@
 
 #page-bg {
     display: none;
+    background-image: linear-gradient(
+        to bottom,
+        var(--color-page-bg-top, #eee),
+        var(--color-page-bg-bottom, #fff)
+    );
 
     @include abstract.for-desktop {
         display: block;

slt/css/layout/_side-images.scss

@@ -15,9 +15,11 @@
 
     #left-side-image {
         left: 0;
+        background-image: var(--image-left-side, none);
     }
 
     #right-side-image {
         right: 0;
+        background-image: var(--image-right-side, none);
     }
 }

slt/css/layout/_topmenu.scss

@@ -1,5 +1,17 @@
 @use '../abstract/' as abstract;
 
+#topmenu-div {
+    @include abstract.for-desktop {
+        position: sticky;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+    }
+
+    color: var(--color-fg-top, #fff);
+    background-color: var(--color-bg-top, #000);
+}
+
 #topmenu {
     display: none;
     font-weight: bold;
@@ -38,6 +50,8 @@
         flex-flow: row nowrap;
         justify-content: space-between;
         align-items: center;
+        color: var(--color-fg-top, #fff);
+        background-color: var(--color-bg-top, #000);
 
         @include abstract.for-desktop {
             padding: 0 10px;
@@ -70,6 +84,13 @@
                 background-color: inherit;
             }
 
+            &:hover,
+            &:focus,
+            &.active {
+                color: var(--color-fg-top-dark, #000);
+                background-color: var(--color-bg-top-dark, #aaa);
+            }
+
             > .mod-menu__sub {
                 position: absolute;
                 display: none;
@@ -80,6 +101,10 @@
                     padding: 0;
                 }
 
+                color: var(--color-fg-top-light, #000);
+                background-color: var(--color-bg-top-light, #ddd);
+                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+
                 > li {
                     @include abstract.for-desktop {
                         padding: 0 5px;
@@ -94,18 +119,26 @@
                         }
                     }
 
+                    &:hover,
+                    &:focus,
+                    &.active {
+                        color: var(--color-fg-top-dark, #000);
+                        background-color: var(--color-bg-top-dark, #aaa);
+                    }
+
                     &:hover > a {
                         text-decoration: none;
                     }
+
+                    &.current {
+                        color: var(--color-fg-top-dark, #000);
+                        background-color: var(--color-bg-top-dark, #aaa);
+                    }
                 }
             }
 
             &:hover > .mod-menu__sub {
                 display: block;
-
-                @include abstract.for-desktop {
-                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
-                }
             }
         }
     }
@@ -152,15 +185,6 @@
     }
 }
 
-#topmenu-div {
-    @include abstract.for-desktop {
-        position: sticky;
-        top: 0;
-        width: 100%;
-        z-index: 1;
-    }
-}
-
 a.facebook {
     img {
         display: none;

slt/css/style.scss

@@ -1,7 +1,7 @@
-@use "abstract";
+@use 'abstract';
-@use "core";
+@use 'core';
-@use "layout";
+@use 'layout';
-@use "components";
+@use 'components';
 
 /*
  * Debug

slt/language/en-GB/en-GB.tpl_slt.ini

@@ -12,16 +12,23 @@ TPL_SLT_FOREGROUND_COLOR_MAIN="Foreground color of main text"
 TPL_SLT_BACKGROUND_COLOR_MAIN_TOP="Background color at top of gradient"
 TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM="Background color at bottom of gradient"
 
-TPL_SLT_BACKGROUND_COLOR_1="Background color of menu"
-TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry"
-TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry"
 TPL_SLT_FOREGROUND_COLOR_1="Foreground color of menu"
 TPL_SLT_FOREGROUND_COLOR_2="Foreground color of selected menu entry"
 TPL_SLT_FOREGROUND_COLOR_3="Foreground color of active menu entry"
+
 TPL_SLT_LINK_COLOR_1="Foreground link color of menu"
 TPL_SLT_LINK_COLOR_2="Foreground link color of selected menu entry"
 TPL_SLT_LINK_COLOR_3="Foreground link color of active menu entry"
 
+TPL_SLT_BACKGROUND_COLOR_1="Background color of menu"
+TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry"
+TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry"
+
+TPL_SLT_FOREGROUND_EFFECT_COLOR="Foreground effect color"
+TPL_SLT_BACKGROUND_EFFECT_COLOR="Background effect color"
+TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR="Foreground effect color for headers"
+TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR="Background effect color for headers"
+
 TPL_SLT_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides"
 TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image"
 TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image"