New Responsive Template - JekyllAndHyde

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

Moderator: mikey

bastingse
Posts: 308
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: 308
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: 2955
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: 308
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: 2955
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: 2955
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

manu
Posts: 1085
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by manu » Sun Feb 02, 2020 2:10 pm

Bei einer über 10 jährigen CMSimple_XH Präsenz haben wir uns nach Ausflügen in WP Templates doch für das bestehende Jekyll&Hide Template entschieden und damit den Refresh mit geringem nutzerseitigem Aufwand über die Bühne gebracht. Der Auftritt ist mithilfe des Templates ansprechend gelungen.
Frage an den Schöpfer:
Auf der Startseite hat es eine kleine CSS Animation mit der logobox und dem logotext. Nach dem Wechsel des bg-images der logobox verschiebt sich der vertikale trenner (.logobox:after) ans Ende des logotextes. Irgenwelche Ideen wie ich diesen wieder zurück zur logobox zügele?

Wohlwollende Rückmeldung an den Schöpfer:
  • bei diesem umfangreichen css file würde ich mir gerne einen CSS Compiler à la LESS/SASS wünschen. Oder gibt es nicht mittlerweile CSS Variablen, das wäre ein Segen für die Farbgestaltung.
  • Bei der doch breiten Ausladung wünschte ich mir für die Strukturierung ein rudimentäres Grid System. Aber das wurde ja in diesem Thread schon diskutiert. Ich habe mir der beinhalteten responsive Table .resptable geholfen und diese gleich für lck_content_main generalisiert. Damit kann ich schon etwas abdecken.
Hiermit nochmals Dank für die mächtige Vorarbeit.
manu

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

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sun Feb 02, 2020 5:02 pm

manu wrote:
Sun Feb 02, 2020 2:10 pm
Bei einer über 10 jährigen CMSimple_XH Präsenz haben wir uns nach Ausflügen in WP Templates doch für das bestehende Jekyll&Hide Template entschieden und damit den Refresh mit geringem nutzerseitigem Aufwand über die Bühne gebracht.
Welcome back to CMSimple_XH! ;)
manu wrote:
Sun Feb 02, 2020 2:10 pm
Auf der Startseite hat es eine kleine CSS Animation mit der logobox und dem logotext. Nach dem Wechsel des bg-images der logobox verschiebt sich der vertikale trenner (.logobox:after) ans Ende des logotextes. Irgenwelche Ideen wie ich diesen wieder zurück zur logobox zügele?
Das Logo hättest du auch per Template Sprachdateien einbauen können, ist hier irgendwo im Thread genau erklärt. Aber Änderungen am CSS wären da auch nötig gewesen.

Also, stylesheet.css Zeile 390 (bei dir) ergänzen mit

Code: Select all

.lck_logo .logobox {
	background: white url(images/logo_coacheria_oz.jpg) center /contain no-repeat;
	width: 160px;
	height: 70px;
	padding: 10px;
	background-origin: content-box;
	position: absolute; /* das hinzu */
	text-align: center; /* das hinzu */
}
Zeile 415, padding-left ändern

Code: Select all

.lck_logo .logotext {
	color: #EEEEEE;
	display: table-cell;
	font-size: 30px;
	font-weight: 400;
	height: 60px;
	padding-left: 180px; /* zu 180 geändert */
	position: relative;
	vertical-align: middle;
}
Zeile 445, padding-left ändern zu

Code: Select all

@keyframes fadetext {
	0% {opacity: 0;}
	65% {opacity: 0; padding-left: 170px;}
	100% {opacity: 1; padding-left: 180px;}
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply