[OnePageWebsite] Kurzanleitung

[tinoo]

Ich kann mich hier mal helfend einklinken:

Hier ein Screenshot von meiner Seitenstruktur:
attachment.jpg

Jetzt zu den Erläuterungen...

Ich habe zwei Seitenlayouts erstellt:

1. "OPW" - ist quasi ein leeres Seitenlayout, welches nur das Modul "Artikel" enthält.
2. "Standard" - ist mein Standardlayout, welches die üblichen Angaben enthält, unter
   anderem das Modul [One-Page-Website:Navigationsmenü], welches die Navigation
   darstellt. Das habe ich im Header eingebunden. Zudem müssen folgende Mootools
   noch geladen werden: moo_smoothScroll, moo_onepagewebsitenavigation. Die
   entsprechende Option ist also noch zu aktivieren!

Die "Startseite" bekommt das Layout "Standard" zugewiesen.

Für die Seite "One Page Referenz" muss man die Optionen "Im Menü verstecken" sowie "In One-Page-Website
verstecken" aktivieren, sowie das Layout "OPW" zuweisen.
Alle Seiten innerhalb der Ebene "One Page Referenz" bekommen ebenfalls das Layout "OPW"
Alle restlichen Seiten bekommen wie üblich das Standardlayout.

In der Startseite habe ich einen normalen Artikel erstellt, und dort mittels Content-Element
Modul das Modul [One-Page-Website: Normale Struktur] eingefügt.

Natürlich müssen die beiden Module vorgängig erstellt werden, damit sie ins Seitenlayout resp. in den Artikel eingebaut werden können.

Auf der Seite "One Page Referenz" habe ich den automatisch erstellten Artikel gelöscht.

In den darunterliegenden Seiten "Willkommen", "Ausbildung" usw. habe ich ganz normal meine Artikel mit Inhalt erstellt, wie man das sonst auch macht.
Diese Artikel (also alles innerhalb der Seite "One Page Referenz") werden dann zu einer One Page Website zusammengefasst.

So sollte alles funktionieren.

Möchte man, dass die Links anstatt #page 1, #page2 usw. mit dem Seitenalias ersetzt werden (z.B. #startseite, #kontakt usw), muss man die beiden Templates opw_default und nav_default ändern. Die Anleitung dazu gibt es unter diesem Link:
https://community.contao.org/de/show...l=1#post271877

[tinoo]

Okidoki, ich habe hier mal eine Beispiel-Website erstellt. Benutze die nachfolgende Anleitung, um die Website
zu installieren. Sollte für den Zugriff aufs Backend dann ein Benutzername / Passwort gefragt werden, probiers
mit webmaster und 12345678. In den Einstellungen sind dann auch noch die eMailadressen foo@foo.bar durch
gültige Mailadressen zu ersetzen... Und natürlich das Passwort ändern

Die notwendige SQL-Datei findest du als Attachement an diesem Beitrag.

Und hier die Anleitung:
#================================================= ===============================
# Website-Template : Contao_Open_Source_CMS.sql
#================================================= ===============================
# Contao-Website : Contao Open Source CMS
# Contao-Database : opw
# Saved by User : webmaster (Heggli Martin)
# Time stamp : 2013-08-15 at 09:39:12
#
# Contao Extension : BackupDB, Version 3.0.0
# Copyright : Softleister (www.softleister.de)
# Author : Hagen Klemp
# Licence : LGPL
#
# Visit Contao project page http://www.contao.org for more information
#
#-----------------------------------------------------
# Contao Version 3.1.1
# Folgende Module müssen installiert sein:
#-----------------------------------------------------
# - OnePageWebsite : Version 2.0.0 stable, Build 16
#
#================================================= ===============================

#------------------------------------------
# Installation:
#------------------------------------------

1. Standard-Paket Contao in der Domain aufbauen.
(z.B. ZIP entpacken und FTP-Upload auf den Webspace)
Noch nicht gleich das InstallTool aufrufen, erst als Punkt 5!

2. Installation aller oben gelisteten Extentions.

3. Speichern Sie dieses Website-Template im Pfad /templates/ ab.

4. Speichern Sie alle für das Website-Template notwendige Dateien
im Pfad /templates/ und /tl_files/ oder Subdirectories (genau
wie bei der Template-Erstellung).

5. Führen Sie jetzt das InstallTool von Contao aus und
importieren das Website-Template.
#--------------------------------------------

Hinweis: Diese Anleitung wurde durch das Modul [BackupDB] erstellt!
Viel Glück

Ergänzungen:

Wer die Höhe der Kopfzeile verändert, muss auch das Offset der Scrollfunktion anpassen! Siehe hierzu
moo_smoothScroll.html5 im /templates Ordner, Zeile 9 "var offsetY = 200;" wobei 200 der Höhe der
Kopfzeile entspricht.

[ciaobello]

Wer wie ich ein Perfektionist ist und in URL und Menu die selben Bezeichnungen wünscht kann das so anpassen:
https://community.contao.org/de/show...l=1#post271877

Mann muss im Backend unter Templates einfach die opw_default & nav_default (html5 oder xhtml, je nach gewähltem Ausgabeformat im Seitenlayout) hinzufügen und mit dem Code vom obigen Link ersetzen.

Oder die zwei anhänge in den Template Ordner des Themes kopieren (musste zippen da html5 nicht akzeptiert wurde).

[tinoo]

Das sollte mit der Beispiel-Website bereits funktionieren!!! Dummerweise habe ich die Seite aber Page 1, Page 2 usw benannt... Also einfach die Seiten umbenennen (Alias löschen und autom. erzeugen lassen!) und dann funktionierts schon ;-)

[tinoo]

Komisch, ich kann z.B. den Namen von "Page 1" in "Willkommen" ändern, den Alias (page-1) löschen und dann speichern - und
dann wird nach einem Refresh im Frontend das Menü von Page 1 auf Willkommen geändert und der Link lautet auf
/#willkommen... Ausser wir reden nicht vom gleichen Jedenfalls sind die von dir verlinkten Templates in meiner Beispiel-
Website schon enthalten.

[tinoo]

... du hast die Vorlage (nav_default) wohl nach /system/module/core/templates/navigation kopiert. Gibst hier im Forum aber nur die Datenbank mit. De Fakto hat eine Neuinstallation doch wieder die Original nav_dafault dabei 3

Nein, die Templates liegen bei mir dort, wo sie sollen: in /templates

Sichert diese Dateien [BackupDB] in dem Fall nicht mit? In dem Sinne ist es also nicht ohne weiteres möglich, ein Paket zu erstellen welches man in einem "Aufwisch" installieren kann? Wir können das auch per PM weiterdiskutieren, nicht dass der Thread hier unnötig mit Beiträgen gefüllt wird... Danke!

[der-pixelversteher]

Hallo,
ich habe das Package erfolgreich installiert. Habe es nun auf Smartphones und Tablets getestet und hier wird die Scrollfunktion nicht richtig ausgeführt.
Habe an der CSS Datei schon herumgespielt, aber leider keinen Lösung gefunden, jetzt wollte ich kurz nachfragen ob es vlt an etwas anderem liegen kann bzw. ob dieses Problem jemand bekannt ist?

http://www.fm-media.at/projekte/sing.../contao-3.1.0/

Sg Markus

[tinoo]

Markus, ich denk da musst du das Offset von der Scrollfunktion anpassen! Schau mal in diesem Beitrag nach, wo und wie das geht: https://community.contao.org/de/show...l=1#post267915

[tinoo]

Markus, da Du mit Smartphones und Tablets testest: Ich habe in der fe_page.html5 "gesündigt" und die Anweisung "<?php echo $this->viewport; ?>" aus der Datei gelöscht... Damit verhindere ich, dass Contao selbstständig die Frontendausgabe in die mobile Version ändert, dh. die Seite wird auf mobilen Geräten so dargestellt wie auf dem PC - mit allen Vor- und Nachteilen...

[der-pixelversteher]

Hallo Martin,
die Anpassung des Offset der Scrollfunktion war die Lösung

Den <?php echo $this->viewport; ?> Tag hatte ich auch schon gelöscht, hatte aber alleine keine Wirkung. Jetzt funkts optimal.
Herzlichen Dank

Sg Markus

[Tim G]

Thema "OPW und News" verschoben nach:
https://community.contao.org/de/show...-News&p=286898

[der-pixelversteher]

Hallo Martin,

ich habe noch eine Frage bezüglich Navigation und einer unerklärlichen weißen Fläche die ich nicht wegbekomme.
Hier die dazugehörige Website: http://www.fm-media.at/projekte/sing...1.0/#impressum

1. Navigation:
kann man den .active status via CSS nicht anpassen? habe da nicht wirklich etwas gefunden...

2. Weiße Fläche
Ganz unten auf der Website habe ich eine weiße Fläche in der Höhe von ca. 16-18px. Ich habe alle CSS Formatierungen durchforstet, doch es ist nichts eingestellt.

Kannst Du mir hierbei vielleicht nochmal helfen?

LG Markus

[MacKP]

Hallo der-pixelversteher,

1. Geht doch mit a.active

2. Hab ich jetzt auf die schnelle auch nicht gefunden. Eventuell irgendwo ein margin-bottom was da stört?

Viele Grüße

[der-pixelversteher]

Hi MacKP,

herzlichen Dank für die rasche Hilfe, die hauptnavi habe ich mit a.active hingebracht, aber die metanav (startseite, kontakt, etc..) nicht, obwohl dies doch gleich wäre, oder habe ich hier einen denkfehler?
bezüglich der weißen fläche, habe ich die kompletten css befehle ausgeblendet und der reihe nach wieder aktiviert bzw. aktualisiert, jedoch war hier kein margin-bottom oder so vorhanden.

das komische an der sache ist, ich habe das problem gestern abend schon analysiert und hier hat es mir im Chrome Entwickler Tool ganz unten ein iFrame angezeigt, dasa hineingeladen wurde.
Heute früh habe ich mir das ganze noch einmal angesehen und dieses iFrame ist nicht mehr da?!

Herzlichen Dank vorab für deine Hilfe....

lg markus

[MacKP]

Hallo der-pixelversteher,
ich weiß nicht was das für eine Metanavi ist. Dort wird der Zustand zumindest nicht vergeben. Also kannst du auch nix mit CSS machen. Da müsste man eventuell erst mit JavaScript ran. Oder die Navi anders einbauen.

Viele Grüße

[ciaobello]

ich weiß nicht was das für eine Metanavi ist.

Scheint eine customnav zu sein. Im gegensatz die andere ist die mainnav vom der OnePageWebseite Erweiterung ...

[malu4online]

Hallo,

danke für die gute Anleitung jetzt stehe ich vor einem Problem wie bekomme ich es hin das die einzelnen Seiten immer 100% des viewport ausfüllen damit man bei großen Bildschirmen nicht schon die nächste Seite sieht?

VG

Martin

[Tim G]

Ich befürchte das kriegst du nur mit javascript hin.


Sent from my iPhone using Tapatalk - now Free

[malu4online]

Das hatte ich mir schon gedacht weißt Du ob es da schon ein fertiges gibt oder ob ich mir das selber bauen muss (leider habe ich noch keine Ahnung von Java)?

VG

Martin

[psren]

Java ist ungleich Javascript ;-)

So in die Richtung kann es gehen.
Habe das aber so nicht getestet, nur schnell runtergeschrieben.

http://jsfiddle.net/H65p8/5/

[psren]

Wäre nett wenn ich mir bescheid sagen könntet wenn das eingebaut ist. Würde ich mir gerne anschauen :-)

[matuweb]

Moin,
ich bin auch gerade an einer OPW und benötige auch genau diese Höhenanpassung .

Wie muss ich deine Beispiele aus dem Link einfügen?

Muss ich jeder Seite die CSS Anweisung z.B. ".site1 .demo-bg1" usw. geben?
Was muss ich einstellen, das der Hintergrund über die komplette Browserbreite geht und nicht nur innerhalb des Main-Bereichs bleibt?
Wie binde ich das Script ein? Über das Seitenlayout?

Danke

[Tim G]

Viele Fragen (die im Grunde nichts mit der Erweiterung zu tun haben ) Eigentlich sind das alles CSS Geschichten. (bissel js)

Was muss ich einstellen, das der Hintergrund über die komplette Browserbreite geht und nicht nur innerhalb des Main-Bereichs bleibt?

Das hängt ja von deinem Aufbau ab und ob jedes OPW Element ein eigenes Bild haben soll. Wenn ja, wirds ne JS Aufgabe, wenn es ein normales Fullscreen Bild ist, gibts viele Anleitungen hier im Forum. Ich empfehle das supersized Script.

Wie binde ich das Script ein? Über das Seitenlayout?

Ja, oder im fe_page, oder per Inserttag

Muss ich jeder Seite die CSS Anweisung z.B. ".site1 .demo-bg1" usw. geben?

Die unterschiedlichen Style Klassen sind nur für die unterschiedlichen Hintergründe. Das Script zur Berechnung der Höhe/Weite sollte auf eine allgemeine Klasse bzw. wie hier HTML Element zielen.

[psren]

Die unterschiedlichen Style Klassen sind nur für die unterschiedlichen Hintergründe. Das Script zur Berechnung der Höhe/Weite sollte auf eine allgemeine Klasse bzw. wie hier HTML Element zielen.

Du kannst in das Script jeglichen Selektor einsetzen der dir Spaß macht / den du für deine "Seiten" verwendest.

[matuweb]

Danke für die Antworten.

Ich habe das Script jetzt 1 zu 1 eingebaut (ins Seitenlayout).

function setToFullHeight(elements){
    // Viewport Höhe auslesen
    var browser_height = window.getSize().y;
    // Als minimalhöhe setzen
    // Sonst werden zu lange Inhalte abgeschnitten
    elements.setStyle('min-height', browser_height); 
};

// Hier musst du deinen Selektor austauschen
var myElements = $$('div');

// Wir brauchen Events bei denen die Funktion ausgeführt werden soll
window.addEvents({
    // Einmal beim Laden der Seite
    'domready': setToFullHeight(myElements),
    // Und beim resizen
    'resize': setToFullHeight(myElements)
});

Bei mir soll immer der komplette Bereich/Seite angepasst werden.

Welchen Wert muss ich noch anpassen bzw. wo weiß das Script, welches DIV in der Höhe angepasst werden soll?

[Tim G]

// Hier musst du deinen Selektor austauschen
var myElements = $$('div');

[matuweb]

Muss ich dort die Klasse des Artikels angeben?

Also in den Artkel-Einstellungen auf bearbeiten und dort die Klasse eintragen?
Oder in den Einstellungen in der Seitenstruktur?

Oder einfach nur"main", damit der gesamte Hauptbereich angesteuert wird?

[psren]

Muss ich dort die Klasse des Artikels angeben?

Ja dort. (steht doch dran?!) Und mit Punkt davor.

Also z.B.: $('.mod_article')

Dann die <script>-Tags drum herum nicht vergessen und ins Layout damit.

[matuweb]

Ich habe es in den head-Bereich der fe_page gesetzt und es funzt nicht.

Muss ich sonst noch etwas einbauen?

[psren]

Ohne Fehlermeldung/Link kann man nur raten (was ich aber nicht machen werde).
Was sagt denn deine Fehlerkonsole der Dev-Tools?

[psren]

@matuweb

Auf deine PM:
Support nur im Threat. Das hilft auch noch anderen die das selbe Problem haben.


Breite geht per CSS. Das Script das ich geschrieben hatte ist für die Höhe von mindestens dem Browserfenster.
Wenn du wirklich die Breite meinst dann liegt der Fehler hier:

#wrapper {
   width: 100%;
   max-width: 960px;
}

Das max-width muss weg.

[matuweb]

Danke für die Hilfe.
Ich meine natürlich auch die Höhe .

Hier der Link zur Seite:

http://www.cremerundschmitz.de

Ich habe auch noch einen Fehler entdeckt.
Wenn das Script für die Höhe aktiv ist, wird die Navigation oben nicht mit der Klasse active deklariert.
Dazu hatte ich das Template entsprechend angepasst (hier gab es einen entsprechenden Code-Schnipsel).

Was muss ich anpassen, damit die Höhe richtig angepasst wird?

[psren]

Die Javascript-Fehler muss man beseitigen.

[matuweb]

Wo kommt der Fehler her?

TypeError: f is undefined
http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js
Line 375

TypeError: h is undefined
http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js
Line 367

}else{f.apply(this,c);}},this);return this;},cloneEvents:function(e,d){e=document.id(e);var c=e.retrieve("events");if(!c){return this;}if(!d){for(var b in c){this.cloneEvents(e,b);

Also der Fehler liegt in dem neuen Script für die Höhe.
So sieht es aus:

<script>
function setToFullHeight(elements){
    // Viewport Höhe auslesen
    var browser_height = window.getSize().y;
    // Als minimalhöhe setzen
    // Sonst werden zu lange Inhalte abgeschnitten
    elements.setStyle('610px', browser_height); 
};

// Hier musst du deinen Selektor austauschen
var myElements = $$('.page');

// Wir brauchen Events bei denen die Funktion ausgeführt werden soll
window.addEvents({
    // Einmal beim Laden der Seite
    'domready': setToFullHeight(myElements),
    // Und beim resizen
    'resize': setToFullHeight(myElements)
});
</script>

Was bedeutet dies?

// Wir brauchen Events bei denen die Funktion ausgeführt werden soll

Was muss ich machen?

[Tim G]

Das kann nicht stimmen! Richtig abschreiben!

    // Sonst werden zu lange Inhalte abgeschnitten
elements.setStyle('610px', browser_height);

setStyle erwartet als ersten Parameter die CSS Definition, dann den Wert.

Ich glaube Du willst sowas

elements.setStyle('max-height', browser_height+'px');

Ich verschiebe dann mal den ganzen Kram, der hat in diesem Thread nichts zu suchen.

[ciaobello]

...

@andea$ ... es ist zu anstrengend ...

[Gandalf]

Hallo

Wollte das ganze unter 3.2.9 installieren. Bekomme beim Versuch das Template (Tinoo's OPW Beispiel) zu importieren eine Fehlermeldung:
Der Import konnte nicht abgeschlossen werden! Ist die Datenbankstruktur aktuell und die Template-Datei kompatibel mit Ihrer Contao-Version?
Scheint wohl noch nicht mehr kompatibel zu sein...

[ciaobello]

Installiere die 3.2.7 importiere die DB und danach kopierst du die 3.2.9 manuell drüber. Und wenn Du lust hast, machst nach dem Update ein Backup mit backupDB und postest es hier wieder.

[chinagirl]

Ergänzungen:

Wer die Höhe der Kopfzeile verändert, muss auch das Offset der Scrollfunktion anpassen! Siehe hierzu
moo_smoothScroll.html5 im /templates Ordner, Zeile 9 "var offsetY = 200;" wobei 200 der Höhe der
Kopfzeile entspricht.

hi tinoo!

danke, dass du die beispielseite angelegt hast, ist wirklich eine hilfe!

sag hast du bei dieser seite die 200 px für den header in der moo_smoothScroll.html5 eingetragen?
bei mir sieht es nicht danach aus, die seiten rutschen unter die kopfzeile.
wenn ich in die datei moo_smoothScroll.html5 die zeile
var offsetY = 200;
wie beschrieben einsetze, ergibt es keine veränderung, die seite rutscht weiterhin unter den header.

was könnte ich falsch gemacht haben?

lg, chinagirl

[Tim G]

hi tinoo!

danke, dass du die beispielseite angelegt hast, ist wirklich eine hilfe!

sag hast du bei dieser seite die 200 px für den header in der moo_smoothScroll.html5 eingetragen?
bei mir sieht es nicht danach aus, die seiten rutschen unter die kopfzeile.
wenn ich in die datei moo_smoothScroll.html5 die zeile
var offsetY = 200;
wie beschrieben einsetze, ergibt es keine veränderung, die seite rutscht weiterhin unter den header.

was könnte ich falsch gemacht haben?

lg, chinagirl

Gib deinem #container ein margin-top:200px; dann stimmt das offsetY und der #container rutscht nicht unter den #header