Gantry Framework Gantry Framework ist eine Art Tabelle (Grid), in der man in den Zellen die jeweiligen Beiträge und sonstigen Bereiche positionieren kann. Gantry Framework downloaden Über Google nach Gantry Framework suchen oder wählen Sie gleich http://www.gantry-framework.org/. Dieses Framework ist auch für kleinere Geräte geeignet, Smartphone, Handy. Diese Ausgabe passt sich an die Größe des Ausgabegerätes an. Responsives Design. Download Gantry SEITE - 1 -
Gantry Template Bundle downloaden Die derzeit aktuelle Datei: gantry-4.1.29-bundle.zip wird heruntergeladen Gantry Framework installieren Kontrollzentrum / Erweiterungen / Erweiterungen / Datei: gantry-4.1.20-bundle.zip hochladen Hochladen & Installieren SEITE - 2 -
Hier wird in dem Template ein eigenständiges Modul für das Menü verwendet. RokNavMenu Modul SEITE - 3 -
Template aktivieren Kontrollzentrum / Erweiterungen / Templates / Frontend Achtung Die alten Module aus dem vorherigen Template sind nicht mehr sichtbar. Das wird nun geändert. Stile (Aussehen) der Website einstellen Erweiterungen / Templates / Register: Stile / Gantry Default anklicken SEITE - 4 -
Anzeige auf einem Smartphone Wenn für die Anzeige eine feste Breite festgelegt wurde, erscheint die Homepage auf einem Smartphone viel zu groß. Sie müssen ständig scrollen, um alles zu sehen. Responsives Design für das Frontend einrichten Erweiterungen / Templates / Gantry-Default anklicken / Advanced Layout Mode: von 960px Fixed umstellen auf Responsive Die Module werden auf dem Smartphone dann untereinander angezeigt. Klappt ein Menü auf Responsives Design für das Kontrollzentrum einrichten Ist durch die obigen Einstellungen automatisch auf responsiv. SEITE - 5 -
Layout Modus auf 960px fixieren (wird schmaler) Erweiterungen / Templates / Gantry-Default / Register: Advanced Layout Mode = 960px Fixed Save Logo gantry durch ein eigenes Logo ersetzen Im Google-Frontend das Logo mit der rechten Maus anklicken / Element untersuchen Online-Pfad zum Logo: www.rneuhoff.eu/business / templates / gantry / images/ logo / dark / logo.png Auf dem lokalen PC: C:\xampp\htdocs\theaterportal\templates\gantry\images\logo\dark\logo.png Logo-Bilddatei einfach austauschen Diese Datei logo.png könnten Sie durch ein anderes Logo (Bild-Datei) ersetzen, z.b. im Ordner dark / Neues_Logo.jpg SEITE - 6 -
Logo gantry durch ein eigenes Logo mit Text ersetzen Erweiterungen / Templates / Gantry-Default / Register: Style Logo / Show: OFF Position merken header-a / Type: custom Save / Close Modul für Text-Logo erstellen Erweiterungen / Module / Neu / Modultyp: Eigene Inhalte (Leeres Modul) Titel: Position: Titel anzeigen: Textbereich: Logo Gantry header-a Verbergen Joomla-City Design Gantry inklusive Formatierung Speichern & Schließen SEITE - 7 -
Frontend mit neuem Text-Logo Die alten Module, wie z.b. Login, Video, aktuelle Beiträge usw. sind nicht sichtbar, da sie noch die Positionierung vom vorherigen Menü besitzen. SEITE - 8 -
Gantry-Layout der Seite einstellen Erweiterungen / Templates / Gantry-Default / Menü: Layouts Das sind die möglichen Positionen von oben nach unten aufgelistet Die Zahlen bei Positions ermöglichen es festzulegen, wie viele Spalten die Zeile hat Die Buchstaben bezeichnen die Spalten (maximal bis f) Mit den Schiebereglern darunter verändern Sie die Breite jeder Spalte SEITE - 9 -
Die Positionen im oberen Bereich Erweiterungen / Templates / Register: Templates / Gantry-default / Vorschau Die Positionen sind so komfortabler sichtbarer als durch das Anhängen von?tp=1 Top header drawer Showcase feature utility breadcrumb maintop fullwidth content.top sidebar SEITE - 10 -
Positionen im mittleren und unteren Bereich ab Inhalt im <body> Kontrollzentrum / Erweiterungen / Templates / Register: Templates / Gantry-default / Vorschau Content.bottom mainbottom extension bottom footer copyright debug analytics SEITE - 11 -
Erläuterungen Die oberste Zeile Top Positions weist 4 Spalten auf, die gleichmäßig verteilt wurden. Die Zeile darunter Header Positions weist 2 Spalten auf, die auch jeweils gleich breit sind. usw. Logo an Top Positions platzieren bei a Diese Einstellung nehmen Sie in Joomla vor Erweiterungen / Module / Logo anklicken / Position: Top A [top-a] Speichern & Schließen SEITE - 12 -
Das Modul für das Logo erscheint ganz oben in der ersten Zeile links SEITE - 13 -
Das Menü, das rechts etwas gedrängt erscheint in ein Reihe bringen Erweiterungen / Module / Logo Gantry Joomla-City anklicken Position von header-a in top-a ändern Speichern & Schließen Frontend SEITE - 14 -