Das Template „JekyllAndHyde“

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
Lemon
Posts: 159
Joined: Mon Dec 08, 2008 4:24 pm

Das Template „JekyllAndHyde“

Post by Lemon » Thu Nov 08, 2018 4:04 pm

Hallo,

tolles Template sehr gelungen.
Ich hätte eine Frage dazu , lässt sich anstelle des Bild Landing Page auch ein slider full screen einfügen?
Falls ja, wie mache ich das am Besten?

Vielen Dank

lck
Posts: 1364
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Das Template „JekyllAndHyde“

Post by lck » Thu Nov 08, 2018 9:03 pm

Hallo Lemon,
Lemon wrote:
Thu Nov 08, 2018 4:04 pm
tolles Template sehr gelungen.
Besten Dank!
Lemon wrote:
Thu Nov 08, 2018 4:04 pm
Ich hätte eine Frage dazu , lässt sich anstelle des Bild Landing Page auch ein slider full screen einfügen?
Falls ja, wie mache ich das am Besten?
Möglich ja, dazu braucht es aber einige Änderungen. Umgesetzt habe ich es mal mit dem Plugin Slideshow_XH von Christoph.

Slideshow per Plugin Slideshow_XH
1. Plugin installieren und konfigurieren

2. Template
a) Pluginaufruf einfügen unter Zeile 95

Code: Select all

<header id="lck_head">
		<div class="lck_head"> /* unter dieser Zeile folgendes einfügen */
		
		<!-- Slideshow mit Slideshow_XH -->
		<?php if (XH_ADM && !$edit || !XH_ADM):?>
		<div class="lck_slideshow"><?=slideshow('slideshow');?></div>
		<?php endif;?>
b) Zeile 245 bis 253 löschen

Code: Select all

// Simple Parallax-Effect for background-image + fadeout/fadein effect
$(window).scroll(function(e){
	parallax();
});
function parallax(){
	var scrolled = $(window).scrollTop();
	$('#lck_head').css('background-position-y',(scrolled*0.5)+'px');
	$('.lck_logo, #searchbox, .lck_langmenu, .lck_subnav').css('opacity',1-(scrolled*.00250));
}
3. startpage.css, folgendes ändern:
a) Zeile 98

Code: Select all

#lck_head {
	/* background-color: #2a2a2a;
	background: url(images/bg_startpage.jpg) 50% 0 no-repeat;
	-webkit-background-size: cover;
	background-size: cover; */
}
b) Zeile 121

Code: Select all

#lck_head {
	/* background-image: url(images/bg_mobil.jpg); */
	height: initial;
}
4.) stylesheet.css
a) am Ende der Seite einfügen:

Code: Select all

/* Slideshow mit Plugin Slideshow_XH */
.lck_slideshow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: inherit;
	margin: 0;
	padding: 0;
	z-index: -10;
}
.lck_slideshow img {
	height: 100%;
}
b) Zeile 254

Code: Select all

#lck_head {
	/* background-color: #2a2a2a; */
	/* background: url(images/bg.jpg) 50% 0 no-repeat; */
	-webkit-background-size: cover;
	background-size: cover;
	display: table;
	height: 33%;
	height: 33vh;
	margin: 0;
	min-height: 230px;
	padding: 0;
	width: 100%;
}
c) ab Zeile 1052

Code: Select all

#lck_head {
	/* background: url(images/bg_mobil.jpg) 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover; */
}
#lck_head {
	/* background-color: rgba(0, 0, 0, 0); */
	height: 200px;
	min-height: 200px;
}
Gelöscht werden können dann auch im Template-Ordner images/
bg_startpage.jpg
bg.jpg
bg_mobil.jpg

EDIT:
unter userfiles/images einen neuen Ordner anlegen "slideshow", also wie im Pluginaufruf angegeben (siehe Punkt 2) und in diesen Ordner deine Bilder einfügen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Lemon
Posts: 159
Joined: Mon Dec 08, 2008 4:24 pm

Re: Das Template „JekyllAndHyde“

Post by Lemon » Fri Nov 09, 2018 7:36 am

Herzlichen Dank, werde ich ausprobieren

Post Reply