Removed some bugs and implemented a set of features

This commit is contained in:
Christian Wolf 2017-11-23 19:24:09 +01:00
parent 50cdb39bdf
commit 1999c7efc3
7 changed files with 321 additions and 78 deletions

View File

@ -4,18 +4,23 @@ Structure of page
*/ */
#topmenu-div { #topmenu-div {
width: 100vw;
} }
#topmenu #topmenu
{ {
position: fixed; position: fixed;
display: block; display: flex;
width: 100vw;
} }
#topmenu > .nav #topmenu > .topmenu-sep
{ {
display: inline-block;
flex: 1 1 auto;
}
#topmenu .nav
{
flex: 0 0 auto;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-around; justify-content: space-around;
@ -23,7 +28,7 @@ Structure of page
align-items: center; align-items: center;
} }
#topmenu > .nav > li #topmenu .nav > li
{ {
display: inline-block; display: inline-block;
} }
@ -33,16 +38,16 @@ Structure of page
position: relative; position: relative;
} }
#topmenu > .nav > li > .nav-child { #topmenu .nav > li > .nav-child {
position: absolute; position: absolute;
display: none; display: none;
} }
#topmenu > .nav > li:hover > .nav-child { #topmenu .nav > li:hover > .nav-child {
display: block; display: block;
} }
#topmenu > .nav > li > .nav-child > li > a { #topmenu .nav > li > .nav-child > li > a {
display: block; display: block;
} }
@ -59,6 +64,12 @@ Structure of page
flex: 0 0 auto; flex: 0 0 auto;
} }
#page-bg
{
display: block;
position: fixed;
}
#header { #header {
justify-content: space-around; justify-content: space-around;
} }
@ -116,14 +127,21 @@ body
padding: 0px; padding: 0px;
} }
#topmenu-div {
width: 100vw;
height: 40px;
}
#topmenu { #topmenu {
width: 100vw;
z-index: 5000; z-index: 5000;
} }
#topmenu > .nav { #topmenu .nav {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
height: 40px; height: 40px;
width: 1000px;
} }
#topmenu .nav > li > a { #topmenu .nav > li > a {
@ -132,31 +150,38 @@ body
z-index: 3001; z-index: 3001;
} }
#topmenu > .nav > li > .nav-child { #topmenu .nav > li > .nav-child {
z-index: 3000; z-index: 3000;
margin: 0px 20px 10px 0px; margin: 0px 20px 10px 0px;
border: none; border: none;
padding: 0px; padding: 0px;
} }
#topmenu > .nav > li:hover > .nav-child { #topmenu .nav > li:hover > .nav-child {
box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5); box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
} }
#topmenu > .nav > li > .nav-child > li > a { #topmenu .nav > li > .nav-child > li > a {
padding: 10px; padding: 10px;
} }
#page-div #page-div
{ {
min-height: calc( 100vh - 40px ); min-height: calc( 100vh - 40px );
margin-top: 40px;
} }
#page { #page {
width: 1000px; width: 1000px;
} }
#page-bg
{
width: 1000px;
height: calc( 100vh - 40px );
bottom: 0px;
z-index: -9;
}
#left_side-image, #right_side-image #left_side-image, #right_side-image
{ {
position: fixed; position: fixed;
@ -217,7 +242,7 @@ Additional content
text-align: center; text-align: center;
} }
#topmenu > .nav > li { #topmenu .nav > li {
text-align: left; text-align: left;
} }
@ -227,14 +252,16 @@ Additional content
#topmenu .nav > li > a, #topmenu .nav > li > a,
#topmenu .nav > li:hover > a, #topmenu .nav > li:hover > a,
#topmenu .nav > li:focus > a #topmenu .nav > li:focus > a,
#topmenu .nav > li.active > a
{ {
background-color: inherit; background-color: inherit;
color: inherit;
} }
#topmenu > .nav > li > .nav-child > li:hover > a:hover, #topmenu .nav-child > li:hover > a:hover,
#topmenu > .nav > li > .nav-child > li:focus > a:hover, #topmenu .nav-child > li:focus > a:hover,
#topmenu > .nav > li > .nav-child > li:hover > a:focus #topmenu .nav-child > li:hover > a:focus
{ {
text-decoration: none; text-decoration: none;
} }
@ -245,7 +272,10 @@ Additional content
background-size: cover; background-size: cover;
} }
#page
{
background-color: inherit;
}

View File

@ -21,6 +21,11 @@ body {
width: 100%; width: 100%;
} }
#page-bg
{
display: none;
}
/* /*
* Menu configuration * Menu configuration
*/ */
@ -33,15 +38,20 @@ body {
display: block; display: block;
} }
.nav
{
font-size: inherit;
}
.nav-child
{
font-size: small;
}
.nav > li > .nav-child, .nav-child > li > .nav-child { .nav > li > .nav-child, .nav-child > li > .nav-child {
padding-left: 5px; padding-left: 5px;
margin-left: 5px; margin-left: 5px;
/* border-left: solid gray 1px;*/ /*TODO*/ /* border-left: solid gray 1px;*/ /*TODO*/
font-size: smaller;
}
.nav > li > .nav-child .nav-child {
font-size: x-small;
} }
/* /*
@ -105,12 +115,36 @@ body {
* Footer positioning * Footer positioning
*/ */
#impressum
{
flex: 0 0 auto;
text-align: right;
margin-top: 30px;
padding: 5px;
}
#impressum .nav
{
margin-bottom: 0px;
background-color: inherit;
}
#impressum .nav > li
{
display: inline-block;
}
#impressum a
{
text-decoration: underline;
padding: 10px;
}
#footer { #footer {
flex: 0 0 auto; flex: 0 0 auto;
background-color: black; background-color: black;
color: white; color: white;
text-align: center; text-align: center;
margin-top: 30px;
padding: 5px; padding: 5px;
} }
@ -122,6 +156,20 @@ body {
float: right; float: right;
} }
#footer a
{
color: inherit;
text-decoration: underline;
}
#footer a:hover,
#footer a:focus
{
color: black;
background-color: white;
text-decoration: underline;
}
/* /*
* Mobile menu positioning * Mobile menu positioning
*/ */

View File

@ -1,6 +1,6 @@
body { body {
font-size: 12px; font-size: 12pt;
font-family: Arial, Verdana, Helvetica, Geneva, sans-serif; font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
line-height: 175%; line-height: 175%;
} }
@ -62,6 +62,10 @@ ul.nav-child > li > a:hover
text-decoration: none; text-decoration: none;
} }
.nav a
{
color: inherit;
}
#topmenu a { #topmenu a {
color: inherit; color: inherit;

View File

@ -0,0 +1,125 @@
<?php
/**
* @package Joomla.Site
* @subpackage com_contact
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
/**
* Marker_class: Class based on the selection of text, none, or icons
* jicon-text, jicon-none, jicon-icon
*/
?>
<dl class="contact-address dl-horizontal" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<?php if (($this->params->get('address_check') > 0) &&
($this->contact->address || $this->contact->suburb || $this->contact->state || $this->contact->country || $this->contact->postcode)) : ?>
<dt>
<span class="<?php echo $this->params->get('marker_class'); ?>">
<?php echo $this->params->get('marker_address'); ?>
</span>
</dt>
<?php if ($this->contact->address && $this->params->get('show_street_address')) : ?>
<dd>
<span class="contact-street" itemprop="streetAddress">
<?php echo nl2br($this->contact->address); ?>
<br />
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->suburb && $this->params->get('show_suburb')) : ?>
<dd>
<span class="contact-postcode" itemprop="postalCode">
<?php echo $this->contact->postcode; ?>
</span>
<span class="contact-suburb" itemprop="addressLocality">
<?php echo $this->contact->suburb; ?>
<br />
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->state && $this->params->get('show_state')) : ?>
<dd>
<span class="contact-state" itemprop="addressRegion">
<?php echo $this->contact->state; ?>
<br />
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->country && $this->params->get('show_country')) : ?>
<dd>
<span class="contact-country" itemprop="addressCountry">
<?php echo $this->contact->country; ?>
<br />
</span>
</dd>
<?php endif; ?>
<?php endif; ?>
<?php if ($this->contact->email_to && $this->params->get('show_email')) : ?>
<dt>
<span class="<?php echo $this->params->get('marker_class'); ?>" itemprop="email">
<?php echo nl2br($this->params->get('marker_email')); ?>
</span>
</dt>
<dd>
<span class="contact-emailto">
<?php echo $this->contact->email_to; ?>
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->telephone && $this->params->get('show_telephone')) : ?>
<dt>
<span class="<?php echo $this->params->get('marker_class'); ?>">
<?php echo $this->params->get('marker_telephone'); ?>
</span>
</dt>
<dd>
<span class="contact-telephone" itemprop="telephone">
<?php echo $this->contact->telephone; ?>
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->fax && $this->params->get('show_fax')) : ?>
<dt>
<span class="<?php echo $this->params->get('marker_class'); ?>">
<?php echo $this->params->get('marker_fax'); ?>
</span>
</dt>
<dd>
<span class="contact-fax" itemprop="faxNumber">
<?php echo $this->contact->fax; ?>
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->mobile && $this->params->get('show_mobile')) : ?>
<dt>
<span class="<?php echo $this->params->get('marker_class'); ?>">
<?php echo $this->params->get('marker_mobile'); ?>
</span>
</dt>
<dd>
<span class="contact-mobile" itemprop="telephone">
<?php echo $this->contact->mobile; ?>
</span>
</dd>
<?php endif; ?>
<?php if ($this->contact->webpage && $this->params->get('show_webpage')) : ?>
<dt>
<span class="<?php echo $this->params->get('marker_class'); ?>">
</span>
</dt>
<dd>
<span class="contact-webpage">
<a href="<?php echo $this->contact->webpage; ?>" target="_blank" rel="noopener noreferrer" itemprop="url">
<?php echo JStringPunycode::urlToUTF8($this->contact->webpage); ?></a>
</span>
</dd>
<?php endif; ?>
</dl>

View File

@ -19,6 +19,12 @@ JHtml::_('bootstrap.loadCss', true, $this->direction);
JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false)); JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false));
JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true)); JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true));
// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
$params = $this->params; $params = $this->params;
$leftImageValue = (empty($this->params{'imgleft'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgleft'} . "\")") ; $leftImageValue = (empty($this->params{'imgleft'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgleft'} . "\")") ;
@ -51,29 +57,26 @@ body
{ {
background-color: <?php echo $this->params{'bgcolorside'}; ?>; background-color: <?php echo $this->params{'bgcolorside'}; ?>;
} }
.page-header
{
border-bottom-color: <?php echo $params{'fgcolor4'}; ?>;
}
#page { #page-bg
background-color: <?php echo $params{'bgcolor4'}; ?>; {
color: <?php echo $params{'fgcolor4'}; ?>; background-image: linear-gradient(to bottom, <?php echo $params{'mainbgcolortop'} . ',' . $params{'mainbgcolorbot'}; ?>);
color: <?php echo $params{'mainfgcolor'}; ?>;
} }
#mobile_menu li > a { #mobile_menu li > a {
background-color: var(--bgcolor2); background-color: <?php echo $params{'bgcolor2'}; ?>;
color: var(--fgcolor2); color: <?php echo $params{'fgcolor2'}; ?>;
} }
#mobile_menu li.active > a { #mobile_menu li.active > a {
background-color: var(--bgcolor1); background-color: <?php echo $params{'bgcolor1'}; ?>;
color: var(--fgcolor1); color: <?php echo $params{'fgcolor1'}; ?>;
} }
ul.menu { ul.menu {
background-color: <?php echo $params{'bgcolor3'}; ?>; background-color: <?php echo $params{'bgcolor1'}; ?>;
color: <?php echo $params{'fgcolor3'}; ?>; color: <?php echo $params{'fgcolor1'}; ?>;
} }
ul.menu li.active > a { ul.menu li.active > a {
@ -83,8 +86,8 @@ ul.menu li.active > a {
ul.menu li.current > a ul.menu li.current > a
{ {
background-color: <?php echo $params{'bgcolor1'}; ?>; background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor1'}; ?>; color: <?php echo $params{'fgcolor2'}; ?>;
} }
ul.nav > li > a:hover, ul.nav > li > a:hover,
@ -92,32 +95,34 @@ ul.nav > li > a:focus,
ul.nav-child > li > a:hover, ul.nav-child > li > a:hover,
ul.nav-child > li > a:focus ul.nav-child > li > a:focus
{ {
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
}
#topmenu, #topmenu > ul.menu {
background-color: <?php echo $params{'bgcolor1'}; ?>;
color: <?php echo $params{'fgcolor1'}; ?>;
}
#topmenu > .nav > li:hover,
#topmenu > .nav > li:focus
{
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
}
#topmenu > .nav > li > .nav-child {
background-color: <?php echo $params{'bgcolor3'}; ?>; background-color: <?php echo $params{'bgcolor3'}; ?>;
color: <?php echo $params{'fgcolor3'}; ?>; color: <?php echo $params{'fgcolor3'}; ?>;
} }
#topmenu > .nav > li > .nav-child > li:hover > a, #topmenu,
#topmenu > .nav > li > .nav-child > li:focus > a #topmenu > ul.menu {
background-color: <?php echo $params{'topbgcolor1'}; ?>;
color: <?php echo $params{'topfgcolor1'}; ?>;
}
#topmenu li.current > a
{ {
background-color: <?php echo $params{'bgcolor2'}; ?>; background-color: <?php echo $params{'topbgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>; color: <?php echo $params{'topfgcolor2'}; ?>;
}
#topmenu .nav-child {
background-color: <?php echo $params{'topbgcolor3'}; ?>;
color: <?php echo $params{'topfgcolor3'}; ?>;
}
#topmenu .nav > li:hover,
#topmenu .nav > li:focus,
#topmenu .nav-child > li:hover > a,
#topmenu .nav-child > li:focus > a
{
background-color: <?php echo $params{'topbgcolor2'}; ?>;
color: <?php echo $params{'topfgcolor2'}; ?>;
} }
#left_side-image #left_side-image
@ -143,7 +148,7 @@ table.alternating tr:nth-child(even) {
<!-- <!--
<?php <?php
//print_r($this->params); print_r($this->params);
?> ?>
--> -->
@ -152,12 +157,15 @@ table.alternating tr:nth-child(even) {
<div id='topmenu-div'> <div id='topmenu-div'>
<div id='topmenu'> <div id='topmenu'>
<div class='topmenu-sep'></div>
<jdoc:include type="modules" style="none" name="topmenu" /> <jdoc:include type="modules" style="none" name="topmenu" />
<div class='topmenu-sep'></div>
</div> <!-- #topmenu --> </div> <!-- #topmenu -->
</div> <!-- #topmenu-div --> </div> <!-- #topmenu-div -->
<div id='page-div'> <div id='page-div'>
<div id='left_side-image'></div> <div id='left_side-image'></div>
<div id='page-bg'></div>
<div id='page'> <div id='page'>
<div id='header'> <div id='header'>
@ -187,6 +195,9 @@ table.alternating tr:nth-child(even) {
</div><!-- #right_column --> </div><!-- #right_column -->
</div> <!-- #content --> </div> <!-- #content -->
<div id='impressum'>
<jdoc:include type="modules" style="none" name="impressum" />
</div> <!-- #footer -->
<div id='footer'> <div id='footer'>
<jdoc:include type="modules" style="none" name="footer" /> <jdoc:include type="modules" style="none" name="footer" />
</div> <!-- #footer --> </div> <!-- #footer -->

View File

@ -1,11 +1,23 @@
TPL_SLT_BACKGROUND_COLOR_1="Background Color 1" COM_TEMPLATES_TPL_SLT_COLORS_TOPMENU_FIELDSET_LABEL="Colors of the topmenu"
TPL_SLT_BACKGROUND_COLOR_2="Background Color 2" TPL_SLT_FOREGROUND_COLOR_TOP="Foreground color in the top bar"
TPL_SLT_BACKGROUND_COLOR_3="Background Color 3" TPL_SLT_BACKGROUND_COLOR_TOP="Background color in the top bar"
TPL_SLT_BACKGROUND_COLOR_4="Background Color 4" TPL_SLT_FOREGROUND_COLOR_TOP_DARK="Foreground color of selected item"
TPL_SLT_FOREGROUND_COLOR_1="Foreground Color 1" TPL_SLT_BACKGROUND_COLOR_TOP_DARK="Background color of selected item"
TPL_SLT_FOREGROUND_COLOR_2="Foreground Color 2" TPL_SLT_FOREGROUND_COLOR_TOP_LIGHT="Foreground color of unselected item"
TPL_SLT_FOREGROUND_COLOR_3="Foreground Color 3" TPL_SLT_BACKGROUND_COLOR_TOP_LIGHT="Background color of unselected item"
TPL_SLT_FOREGROUND_COLOR_4="Foreground Color 4"
COM_TEMPLATES_TPL_SLT_COLORS_MAIN_FIELDSET_LABEL="Colors of the main part"
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_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides" TPL_SLT_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides"
TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image" TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image"
TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image" TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image"

View File

@ -29,6 +29,7 @@
<folder>img</folder> <folder>img</folder>
<folder>language</folder> <folder>language</folder>
<folder>js</folder> <folder>js</folder>
<folder>html</folder>
<!-- MUSS, die Hauptdatei für die Ausgabe des Templates --> <!-- MUSS, die Hauptdatei für die Ausgabe des Templates -->
<filename>index.php</filename> <filename>index.php</filename>
<!-- MUSS, jeder Ordner in Joomla ist mit einer Dummy-Html ausgestattet, so werden Server Fehlermeldungen verhindert, falls sich doch ein Webseitenbesucher in ein Verzeichnis verirrt --> <!-- MUSS, jeder Ordner in Joomla ist mit einer Dummy-Html ausgestattet, so werden Server Fehlermeldungen verhindert, falls sich doch ein Webseitenbesucher in ein Verzeichnis verirrt -->
@ -58,6 +59,7 @@
<position>left_menu</position> <position>left_menu</position>
<position>right_column</position> <position>right_column</position>
<position>footline</position> <position>footline</position>
<position>impressum</position>
<position>footer</position> <position>footer</position>
<!--<position></position>--> <!--<position></position>-->
@ -78,16 +80,27 @@
<option value="1">Yes</option> <option value="1">Yes</option>
</field> </field>
</fieldset> </fieldset>
<fieldset name='TPL_SLT_COLORS'> <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="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="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>
</fieldset>
<fieldset name='TPL_SLT_COLORS_MAIN'>
<!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>--> <!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field> <field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
<field name="bgcolor1" type='color' default='#080' label='TPL_SLT_BACKGROUND_COLOR_1'></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 name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
<field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field> <field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
<field name="bgcolor2" type='color' default='#4f4' label='TPL_SLT_BACKGROUND_COLOR_2'></field> <field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
<field name="fgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_3'></field> <field name="fgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_3'></field>
<field name="bgcolor3" type='color' default='#8f8' label='TPL_SLT_BACKGROUND_COLOR_3'></field> <field name="bgcolor3" type='color' default='#888' label='TPL_SLT_BACKGROUND_COLOR_3' format='rgba'></field>
<field name="fgcolor4" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_4'></field>
<field name="bgcolor4" type='color' default='#cfc' label='TPL_SLT_BACKGROUND_COLOR_4'></field>
<field name="bgcolorside" type='color' default='#ebebeb' label='TPL_SLT_BACKGROUND_COLOR_AT_SIDES'></field> <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="imgleft" type='media' directory='' label='TPL_SLT_LEFT_BACKGROUND_IMAGE'></field>
<field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field> <field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field>