Changed Template in joomla and made minor modifications to make it working

This commit is contained in:
Christian Wolf 2017-03-12 14:26:14 +01:00
parent f1c746235c
commit 21bb8194fe
6 changed files with 320 additions and 291 deletions

127
slt1/css/desktop.css Normal file
View File

@ -0,0 +1,127 @@
#topmenu a {
color: inherit;
}
#topmenu {
background-color: black;
color: white;
font-weight: bold;
text-align: center;
position: fixed;
width: 100vw;
display: block;
}
#topmenu > .nav {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
padding: 0px;
margin: 0px;
position: relative;
align-items: center;
height: 40px;
}
#topmenu > .nav > li {
padding: 10px;
display: inline-block;
text-align: left;
}
#topmenu > .nav > li:hover {
background-color: white;
color: black;
}
#topmenu > .nav > li > .nav-child {
position: absolute;
display: none;
z-index: 10;
background-color: white;
margin: 10px 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 {
display: block;
padding: 10px;
}
#topmenu > .nav > li > .nav-child > li:hover {
background-color: gray;
}
#page {
padding-top: 35px;
}
/*
* Header line positioning
*/
#slideshow {
display: inline-block;
}
/*
* Content positioning
*/
#content {
display: flex;
}
#left_menu {
flex: 1 1 20%;
margin: 15px 0px 15px 5px;
display: block;
}
#main_column {
flex: 1 1 60%;
display: flex;
flex-flow: column nowrap;
}
#main_content{
flex: 1 1 100%;
}
#footline {
flex: none;
}
#right_column {
flex: 1 1 15%;
margin: 15px 5px 15px 0px;
display: block;
}
/*
* Footer positioning
*/
#mobile_menu {
display: none;
}
/*
* Debug
*/
/*#right_column,#left_menu,#main_content,#footline {
background-color: rgba(0,0,0,0.1);
}*/

View File

@ -1,277 +1,5 @@
@import "visual.css";
body { @import "mobile.css";
margin: 0px;
height: 100vh
}
#page {
box-shadow: 30vw 0px 5vw -10vw green inset;
}
/*
* Menu configuration
*/
.nav {
padding: 0px;
}
.nav > li {
display: block;
}
.nav > li > .nav {
padding-left: 5px;
margin-left: 5px;
border-left: solid gray 1px;
font-size: smaller;
}
.nav > li > .nav > li > .nav {
font-size: x-small;
}
/*
* Topmenu positioning and styling
*/
#topmenu {
display: none;
}
@media only screen and ( min-width: 1000px){
#topmenu {
background-color: black;
color: white;
font-weight: bold;
text-align: center;
position: fixed;
width: 100vw;
display: block;
}
#topmenu > .nav {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
padding: 0px;
margin: 0px;
position: relative;
align-items: center;
height: 40px;
}
#topmenu > .nav > li {
padding: 10px;
display: inline-block;
text-align: left;
}
#topmenu > .nav > li:hover {
background-color: white;
color: black;
}
#topmenu > .nav > li > .nav {
position: absolute;
display: none;
z-index: 10;
background-color: white;
margin: 10px 20px 10px 0px;
border: none;
padding: 0px;
}
#topmenu > .nav > li:hover > .nav {
display: block;
box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
}
#topmenu > .nav > li > .nav > li {
display: block;
padding: 10px;
}
#topmenu > .nav > li > .nav > li:hover {
background-color: gray;
}
#page {
padding-top: 35px;
}
}
/*
* Header line positioning
*/
#header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
#header > div {
margin: 20px;
align-items: center;
}
#logo, #slideshow {
flex: 0;
}
#logo {
display: inline-block;
}
#slideshow {
display: none;
}
#logo > img {
height: 150px;
}
#slideshow > img {
height: 150px;
}
@media only screen and (min-width: 1000px) {
#slideshow {
display: inline-block;
}
}
/*
* Content positioning
*/
#left_menu {
display: none;
}
#main_column {
margin: 15px;
}
#right_column {
display: none;
}
#footline {
margin-top: 10px;
}
@media only screen and (min-width: 1000px) {
#content {
display: flex;
}
#left_menu {
flex: 1 1 20%;
margin: 15px 0px 15px 5px;
display: block;
}
#main_column {
flex: 1 1 60%;
display: flex;
flex-flow: column nowrap;
}
#main_content{
flex: 1 1 100%;
}
#footline {
flex: none;
}
#right_column {
flex: 1 1 15%;
margin: 15px 5px 15px 0px;
display: block;
}
}
/*
* Footer positioning
*/
#footer {
background-color: black;
color: white;
text-align: center;
margin-top: 30px;
padding: 5px;
}
/*
* Mobile menu positioning
*/
#mobile_menu li > a {
margin: 5px 0px 5px 0px;
background-color: rgb(200,255,200);
padding: 0px;
display: block;
}
#mobile_menu li > a.selected {
background-color: rgb(150,255,150);
}
#mobile_menu .nav {
padding: 0px;
border: none;
margin-left: 0px;
}
#mobile_menu li {
margin-left: 5px;
margin-right: 5px;
}
#mobile_menu li > ul.nav {
margin-left: -5px;
margin-right: -5px;
}
#mobile_menu > .level-1 > li > ul {
display: flex;
flex-wrap: wrap;
}
#mobile_menu > .level-1 > li > ul > li {
display: inline-block;
flex: 1 1 40%;
}
#mobile_menu > .level-1 > li > ul > li > a {
display: block;
}
@media only screen and (min-width: 1000px)
{
#mobile_menu {
display: none;
}
}
/*
* Debug
*/
/*#right_column,#left_menu,#main_content,#footline {
background-color: rgba(0,0,0,0.1);
}*/
@import "desktop.css" ( min-width: 1000px);

175
slt1/css/mobile.css Normal file
View File

@ -0,0 +1,175 @@
body {
margin: 0px;
height: 100.1vh;
display: flex;
flex-direction: column;
}
#page {
box-shadow: 30vw 0px 5vw -10vw green inset;
flex: 1;
display: flex;
flex-direction: column;
}
/*
* Menu configuration
*/
.nav, .nav-child {
padding: 0px;
}
.nav > li, .nav-child > li {
display: block;
}
.nav > li > .nav-child, .nav-child > li > .nav-child {
padding-left: 5px;
margin-left: 5px;
border-left: solid gray 1px;
font-size: smaller;
}
.nav > li > .nav-child .nav-child {
font-size: x-small;
}
/*
* Topmenu positioning and styling
*/
#topmenu {
display: none;
}
/*
* Header line positioning
*/
#header {
flex: 0;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
#header > div {
margin: 20px;
align-items: center;
}
#logo, #slideshow {
flex: 0;
}
#logo {
display: inline-block;
}
#slideshow {
display: none;
}
#logo > img {
height: 150px;
}
#slideshow > img {
height: 150px;
}
/*
* Content positioning
*/
#content {
flex: 1;
}
#left_menu {
display: none;
}
#main_column {
margin: 15px;
}
#right_column {
display: none;
}
#footline {
margin-top: 10px;
}
/*
* Footer positioning
*/
#footer {
flex: 0;
background-color: black;
color: white;
text-align: center;
margin-top: 30px;
padding: 5px;
}
/*
* Mobile menu positioning
*/
#mobile_menu li > a {
margin: 5px 0px 5px 0px;
background-color: rgb(200,255,200);
padding: 0px;
display: block;
flex: 0;
}
#mobile_menu li.active > a {
background-color: rgb(150,255,150);
}
#mobile_menu .nav {
padding: 0px;
border: none;
margin-left: 0px;
}
#mobile_menu li {
margin-left: 5px;
margin-right: 5px;
}
#mobile_menu li > ul.nav {
margin-left: -5px;
margin-right: -5px;
}
#mobile_menu > .level-1 > li > ul {
display: flex;
flex-wrap: wrap;
}
#mobile_menu > .level-1 > li > ul > li {
display: inline-block;
flex: 1 1 40%;
}
#mobile_menu > .level-1 > li > ul > li > a {
display: block;
}
/*
* Debug
*/
/*#right_column,#left_menu,#main_content,#footline {
background-color: rgba(0,0,0,0.1);
}*/

0
slt1/css/visual.css Normal file
View File

View File

@ -27,43 +27,43 @@ $app = JFactory::getApplication();
<body> <body>
<div id='topmenu'> <div id='topmenu'>
<jdoc:include type="modules" style="xhtml" name="topmenu" /> <jdoc:include type="modules" style="none" name="topmenu" />
</div> <!-- #topmenu --> </div> <!-- #topmenu -->
<div id='page'> <div id='page'>
<div id='header'> <div id='header'>
<div id='logo'> <div id='logo'>
<img src='img/SLT_hoch_03.png'> <img src='<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/SLT_hoch_03.png'>
</div> <!-- #logo --> </div> <!-- #logo -->
<div id='slideshow'> <div id='slideshow'>
<jdoc:include type="modules" style="xhtml" name="slideshow" /> <jdoc:include type="modules" style="none" name="slideshow" />
</div> <!-- #slideshow --> </div> <!-- #slideshow -->
</div> <!-- #header --> </div> <!-- #header -->
<div id='mobile_menu'> <div id='mobile_menu'>
<jdoc:include type="modules" style="xhtml" name="mobile_menu" /> <jdoc:include type="modules" style="none" name="mobile_menu" />
</div> </div>
<div id='content'> <div id='content'>
<div id='left_menu'> <div id='left_menu'>
<jdoc:include type="modules" style="xhtml" name="left_menu" /> <jdoc:include type="modules" style="none" name="left_menu" />
</div> <!-- #left_menu --> </div> <!-- #left_menu -->
<div id='main_column'> <div id='main_column'>
<div id='main_content'> <div id='main_content'>
<jdoc:include type="component" style="xhtml" /> <jdoc:include type="component" style="none" />
</div> </div>
<div id='footline'> <div id='footline'>
<jdoc:include type="modules" style="xhtml" name="footline" /> <jdoc:include type="modules" style="none" name="footline" />
</div> <!-- #footline --> </div> <!-- #footline -->
</div><!-- main_column --> </div><!-- main_column -->
<div id='right_column'> <div id='right_column'>
<jdoc:include type="modules" style="xhtml" name="right_column" /> <jdoc:include type="modules" style="none" name="right_column" />
</div><!-- #right_column --> </div><!-- #right_column -->
</div> <!-- #content --> </div> <!-- #content -->
<div id='footer'> <div id='footer'>
<jdoc:include type="modules" style="xhtml" name="footer" /> <jdoc:include type="modules" style="none" name="footer" />
</div> <!-- #footer --> </div> <!-- #footer -->
</div> <!-- #page --> </div> <!-- #page -->

View File

@ -75,7 +75,7 @@
<field name="unser_header_bild" <field name="unser_header_bild"
type="media" type="media"
default="" default=""
label="Label" label="Label3"
description="Description" description="Description"
filter="string" filter="string"
/> />
@ -90,8 +90,7 @@
</fields> </fields>
</config> </config>
<!-- Parameter Block ende --> <!-- Parameter Block ende -->
<updateservers>
<updateservers> <server type="extension" name="slt" priority="1">http://localhost/slt-update/slt.xml</server>
<server type="extension" name="Private SLT-Update-Site">http://localhost/slt-update/slt.xml</server>
</updateservers> </updateservers>
</extension> </extension>