body Tag im Haupttemplate

Uwe367 · Post by **Uwe367** » Tue 3. Jan 2017, 18:45

Hallo allerseits.
Ich versuche mich derzeit an einem Onepager und habe mir zum besseren Verständnis eine Bootstrapvorlage aus dem Netz gezogen die ich nun mit phpwcms umsetzen möchte. Soweit klappt das auch schon ganz gut, aber wie kann ich diesen Code

Code: Select all

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

im Template unter Vorlage --> Haupt einbauen ohne daß ich ein doppeltes body-Tag habe?
Das body-Tag (Start- und Endtag) wird ja schon vom System gerendert. Ich kann den Part in der index.php, der das Starttag rendert, entfernen und dann klappts auch aber das ist mit Sicherheit nicht Sinn und Zweck der Sache.

Hier mal der Link zu der Vorlage die ich nachbauen möchte:
https://blackrockdigital.github.io/star ... grayscale/

Danke schonmal im voraus

Old Boy · Post by **Old Boy** » Wed 4. Jan 2017, 01:10

Na, das ist doch recht einfach ... in die conf.template_default.inc.php :

Code: Select all

$template_default['body']['id'] = 'page-top" data-spy="scroll" data-target=".navbar-fixed-top';

Uwe367 · Post by **Uwe367** » Wed 4. Jan 2017, 08:04

Ups.. die conf.template_default.inc.php hatte ich dafür gar nicht aufm Schirm. Werde ich nachher umsetzen. Danke dir

[EDIT]
So einfach kanns sein wenn man weiß wo man ansetzten muß. Obwohl ich ja nun auch schon einige Jahre mit phpwcms arbeite wußte ich nicht daß man dies in der conf.template_default.inc.php eintragen kann. Man lernt eben nie aus.
Also.. das klappt nun wunderbar. Danke

Uwe367 · Post by **Uwe367** » Wed 4. Jan 2017, 12:30

Sorry fürs Doppelposting, aber nun tut sich das nächste Problem auf bzw. ich bin wahrschienlich zu blind um die Lösung zu sehen die mit Sicherheit genauso einfach ist wie mein vorheriges Problem.
Wie bekomme ich es hin daß dem a Tag die Klasse page-scroll zugewiesen wird?
Wie hier im Original zu sehen ist....

Code: Select all

<li>
<a class="page-scroll" href="#download">Download</a>
</li>

Als RT für die Navigation verwende ich

Code: Select all

{NAV_LIST_UL:PB,0,2,active|nav navbar-nav,active}

Und dann wird das vom System gerendert

Code: Select all

<ul class="nav navbar-nav">
<li class="sub_parent active"><a href="#index" title="Home">Home</a></li>
<li class="sub_no sub_first"><a href="#test-1" title="Test 1">Test 1</a></li>
<li class="sub_no"><a href="#test-2" title="Test 2">Test 2</a></li>
<li class="sub_no"><a href="#test-3" title="Test 3">Test 3</a></li>
<li class="sub_no sub_last"><a href="#test-4" title="Test 4">Test 4</a></li>
</ul>

Jedoch benötigt a die Klasse page-scroll damit das ganze auch gescrollt wird. Die Anker funktionieren, jedoch "springt" die Seite momentan noch zu dem Punkt wenn ein Link geklickt wird.

Den RT für die Navi in

Code: Select all

<a>{RT}</a>

zu setzen klappt schonmal nicht. Wäre ja auch zu einfach gewesen

photojo · Post by **photojo** » Wed 4. Jan 2017, 13:14

Wie sieht denn dein JS aus, das an die Anker scrollt?

Post by **Oliver Georgi** » Wed 4. Jan 2017, 15:34

Die Klasse bekommst Du über die Strukturklasse in den Link. Wenn man es richtig anstellt, ist das alles ganz simpel.

Ich löse OnePager über entsprechende Wahl in der Vorlage und je nachdem über unterschiedliche Bereiche bzw. Custom Logik.

Die Seite wird aufgebaut über die ganz normale Seitenstruktur und Tabs CP, was dann wiederum mittels Renderfunktion genau die Seiten nachlädt und injected. Kann man mittels PHP Lösen oder auch JavaScript über Abfangen der Links und Nachladen per Ajax.

Uwe367 · Post by **Uwe367** » Wed 4. Jan 2017, 15:38

In meinem ersten Post habe ich die Vorlage verlinkt die ich nachbauen möchte. Im Quellcode der selben ist auch die Javascriptdatei graysacle.min.js zu finden. Ich gehe aber davon aus daß dieser Teil für das scrollen zuständig ist.

Code: Select all

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Uwe367 · Post by **Uwe367** » Wed 4. Jan 2017, 15:50

Oliver Georgi wrote:Die Klasse bekommst Du über die Strukturklasse in den Link. Wenn man es richtig anstellt, ist das alles ganz simpel.

Ich vermute du meinst das Feld CSS Klasse in der entsprechenden Strukturebene.

Habe ich auch gedacht, aber dann bekommt das li-tag die Klasse zugewiesen, nicht das a-tag.
Daß das wahrscheinlich recht simpel ist denke ich mir, nur sehe ich wahrscheinlich vor lauter Bäumen den Wald nicht.

Ich habe für die einzelnen Sections Customblöcke angelegt und eine ganz normale Seitenstrutur wie z.B.
+Home
++Test 1
++Test 2
++Test 3
usw. angelegt.
Hast du vielleicht mal ein Beispiel wo man sich deine Lösung anschauen könnte?

Post by **Oliver Georgi** » Wed 4. Jan 2017, 16:52

Uwe367 wrote:In meinem ersten Post habe ich die Vorlage verlinkt die ich nachbauen möchte. Im Quellcode der selben ist auch die Javascriptdatei graysacle.min.js zu finden. Ich gehe aber davon aus daß dieser Teil für das scrollen zuständig ist.
Code: Select all
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Muss man nur leicht umbauen, und schon ist egal, wo die Klasse herkommt, hier wird einfach jeder Link des Menü mit der id=menuid, der ein Ankerlink ist, benutzt. Das ist auch sicherer, da man so auch weiterhin Links nutzen kann, die direkt auf passende Inhalte (extern, intern) verweisen.

Code: Select all

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    var $menu = $('#menuid');
    if($menu.length) {
        var $onepagelinks = $menu.find("a[href^='#']");
        $onepagelinks.bind('touchstart click', function(event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1500, 'easeInOutExpo');
            event.preventDefault();
        });
    }
});

Uwe367 · Post by **Uwe367** » Wed 4. Jan 2017, 18:45

Oliver... das ist superklasse

Ich weiß gar nicht wie oft ich mich bedanken soll.
DANKE DANKE DANKE DANKE
Nun scrollts so wie es soll

Und du hast Recht. Damit kann ich im Prinzip die Startseite als Onepager laufen lassen während ich andere Unterseiten, die von dort verlinkt werden, mit einem ganz normalen Menü versehen kann ohne daß dieses vom Script "attackiert" wird da das Script eben nur auf die angegebene Menü ID triggert.

Besten Dank nochmals

body Tag im Haupttemplate

body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate

Re: body Tag im Haupttemplate