Page 11 of 12

Re: New Responsive Template - JekyllAndHyde

Posted: Fri Apr 05, 2019 11:07 am
by bastingse
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?

Re: New Responsive Template - JekyllAndHyde

Posted: Fri Apr 05, 2019 11:14 am
by bastingse
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>

Re: New Responsive Template - JekyllAndHyde

Posted: Fri Apr 05, 2019 11:52 am
by lck
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.

Re: New Responsive Template - JekyllAndHyde

Posted: Fri Apr 05, 2019 12:34 pm
by bastingse
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!!

Re: New Responsive Template - JekyllAndHyde

Posted: Sat Apr 20, 2019 11:22 am
by wbs
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?

Re: New Responsive Template - JekyllAndHyde

Posted: Sun Apr 21, 2019 12:16 pm
by lck
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.

Re: New Responsive Template - JekyllAndHyde

Posted: Sun Apr 21, 2019 5:37 pm
by wbs
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.

Re: New Responsive Template - JekyllAndHyde

Posted: Tue Apr 23, 2019 9:51 am
by lck
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 */
	...
}

Re: New Responsive Template - JekyllAndHyde

Posted: Sun Feb 02, 2020 2:10 pm
by manu
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

Re: New Responsive Template - JekyllAndHyde

Posted: Sun Feb 02, 2020 5:02 pm
by lck
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;}
}