New Responsive Template - JekyllAndHyde

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

bastingse
Posts: 272
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by bastingse » Fri Apr 05, 2019 11:07 am

It is a great template, just like underthebridge template. But what i notice in these templates is that when I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.
Or when i'm on position y on page 1 and then click on page 2 it goes to position y on page 2 instead of going to the top of the page.

Can this be solve?

bastingse
Posts: 272
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by bastingse » Fri Apr 05, 2019 11:14 am

i added this into the template, now this problem is solve

Code: Select all

<script type="text/javascript">
   $('html,body').animate({scrollTop:0},800);
</script>

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

Re: New Responsive Template - JekyllAndHyde

Post by lck » Fri Apr 05, 2019 11:52 am

bastingse wrote:
Fri Apr 05, 2019 11:07 am
But what i notice in these templates is that when I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.
Or when i'm on position y on page 1 and then click on page 2 it goes to position y on page 2 instead of going to the top of the page.
But this only applies to the template UnderTheBridge not JekyllAndHyde. The explanation and solution can be found here.
The fact that a refresh of the page jumps to the previous position Y is actually the normal behavior.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bastingse
Posts: 272
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by bastingse » Fri Apr 05, 2019 12:34 pm

Thanks a lot!!
I was searching the forum in englisch so thats why i couldn't find this answer cause it is in german language .

Thanks!!

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: New Responsive Template - JekyllAndHyde

Post by wbs » Sat Apr 20, 2019 11:22 am

Ich habe ein Logo und einen internen Link statt der Searchbox eingebaut mit

Code: Select all

<!-- Logo -->
<div style="text-align:center;">
   <img src="<?php echo $pth['folder']['template']?>images/logo.png">
</div>

<div style="text-align:center">
   <a href="?Unser-Tagesmenue">Unser Tagesmenü</a>
</div>
Das Problem ist jetzt, dass das ganze nach oben übers Menü rutscht, wenn ich nicht auf der Startseite bin. Warum und gibts da eine Lösung?

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

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sun Apr 21, 2019 12:16 pm

wbs wrote:
Sat Apr 20, 2019 11:22 am
Das Problem ist jetzt, dass das ganze nach oben übers Menü rutscht, wenn ich nicht auf der Startseite bin. Warum und gibts da eine Lösung?
Grundsätzlich, das Template verwendet für die Startseite eine extra Datei namens startpage.css, alle anderen allgemeinen Styles sind in der stylesheet.css hinterlegt.
wbs wrote:
Sat Apr 20, 2019 11:22 am
Ich habe ein Logo und einen internen Link statt der Searchbox eingebaut mit
Dazu bräuchte ich eventuell noch genauere Informationen. Ich gehe mal davon aus, dass du das Sprachauswahlmenü nicht brauchst und dies bereits gelöscht oder per display: none bereits ausgeblendet hast und Logo und Link auf allen Seiten erscheinen soll.

Also, Beispiel:
template.htm Searchbox löschen oder auskommentieren (aber richtig, siehe viewtopic.php?t=8587#p46957):

Code: Select all

<!-- Searchbox -->
<div class="lck_search">
	<?php echo searchbox();?>
</div>
an dieser Stelle einfügen:

Code: Select all

<!-- Logo and Link -->
<div class="lck_logoandlink">
<div>
   <img src="<?php echo $pth['folder']['templateimages']?>logo.png">
</div>

<div>
   <a href="?Unser-Tagesmenue">Unser Tagesmenü</a>
</div>
</div>
stylesheet.css am Ende einfügen:

Code: Select all

/* Logo and Link */
.lck_logoandlink {
	margin: 0;
	position: absolute;
	left: 50%;
	text-align: center;
	-webkit-transform: translate(-50%,-25%);
	transform: translate(-50%, -25%);
}
.lck_logoandlink img {
	max-height: 100px; /* evtl. anpassen */
	padding-bottom: 0.5rem;
}
startpage.css

Code: Select all

/* Logo and Link */
.lck_logoandlink {
	margin: 2rem 0;
	position: relative;
	left: auto;
	-webkit-transform: none;
	transform: none;
}
Für mobile Geräte muss das eventuell auch noch angepasst werden.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: New Responsive Template - JekyllAndHyde

Post by wbs » Sun Apr 21, 2019 5:37 pm

Danke!

Ich bin gerade draufgekommen, dass ich den Link nur auf der Startseite will. Aber das ist ja hinzukriegen, wenns ein startpage.css gibt. Muss ich die Klassen nur auf Logo und Link aufteilen.

Ich habe die Sprachauswahl nicht ausgeblendet, die Suche auch nur mit display:none...

Noch was: Wie kann ich eigentlich den Text in der Logobox bearbeiten? Bzw. wie kann ich die Logobox ganz ausblenden? Wenn ich .lck_logo .logobox ausblende bleibt der Titel verschoben.

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

Re: New Responsive Template - JekyllAndHyde

Post by lck » Tue Apr 23, 2019 9:51 am

wbs wrote:
Sun Apr 21, 2019 5:37 pm
Wie kann ich eigentlich den Text in der Logobox bearbeiten?
In den Template-Sprachdateien in languages/*.php.
wbs wrote:
Sun Apr 21, 2019 5:37 pm
Bzw. wie kann ich die Logobox ganz ausblenden?
Am besten in der template.htm, folgende Zeile löschen:

Code: Select all

<div class="logobox"><a href="./" title="Home"><?=$tpl_tx['text']['logobox']?></a></div>
wbs wrote:
Sun Apr 21, 2019 5:37 pm
Wenn ich .lck_logo .logobox ausblende bleibt der Titel verschoben.
stylesheet.css ~ Zeile 398

Code: Select all

.lck_logo .logotext {
	...
	padding-left: 80px; /* ändern zu 0 */
	...
}
startpage.css (optional)

Code: Select all

.lck_logo .logotext {
	-webkit-animation: fadetext 2.5s; /* ändern zu fadetext2 1s */
	animation: fadetext 2.5s; /* ändern zu fadetext2 1s */
	...
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply