New Responsive Template - JekyllAndHyde
Moderator: mikey
Re: New Responsive Template - JekyllAndHyde
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?
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
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
But this only applies to the template UnderTheBridge not JekyllAndHyde. The explanation and solution can be found here.bastingse wrote: ↑Fri Apr 05, 2019 11:07 amBut 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.
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
Re: New Responsive Template - JekyllAndHyde
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!!
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
Ich habe ein Logo und einen internen Link statt der Searchbox eingebaut mit
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?
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>
Re: New Responsive Template - JekyllAndHyde
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.
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>
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>
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;
}
Code: Select all
/* Logo and Link */
.lck_logoandlink {
margin: 2rem 0;
position: relative;
left: auto;
-webkit-transform: none;
transform: none;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: New Responsive Template - JekyllAndHyde
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.
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
In den Template-Sprachdateien in languages/*.php.
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>
stylesheet.css ~ Zeile 398
Code: Select all
.lck_logo .logotext {
...
padding-left: 80px; /* ändern zu 0 */
...
}
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
Re: New Responsive Template - JekyllAndHyde
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:
manu
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.
manu
Re: New Responsive Template - JekyllAndHyde
Welcome back to CMSimple_XH!manu wrote: ↑Sun Feb 02, 2020 2:10 pmBei 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.
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.manu wrote: ↑Sun Feb 02, 2020 2:10 pmAuf 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?
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 */
}
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;
}
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