Für wen ist dieses Handbuch?

Für:

• Redakteur*innen, die Inhalte und Dokumente pflegen, Layouts und Basis-Einstellungen ändern wollen, siehe Redakeur*innen
• TYPO3-Administrator*innen, die TYPO3 GRÜNE installieren und einrichten wollen, siehe Administrator*innen
• Entwickler*innen, die TYPO3 GRÜNE erweitern und an individuelle Wünsche anpassen wollen, siehe Entwickler*innen.

Inhalt

Desktop

Smartphone

Ohne TYPO3 GRÜNE

Das Corporate Design von BÜNDNIS 90/DIE GRÜNEN kann mit wenigen Handgriffen entfernt werden. Ohne TYPO3 GRÜNE sieht die Website wie abgebildet aus. Zusätzlich zum ausgewählten Theme White stehen weitere Farbthemen schlüsselfertig zur Verfügung.

TYPO3

Modul Web: TYPO3 GRÜNE

Löschen

Du kannst TYPO3 GRÜNE auch wieder löschen.

Dabei wird aufgeräumt

• die Datenbank einschließlich MM-Tabellen
• die zuvor installierten Dateien

Redakteur*in

Administrator*in

Wenn Du TYPO3 GRÜNE installieren oder konfiguriren möchtest, brauchst Du:

Installation

• TYPO3-Agenturen
• TYPO3-Entwickler*innen
• TYPO3-Administrator*innen

Nutzung

• TYPO3-Redakteur*innen

Voraussetzungen

Du solltest Erfahrungen mit TYPO3 haben und grundsätzlich wissen, wie TYPO3 funktioniert.

Video-Anleitungen

Falls Du Dir Unterstützung für den grundsätzlichen Umgang mit TYPO3 holen willst, sieh Dir eine der Video-Anleitungen an:

• TYPO3 7.6 Video-Anleitung
• TYPO3 6.2 Video-Anleitung

Aufbau von TYPO3

Dieses Kapitel erläutert die grunsätzliche Arbeitsweise mit TYPO3 wie etwa

• Backend und Frontend
• Aufbau des Backends
• Der Seitenbuam
• Seiteninhalte

Siehe Getting Started Tutorial > General Principles

Das Listenmodul

Dieses Kapitel erläutert die grunsätzliche Arbeitsweise im Listen-Modul wie etwa

• Effektive Arbeitsweise
• Das Klemmbrett
• Massenweise Seiten, Inhalte und Dateien bearbeiten

Siehe Getting Started Tutorial > List Module

Verzeichisse uns Dateien

Deine Dateien verwaltest Du mit dem Datei-Modul.

Siehe Getting Started Tutorial > File Module

Setup

• Klicke oben rechts auf Deinen Benutzernamen
• Klicke im Pop-Up auf [Einstellungen]

Was ist das?

Zur Corporate Identity zählt das Corporate Design und darüber hinaus unter anderem:

• unser Name oder die Bezeichnung unserer Gliederung
• unsere Kontaktdaten
• Links zu unseren soziale Medien

Inhalt

Corporate Identity

Bestimmte Eigenschaften der Corporate Identity steuerst Du zentral mit einem User-Interface.

Zu diesen Eigenschaften zählen:

• Grünen-spezifische Bezeichnungen wie

  • Name und Kurzbezeichnung der Mandatsträger*in (in der Kopfzeile und im Menü)
  • Name und Kurzbezeichnung der Gliederung (in der Kopfzeile und im Menü)
• Adresse, Telefonnummer und E-Mail-Adresse (in der Fußzeile)
• Banner Grüne Kampagnen (in der Marginal-Spalte)
• Links auf soziale Medien (in der Kopfzeile)
• Hintergrundgrafik

Einstellungen

Hier kannst Du das Design und das Verhalten einstellen zu:

• Banner
• Kontaktdaten
• Layout
• Person / Gliederung
• Socialmedia
• Stil
• Wallpaper

Noch mehr: Seiten-Eigenschaften

Wenn das Modul etwas nicht leisten kann, gibt es weitere Möglichkeiten. Siehe

• Eigenschaften

Tipp

• Der Weg zu den Seiten-Eigenschaften.
• Modul im Extension Manager

Tipp

Zentrale Eigenschaften solltest Du einstellen mit dem Modul TYPO3 GRÜNE

Was ist das?

Unser Corporate Design besteht aus ein paar Eigenschaften, die Grüne Websites - und auch Print-Publikationen wie Broschüren, Plakate und Flyer - wiedererkennbar machen sollen.

Zu diesen Elementen zählen unter anderem

• unsere Sonnenblume
• ein lebendiger grüner Hintergrund
• definierte Schriften
• definierte Farben

Steuerung

Abbildungen

Steuerung

• Panels: Design-Eigenschaften

Tipp

Seiten-Inhalte

Abbildungen

Steuerung

• Ränder: Design-Eigenschaften

Tipp

Seiten-Inhalte

Abbildungen

Steuerung

Du kannst bestimmte Layout-Eigenschaften zuweisen und ändern. Dazu zählen unter anderem:

• Bilder als Kreis darstellen, Schatten hinterlegen oder die Bildunterschrift bei Smartphones verstecken.
• Schrift: hell auf dunkel. Etwa für Text in der rechten Randspalte, die einen grünen Hintergrund hat.
• Silbentrennung ab- und anschalten
• Text-Ausrichtung

Siehe

• Design-Eigenschaften

Tipp

• Seiten-Inhalte

Individuell gestalten

Der Fußbereich kann auch individuell gestaltet werden:

• Die Administrator*in entfernt im Constant Editor die Zuweisung des Ordners Footer. Siehe [START - PAGES] > Footer.
• Du gestaltest den Bereich "Footer" auf Deiner Startseite entsprechend Deiner Wünsche.

Erfassen

• Modul: Web > Liste
• Seitenbaum: Ordner mit Symbol und Bezeichnung "Nachrichten"
• Bearbeitungsfenster: Nachrichten-Formular

Plugin

Die Darstellung wird mit dem xBlog-Plugin verwaltet.

Das Plugin befindet sich auf der Seite, die im Frontend die Nachrichten darstellt.

Bei Nachrichten in der Regel:

• Auf der Startseite
• Auf der Seite Aktuelles oder Nachrichten

Erfassen

• Modul: Web > Liste
• Seitenbaum: Ordner mit Symbol und Bezeichnung "Kalender"
• Bearbeitungsfenster: Kalender-Formular

Veranstalter und Orte

Erfassen

• Modul: Web > Liste
• Seitenbaum: Ordner mit Symbol und Bezeichnung "Veranstalter"
• Bearbeitungsfenster: Veranstalter-Formular

Erfassen

• Modul: Web > Liste
• Seitenbaum: Ordner mit Symbol und Bezeichnung "Orte"
• Bearbeitungsfenster: Formular für Orte

Weiterer Inhalt

Arbeitsablauf

Beispiel: Breiten- und Längengrad für den Bayerischen Landtag.

Warum?

Mit Akkordions und Reitern (Tabs) kannst Du eine Menge Inhalt bei geringem Platzverbrauch unterbringen. Die Struktur des Inhalts kann von der Besucherin Deiner Website schnell erfasst werden. Du kannst der Besucherin Informationen in einer Menge anbieten, die normalerweise nicht auf eine Bildschirmseite passen, die Besucher*in aber lesen kann, ohne Scrollen zu müssen.

Arbeitsablauf

• Du öffnest im Backend die Seite, auf der Du das Accordion oder die Reiter einsetzen möchtest.
• Du fügst das Inhaltselement [Raster-Element] ein.
• Du wählst das Raster-Layout [Start: Accordion & Tabs]
• Du wählst den Section Type [Accordion]
• Speichern und Schließen
• Jetzt kannst Du dem Accordion oder den Tabs beliebig viele Text-Element zuordnen

Arbeitsablauf

• Bilder, die Du benutzen möchtest, solltest Du mit dem Datei-Manager hochladen. Siehe Modul: Datei > Dateiliste
• Hochgeladene Bilder kannst Du in entsprechenden Inhaltselementen wie "Text und Bilder" einbinden.

• Als Inhaltstyp ist empfohlen:

  • Bilder: "Text und Bilder" oder "Bilder"
  • Bildergalerie: Orbit

Rechtliches

Du kannst Urhebervermerke an verschiedenen Stellen hinterlegen.

Hochgeladenes Bild

Empfehlenswert ist es, nötige Urhebervermerke beim hochgeladenen Bild zu hinterlegen (siehe Screenshot). Denn diese werden übernommen, wenn das Bild von einer Redakteur*in irgendwo auf der Website eingebunden wird.

Eingebundenes Bild

Bei eingebundenen Bildern kannst Du die Vorgabewerte überschreiben. Hier kannst Du Urhebervermerke hinterlegen, wenn es keine Vorgabewerte gibt, oder diese bei den Vorgabewerten fehlen:

Deaktivieren

Die Symbol-Bilder können im Browser-Plugin deaktiviert werden:

• Browser Plugin > Plugin > Listenansicht > Symbol-Bilder: [ ] Deaktivieren

Arbeitsablauf

Weiterführende Informationen

• Powermail Handbuch (englisch)

  • https://docs.typo3.org/typo3cms/extensions/powermail Für TYPO3-Redakteur*innen von Interesse: Editors

Arbeitsablauf

So fügst Du einen Jumboteaser ein:

• Bereich: Kopf
• Inhaltselement: Jumboteaser

Jumboteaser

• Du wählst das Bild im Reiter [Bild] aus. In der Abbildung oben: (1).
• Alles weitere erledigst Du unten bei den "Erweiterungsoptionen" (2).
• Überschrift, Unterzeile, Bezeichnung und Link des Buttons siehe in der Abbildung (3).
• Wie stark das Bild abgedunkelt und wie es positioniert werden soll, kannst Du im Reiter [Bild] einstellen (4).

Arbeitsablauf

• Füge als Inhaltselement das Plugin "Fetch and Display a RSS Feed" ein.
• Richte das Plugin ein. Es sollte selbsterklärend sein.

RSS-Feed finden

Wenn Du die URL des News-Feeds nichts kennst, dessen Nachrichten Du übernehmen willst, kannst Du im Quellcode der Website nachsehen, ob ein solcher Feed angeboten wird:

• Lade die Website in Deinem Browser
• Klicke die rechte Maustaste
• Wähle den Menü-Eintrag "Seitenquelltext anzeigen"
• Suche im Quelltext nach dem Begriff "alternate"
• Im Attribut "href" ist die URL hinterlegt.

Wenn der Begriff "alternate" nicht gefunden wird, bietet die Website wahrscheinlich keinen RSS-Feed an. Wahrscheinlich heißt: Die Website kann auch falsch konfiguriert sein. In diesem Fall hilft ein Anruf beim Website-Betreiber.

Hinweis zu TYPO3 GRÜNE OPEN SOURCE

• Die Erweiterung EXT:rss_display muss installiert und eingerichtet sein. Siehe RSS Display
• TYPO3 GRÜNE MANAGED verwendet eine für Grüne Websites optimierte Erweiterung rss_display. Wenn Du diese haben möchtest, seine eine E-Mail an @Dirk Wildt, Die Netzmacher

Nachrichten anbieten

Bei TYPO3 GRÜNE MANAGED und OPEN SOURCE sollte alles so eingerichtet sein, dass Deine Website Nachrichten als Feed herausgibt. Und diese von anderen übernommen werden können. Siehe:

• Administrator*innen > Best Practice > RSS

Arbeitsablauf

• Du öffnest Im Backend die Seite, auf der Du den Slider einbinden möchtest.
• Du fügst das Inhaltselement [Orbit] ein.
• Du fügst im Reiter [Bilder] die Bilder hinzu, die der Slider anzeigen soll.

Voraussetzungen

• Das Video ist auf einer Plattform wie vimeo oder youtube veröffentlicht.
• Die Plattform liefert den Code zum Einbinden.

Einbinden

Du kannst Videos an beliebigen Positionen einbinden zum Beispiel:

• im Content-Bereich
• in einer Randspalte

Arbeitsablauf

• Du öffnest Im Backend die Seite, auf der Du das Video einbinden möchtest.
• Du fügst das Inhaltselement [Flexible Video] ein.
• Im Reiter [Allgemein] im Feld "Source" fügst Du den Code ein, die Dir die Video-Plattform liefert.

Erläuterung

Das Beispiel verwendet das Layout Start Silver I.

Das Layout ist wie folgt aufgebaut:

• Kopfzeile

• Mittlerer Bereich mit zwei Zeilen

  • Erste Zeile mit drei Spalten

  • Zweite Zeile

    • Links: Inhalt (Content)
    • Rechts: Marginal-Spalte
• Fußzeile

Tipp

Der Weg zu den Seiten-Eigenschaften.

Tipp

Grundsätzlich das einfachste Layout wählen.

Für Grüne Websites sind als Standard empfehlenswert:

• Start Bronze II (mit Randspalte)
• Start Bronze I (ohne Randspalte)

Vererbung

Die Einstellung werden auf untergordnete Seiten solange vererbt, solange auf Unterseiten keine neuen oder abweichenden Einstellungen vorgenommen worden sind.

Du kannst also auf Unterseiten andere Layouts verwenden.

Achtung: Änderungen am layout können Besucher*innen Deiner Website verwirren. Die Layouts sollten auf Unterseiten nur geändert werden, wenn es für diese Änderungen einen guten Grund gibt.

Regel

Weniger ist mehr!

Diese Möglichkeit sollte nur sehr sparsam eingesetzt werden.

Zu viel Gestaltung bringt die Besucher*innen Deiner Website durcheinander.

Eigenschaften

• Bilder
• Breite
• Container
• Effekte
• Formular
• Hintergrund
• Panel
• Ränder
• Schatten
• Schrift
• Text
• TYPO3 GRÜNE

Eigenschaften zuweisen

• Bearbeitungsfenster > Seiten-Inhalt > Reiter [Erscheinungsbild]
• Auswahl-Menü [CSS-Klasse (definiert): Verfügbare Objekte]

Schütteln

Du kannst Inhaltselementen die Eigenschaft zuweisen:

• Schütteln bei Mouse-Over

Zuweisen

Siehe Design-Eigenschaften

Einrichten

Seiten-Eigenschaften > Erscheinungsbild > Frontend-Layout: [Start: transparenter Inhaltsbereich]

Defekte Links bearbeiten

1. Wähle weiterhin die Linkvalidierung aus
2. Wähle den Reiter [Bericht] aus
3. Wähle die Art der Links aus, die Du prüfen möchtest
4. Sende Deine Formular-Daten mit Klick auf den Button [Ansicht aktualisieren].
5. In der Ergebnisliste kannst Du die Seite oder das Inhaltselement aufrufen und direkt bearbeiten, dass den defekten Link enthält.

Bearbeiten

Randspalten im Frontend korrespondieren mit Randspalten im Backend.

Wenn Du eine Randspalte einer Seite gestalten möchtest, öffne die entsprechende Seite im Backend:

• Web > Seite
• Seitenbaum: die gewünschte Seite
• Bearbeitungsfenster: Gewünschte Spalte

Vererbung

Die Inhalte einer Randspalte werden solange an die entsprechende Randspalte der Unterseiten weitergegeben (vererbt), solange die entsprechende Randspalte leer ist.

Sinn und Zweck

Du kannst mit einem Mega-Menü Untermenüs Deiner Haupt-Navigation ersetzen.

Das Mega-Menü kannst Du individuell gestalten – etwa in Spalten und mit Bildern.

Ein Mega-Menü kann sinnvoll sein, wenn in einem Untermenü viele Ebenen dargestellt werden und Du Deinen Besucher*innen ersparen willst, sich in den verschachtelten Einträgen zurecht zu finden.

Gestalten

1. Du richtest außerhalb der Navigation eine Seite ein etwa mit dem Namen "Mega-Menü Die Grünen"
2. Du gestaltest diese Seite so wie Du es möchtest. In der Abbildung oben sind beispielsweise vier Spalten angelegt, die jeweils mit dem Inhaltselement "Menü Unterseiten" bestückt sind.

Einsetzen

1. Bearbeite die Eigenschaften der Seite im Hauptmenü, dem Du das Mega-Menü zuordnen willst. In der Abbildung oben: Hauptmenü > Die Grünen
2. Wähle den Reiter [TYPO3 GRÜNE] und unten das Feld "Mega-Menü". Wähle hier die von Dir eingerichtete Seite mit dem Mega-Menü aus.

Header (Kopfgrafik)

Tausche den Header bzw. die Kopfgrafik gegen die von Dir gewünschte aus.

• Modul-Leiste > Web > Seite
• Seitenbaum: Mailings
• Bearbeitungsfenster: Inhalts-Element Header

Fußzeile (Kontakt)

Ändere die Fußzeile entsprechend Deiner Anforderungen.

• Modul-Leiste > Web > Seite
• Seitenbaum: Mailings
• Bearbeitungsfenster: Inhalts-Element Footer

Steuerung

• Füge in Deinem Newsletter das Inhaltselement "Datensatz einfügen" ein.
• Einen Kalender-Eintrag fügst Du hinzu, in dem Du auf den Button [Kalender] klickst. In der Abbildung in der untereren roten Markierung.
• Eine Nachricht fügst Du hinzu, in dem Du auf den Button [Nachrichten] klickst. In der Abbildung in der untereren roten Markierung.

Hinweis

Das Inhaltselement "Datensatz einfügen" hat keine eigene Überschrift. Die von Dir vergebene Überschrift wird im Frontend also nicht angezeigt.

Wenn Du über dem Inhaltselement eine Überschrift haben willst wie etwa "Veranstaltungen" oder "Neuigkeiten", füge ein Inhaltselement "Überschrift" ein.

Voraussetzungen

Termine, die im Newsletter erscheinen sollen, müssen die Eigenschaft Newsleter aktiviert haben.

Du kannst die Eigenschaft Newsletter hier an- und abschalten:

• Kalender-Eintrag

  • Reiter [Steuerung] > Eigenschaft "Newsletter".

Siehe auch Kalender.

Steuerung

Termine werden mit dem Browser-Plugin gesteuert:

• Anzahl
• Filter: Es werden nur Termine berücksichtigt, bei denen der Newsletter aktiviert ist (siehe oben).

Die Eigenschaften kannst Du hier ändern:

• Modul-Leiste > Web > Seite
• Seitenbaum: Mailings > Newsletter
• Bearbeitungsfenster: Inhalts-Element "Veranstaltungen und Termine" > Reiter [Plugin]
• Reiter [Listen-Ansicht] > Limit records per page (Anzahl der Einträge)

• Reiter [Templating] > Datenbankabfrage

  • Du kannst die Abfrage entfernen: "Calendar items for newsletter only". Dann werden alle Termine angezeigt, unabhängig davon, ob diese den Newsletter aktiviert oder deaktiviert haben.

Archivierung

Eine Archivierung des Newsletter mit einem Plugin für Termine ist praktisch nicht möglich, da das Plugin Änderunghen bei den Terminen aktualisiert. Zu einem späteren Zeitpunkt würden also aktuellere Termine angezeigt werden.

Entfernen

Wenn Du keine Kalender-Einträge im Newsletter verwenden möchtest, blendest Du das Browser-Plugin aus.

Voraussetzungen

Nachrichten, die im Newsletter erscheinen sollen, müssen die Eigenschaft Newsleter aktiviert haben.

Du kannst die Eigenschaft Newsletter hier an- und abschalten:

• Nachrichten

  • Reiter [Steuerung] > Eigenschaft "Newsletter".

Siehe auch Kalender.

Steuerung

Nachrichten werden mit dem Browser-Plugin gesteuert:

• Anzahl
• Filter: Es werden nur Nachrichten berücksichtigt, bei denen der Newsletter aktiviert ist (siehe oben).

Die Eigenschaften kannst Du hier ändern:

• Modul-Leiste > Web > Seite
• Seitenbaum: Mailings > Newsletter
• Bearbeitungsfenster: Inhalts-Element "Nachrichten" > Reiter [Plugin]
• Reiter [Listen-Ansicht] > Limit records per page (Anzahl der Einträge)

• Reiter [Templating] > Datenbankabfrage

  • Du kannst die Abfrage entfernen: "News items for newsletter only". Dann werden alle Nachrichten angezeigt, unabhängig davon, ob diese den Newsletter aktiviert oder deaktiviert haben.

Archivierung

Eine Archivierung des Newsletter mit einem Plugin für Nachrichten ist praktisch nicht möglich, da das Plugin Änderunghen bei den Nachrichten aktualisiert. Zu einem späteren Zeitpunkt würden also aktuellere Nachrichten angezeigt werden.

Entfernen

Wenn Du keine Nachrichten im Newsletter verwenden möchtest, blendest Du das Browser-Plugin aus.

Empfehlung: Finger weg von komplexen Layouts!

Der Newsletter ist grundsätzlich optimiert für Smartphone, Tablet und Desktop. Komplizierte Layouts können das Layout und die Funktionsweise insbesondere auf Smartphones und Tablets kaputt machen bzw. einschränken.

Verzichte auf komplizierte Layouts und besondere Inhaltselemente wie etwa Tabellen.

Voraussetzungen

• Dir müssen die Rechte für das Versenden eines Newsletters eingeräumt sein.

  • Hast Du diese Rechte nicht, wende Dich bitte an Deinen TYPO3-Administrator.
• Es müssen im Ordner "Abonnent*innen" E-Mail-Adressen für den Versand hinterlegt sein.

Ablauf

• Modul-Leiste > Direct Mail > Direct Mailer
• Seitenbaum: Mailings
• Bearbeitungsfenster: Internal Pages / Interne Seiten
• Wähle die Seite aus, die Du als Newsletter versenden willst.

Der Assistent von Direct Mail führt Dich bis zum Versand.

• Grundsätzlich musst Du nichts machen, als den Button [Weiter] zu klicken.

• Schritt 4: Trage Deine E-Mail-Adresse ein und sende den Newsletter an Dich. Prüfe in Deinem E-Mail-Programm ob der Newsletter Deinen Erwartungen entspricht.

  • Wenn alles in Ordnung ist: Gehe zu Schritt 5.
  • Wenn Du was ändern möchtest: Ändere Deinen Newsletter und beginne den Versand von vorne.
• Schritt 5: Versende den Newsletter an die vorgeschlagene Liste oder eine der vorgeschlagenen Listen mit den Empfängern.

Steuerung

Die Eigenschaften kannst Du hier ändern:

• Modul-Leiste > Web > Seite

• Seitenbaum: Footer > Website > Newsletter

  • Anmelden bzw.
  • Abmelden

• Bearbeitungsfenster:

  • Inhalts-Element [Formular: Newsletter Anmelden] bzw.
  • Inhalts-Element [Formular: Newsletter Abmelden]

Urhebervermerk

Jedes Bild hat eine Urheberin, die Fotografin.

Die Urheber*in hat exklusiv alle Nutzungsrechte und kann diese beschränkt oder unbegrenzt an Dritte weitergeben.

Eine kostenlose und uneingeschränkte Nutzung ist häufig daran gebunden, einen sogenannten Urhebervermerk bei einem veröffentlichetn Bild an bestimmter Stelle anzubringen.

Wir Du das bei TYPO3 GRÜNE machen kannst, steht hier:

• Redakteur*innen > Inhaltselemente > Bilder > Veröffentlichen.

Inhalt

Diese Informationen sollte Euer Impressum enthalten:

• Name und Anschrift, unter der die Website-Betreiber*in (Deine Gliederung bzw. Du) erreichbar ist.
• Bei juristischen Personen zusätzlich die Rechtsform und den Vertretungsberechtigten.
• Angaben, die eine schnelle elektronische Kontaktaufnahme und unmittelbare Kommunikation ermöglichen.

Weiterführende Informationen

Genauer erklärt die Anforderungen:

• https://de.wikipedia.org/wiki/Impressumspflicht

Rechtschreibprüfung

Du bedienst die Rechtschreibprüfung mit einer gedrückten <STRG>- oder <CTRL>- und der rechten Maustaste. In der Regel musst Du ein einziges Mal die Sprache einstellen (Deutsch statt Englisch). Willst Du ein bemängeltes Wort durch einen Vorschlag ersetzen, klickst Du dies ebenfalls mit <STRG> und rechter Maustaste an. Die Rechtschreibprüfung schlägt Dir normalerweise das korrekt geschriebene Wort vor. Du kannst die Aktion auch dazu benutzen, um unbekannte Wörter der Rechtschreibprüfung hinzuzufügen.

Dieses Feature muss von der Administrator*in freigeschaltet werden.

Plugins

Der Rich-Text-Editor kann um einen sogenannten Color-Button erweitert werden.

Schriftfarben und Schrifthintergründe können dann indviduell gestaltet werden.

Dieses Feature muss von der Administrator*in freigeschaltet werden.

Regel

Weniger ist mehr: Text-Formatierungen so sparsam wie möglich verwenden.

Tipp

Wenn Du mit Seiten-Eigenschaften nicht vertraut bist, sieh Dir diese an einer Seite in Deiner TYPO3-Installation einmal an.

Der Weg zu den Seiten-Eigenschaften.

Inhalt

Voraussetzung

Die Funktion muss von der Administrator*in freigeschaltet sein.

Live

• typo3-gruene.de > TYPO3 GRÜNE > Features > Wallpapers

Regel

Weniger ist mehr!

Die Möglichkeit abwechselnder Hintergrundbilder sollte nur eingesetzt werden, wenn es hierfür einen klaren funktionalen Grund gibt. Etwa:

• Grundsätzlich andere Gestaltung der gesamten Website
• Unterseite eines Ortsverbands.

Eine Seite mit einem anderen Hintergrundbild kann die Besucher*innen Deiner Website verwirren:

• "Bin ich jetzt auf einer anderen Website?"
• "Bin ich nicht mehr bei den Grünen?"

Empfehlung

Seiten-Inhalte können komplex und vor allem individuell gestaltet werden. Das ist der Vorteil.

Der Nachteil ist, dass diese Form der Veröffentlichung mit hohem Aufwand verbunden ist.

Der häufigste Anwendungsfall für Grüne Websites ist die Veröffentlichung von Nachrichten, der zweithäufigste die Veröffentlichung von Kalendereinträgen.

Benutze also grundsätzlich das Nachrichten-Modul und den Kalender.

Seiten-Inhalt

Seiten-Inhalt ist das, was die Besucher*innen Deiner Seite sehen sollen:

• Texte
• Bilder
• Links auf Dokumente, andere Seiten oder Websites

Inhalt wird auf der Seite mit sogenannten Inhalts-Elementen eingefügt.

Inhalts-Elemente

Corporate Design

• Bilder
• Farbige Kästen
• Randlos
• Schrift auf dunklem Hintergrund
• Silbentrennung
• Text-Ausrichtung

Tipp

Wenn Du mit Inhalts-Elementen nicht vertraut bist, sieh Dir diese an einer Seite in Deiner TYPO3-Installation einmal an.

Kalender

Für Kalender-Einträge können Icons mit Links zu sozialen Medien aktiviert und deaktiviert werden.

Nachrichten

Für Nachrichten können Icons mit Links zu sozialen Medien aktiviert und deaktiviert werden.

Ranking verbessern!

Für Suchmaschinen hinterlegte Stichworte und Beschreibungen verbessern die Positionierung Grüner Inhalte auf den Seiten der Suchmaschinen-Anbieter spürbar.

Wir haben ein Interesse daran:

• Unsere Websites werden häufiger besucht, die Reichweite unserer Inhalte und Botschaften erhöht sich.
• Die Wahrscheinlichkeit steigt, dass unsere Inhalte vor den Inhalten unserer Wettbewerber positioniert sind und damit vor diesen gefunden und gelesen werden.

Regeln

• Drei bis fünf Stichworte.
• Die Stichworte sollten Teil der Beschreibung für Suchmaschinen sein.
• Die Stichworte sollten nach Möglichkeit auch Teil der Seitenüberschrift sein oder sich im ersten Satz oder den ersten Sätzen befinden.

Pflege

Unter anderem haben diese Formulare Felder für Stichworte und Beschreibung:

• Seiten-Eigenschaften

• Formulare

  • Kalender
  • Nachrichten
  • Orte
  • Veranstalter

Bei den Formularen gibt es jeweils einen Reiter [Suchmaschinen].

Bei den Seiten-Eigenschaften heißt der Reiter [Metadaten] und die Feldgruppe [Meta-Tags].

Was habe ich davon?

Ein Blick in die Statistik gibt über vieles Aufschluss wie etwa:

• Welche Seiten und Inhalte werden am meisten aufgerufen?

• Machen sich Ereignisse und Aktionen bemerkbar wie etwa

  • die letzte Veranstaltung,
  • der letzte Newsletter,
  • die letzte Kreistagssitzung,
  • die letzte Demonstration?
• Gibt es eine Entwicklung nämlich steigende Besucher*innen-Zahlen?
• Hat die Website ausreichend Besucher*innen?

Unabhängig von TYPO3 GRÜNE

Die Erfassung statistischer Daten ist nicht Aufgabe von TYPO3 oder TYPO3 GRÜNE, sondern von dafür optimierter Software und damit häufig die Aufgabe des jeweiligen Hosters.

Die Netzmacher und netzbegrünung e.V., die Entwickler und Initiatoren von TYPO3 GRÜNE, sowie new thinking (Grünes CMS) erfassen die Web-Statistik mit Piwik.

Wenn Ihr die Zugangsdaten nicht kennt, lasst sie Euch von Eurem Hoster geben.

Beispiel Piwik

Beispiel des Dashboards, Startseite, des mächtigen Statistik-Tools Piwik.

Ablauf

Das sind die Schritte in Deinem TYPO3-Backend:

• Modul-Leiste > Admin-Werkzeuge: Extension-Manager
• Bearbeitungsfenster: [Get preconfigured distribution] / [Lade vorkonfigurierte Distribution]
• Installiere Launch TYPO3 GRÜNE! (launchstartgreen)
• Klick' im Frontend auf [Launch Dein TYPO3-Projekt]

Du kannst mit Launch TYPO3 GRÜNE! die GRÜNE Website sowohl in einem leeren TYPO3 installieren wie in einem TYPO3, in dem bereits Websites vorhanden sind.

Handbuch

Launch TYPO3 GRÜNE: Manual

Konflikte

Es gibt einen Konflikt mit der TYPO3-Erweiterung Templavoila! Diese muss deaktiviert werden.

Benötigt

:browser:

Browser - responsive TYPO3 ohne PHP. Frontend-Engine: Kümmert sich um die Ausgabe aller Inhalte des Organbisers im Frontend.

:org:

Organiser - responsive TYPO3 für Lobby und Veranstalter

Empfohlen

:linkhandler:

Der Linkhandler ermöglicht es Redakteur*innen, im Backend direkt auf Datensätze zu verlinken.

:linkhandlerconf:

Der Linkhandler Konfigurator ermöglicht es Administrator*innen den Linkhandler mit einem User-Interface (Extension-Manager) einzurichten.

:seo_dynamic_tag:

SEO Dynamic Tag. Suchmaschinen-Optimierung (SEO). Der Organiser ist für SEO Dynamic Tag vorbereitet

Benötigt

:cb_foundation:

Foundation-Framework. Ermöglicht Redakteur*innen, TYPO3-Inhalt für das responsive Design zu verwalten und weitere responsive Einstellungen.

:gridelements:

Grid-Elemente ermöglichen Redakteur*innen, an beliebigen Stellen ein flexibles und responsive Spalten-Layout einzufügen und zu befüllen.

:start:

Start TYPO3 Responsive! ermöglicht Administrator*innen, eine responsive Website mit einem umfangreichen User-Interface einzurichten. Start TYPO3 Responsive! integriert eine Menge Basis-Layouts und einige Spalten-Layouts.

Empfohlen

:realurl:

Suchmaschinen-Optimierung (SEO) für URL - die Internet-Adressen.

Benötigt

:startgreen:

TYPO3 GRÜNE: responsive Design für BÜNDNIS 90/DIE GRÜNEN

Empfohlen

:devlog:

Developer log: Für Entwickler*innen. Netzmacher-Erweiterungen unterstützen devlog.

Entwickler*innen bekommen Berichte, die unter anderem den Ablauf von Erweiterungen oder Performance-Engpässe zeigen können.

:slick:

Slick - responsive Carousel Slider. Der Organiser bringt für Nachrichten ein schlüsselfertiges Template für Slick mit.

:tsconf:

Simplify your TYPO3 Backend! tsconf ermöglicht es, die häufigsten Einstellungen für ein optimiertes Backend mit der Maus

ein- oder auszuschalten. Dazu zählen unter anderem Seiten-IDs individuelle Icons im Seitenbaum, einerseits erweiterte und

andererseits vereinfachte Ansichten von Listen und Formularen, ein erweitertes Klemmbrett, ein Admin-Panel und erweiterte

Cache-Funktionen für Redakteur*innen.

TYPO3 GRÜNE

Login

Ab TYPO3 7.6

Backend-Logo

Ab TYPO3 8.7

Ausschalten

Du kannst den Stil von TYPO3 GRÜNE ausschalten. Du hast dann ein neutrales Login und Backend.

Login

Modul deaktivieren

Start TYPO3 GRÜNE fügt in der Modul-Leiste > Web automatisch den Menü-Punkt "Meine Website" (Sonnenblume) ein.

Ist das Modul nicht nötig, kann es hier im Extension Manager für die gesamte TYPO3-Instanz deaktiviert werden.

Soll das Modul TYPO3 GRÜNE nur für bestimmten Gruppen verborgen werden, dann richtest Du dieses Verhalten über die Rechte-Konfiguration für Nutzer*innen-Gruppen von TYPO3 ein.

Verwende nur die Wurzelseite (Use only the root page)

Alle Änderungen werden mit dem Modul "Meine Website" per Voreinstellung auf der Wurzelseite gespeichert.

Das Verhalten kann geändert/deaktiviert werden, dann erden die Änderungen auf der jeweilsvom Modul aufgerufenen Seite geändert. Das ist aber nicht zu empfehlen!

Siehe auch

• Modul für Redakteur*innen

Konstanten-Editor

TYPO3 GRÜNE benutzt den TYPO3-Konstanten-Editor als User-Interface.

Siehe:

• Modul > Web: Templates
• Seitenbaum: Wurzel-Seite oder eine andere gewünschte Seite
• Bearbeitungsfenster: Konstanten-Editor > Kategorie: [Start - Green ...]

"Neutrales" Template aktivieren

Blende im Bearbeitungsfenster das Template ein:

• +ext_startcustomer

Wenn Du das Template zum Bearbeiten öffnest, siehst Du, dass dass Theme White eingebunden ist. Du kannst das Theme gegen ein anderes Farb-Theme austauschen.

Template TYPO3 GRÜNE deaktivieren

Blende im Bearbeitungsfenster das Template aus:

• +ext_startgreen

Ablauf

• Modul Web > Seite
• Seitenbaum: Startseite
• Bearbeitungsfenster

* [Start Menü: Top Bar] einblenden

* [Start Menu: Breadcrumbs] einblenden

Ablauf

• Modul Adminwerkzeuge > Erweiterungen
• Installierte Erweiterungen
• TYPO3 GRÜNE (startgreen) deaktivieren

Voraussetzungen

• Die Erweiterung Direct Mail (direct_mail) ist installiert und aktiviert.

Setup

Voraussetzungen

• Die ID der Seite ist hinterlegt, die das Anmeldeformular für den Newsletter enthält.
• Das Popup ist aktiviert.

Setup

RSS-Icons anzeigen

Das RSS-Icon TYPO3 GRÜNE (1) wird angezeigt, wenn bei der Erweiterung Start (Ext:start) die Seiten-ID für das RSS-Feed hinterlegt ist. Siehe

• Konstanten-Editor > Category [START - PAGES] > RSS

Das RSS-Icon des Browser (2) wird angezeigt, wenn bei der Erweiterung Organiser (Ext:org) die Seiten-ID für das RSS-Feed hinterlegt ist. Siehe

• Konstanten-Editor > Category [ORGANISER - PAGES] > news rss

Titel des RSS-Feeds ändern

Titel und Beschreibung des RSS-Feeds bearbeitest Du hier:

• Konstanten-Editor > Category [ORGANISER - TEMPLATES - NEWS RSS]

RSS-Feed manuell einrichten

1. Seite anlegen: Du legst eine Seite an und nennst diese zum Beispiel "News Feed"
2. Template hinzufügen: Du fügst der Seite ein TypoScript-Template zu, bei dem Du das Template des Organisers "News RSS" einbindest.
3. Plugin hinzufügen: Du fügst ein Browser-Plugin hinzu, dass Du entsprechend konfigurierts.
4. Danach pflegst Du im Konstanten-Editor die entsprechenden Eigenschaften wie oben beschrieben.

Eine ausführliche Anleitung (Englisch) liefert Dir das Handbuch des Organisers im Kapitel:

• Administrator*innenBest Practice > RSS (https://docs.typo3.org/typo3cms/extensions/org/)

Nachrichten aus Feeds anderer Websites übernehmen

Wie Du Nachrichten aus RSS-Feeds auf Deine Website übernehmen kannst, erfährst Du hier:

• Nachrichten anderer Websites übernehmen

Live-Rechtschreibprüfung

Im Rich-Text-Editor kann die Live-Rechtschreibprüfung aktiviert werden. Siehe Erläuterung im nächsten Absatz.

Zusätzliche Plugins

Der Rich-Text-Editor kann mit zusätzlichen Funktionen und Plugins erweitert werden.

Dies ist ein Service der TYPO3-Erweiterung Start (EXT:start).

Siehe

• Start: Administrators > Best Practice > RTE

Wenn der Link oben nicht funktioniert, gehe auf die Startseite des Handbuchs

• Start

und suche zum Beispiel hier: Administrators > Best Practice > RTE

Setup

Aktiviere mit dem Extension Manager [grünes cms]

[X] Compatible TCA. Extend TCA for migration tasks.

Effekt

Elemente der Tabelle tt_content werden mit der Eigenschaft erweitert:

• Teaser (Grünes CMS). Feld: tx_ntcteaser_gc_teaser

Einige erhältliche Erweiterungen

• Browser (Git)
• Caddy (Git)
• Launch (Git)
• Launch TYPO3 GRÜNE (Git)
• Organiser (Git)
• Organiser Installer (Git)
• Quick Shop (Git)
• Quick Shop Installer (Git)
• Radialsearch (Git)
• Seo Dynamic Tag (Git)
• Slick (Git)
• Start (Git)
• Start Customer (Git)
• TYPO3 GRÜNE (Git)

Herangehensweise

1. Web Modul > Seite
2. Seiteneigenschaften > TYPO3 GRÜNE
3. Untersuche das Feld "Stil": Nehme einen der Werte aus den Optionsfeldern wie zum Beispiel "2020041"
4. Wähle eine individuelle eindeutige Id für Deinen Stil. Zum Beispiel JJMMDDn: 2010141

#: Wähle einen individuellen Namen für Deinen Stil in Klein- und Großschrift. Zum Beispiel: stylewhite und Stylewhite

Zu erstellende und zu bearbeitende Dateien

• Untersuche EXT:startgreen mit Deiner Entwicklungsumgebung (IDE)
• Kopiere ganze Ordner von der alten Id (2020041) auf die neue Id (2010141)
• Kopiere in Dateien Code der alten Id (2020041) füge diesen mit der neue Id (2010141) ein
• Ersetze in Deinen neuen Dateien den Namen des kopierten Stils mit dem Namen Deines Stils

Link auf jeder Seite

Sowie beim Impressum muss es auch auf jeder Seite der Website einen Link auf die Datenschutz-Erklärung geben.

Inhalte

Die Datenschutz-Erklärung enthält immer individuelle Abschnitte. Dazu zählen:

• immer eure Adresse einschließlich Ansprechpartner mit Kontaktdaten
• und Erläuterungen abhängig von verwendeten Funktionalitäten, Medien und Plugins.

Das bedeutet:

• Beim erstmaligen Erstellen der Datenschutzerklärung muss die Website

  • auf intern eingebundene TYPO3-Erweiterungen, die Daten speichern,
  • und auf extern eingebundene Funktionalitäten, Medien und Plugins

  untersucht werden.

• Während des Betriebs muss die Datenschutzerklärung angepasst werden,

  • wenn intern eingebundene TYPO3-Erweiterungen, die Daten speichern,
  • oder wenn extern eingebundene Funktionalitäten, Medien und Plugins

  aktualisiert, entfernt oder hinzugefügt werden.

Funktionalitäten, Medien und Plugins

Dazu zählen unter anderem:

• Interkative Karten wie

  • GoogleMaps
  • Open Street Map
• Routenplaner

• Soziale Medien wie

  • Facebook,
  • Google+
  • Instagram
  • Twitter
  • Vimeo
  • YouTube

• Web-Analyse-Tools wie

  • GoogleAnalitycs
  • Matomo
  • Piwik

Vorlage

TYPO3 GRÜNE bringt einen Entwurf mit. Dieser berücksichtigt Auswirkungen auf die Datenschutz-Erklärung von

• verwendeten TYPO3-Erweiterungen, die Daten speichern, sowie
• von extern eingebundene Funktionalitäten, Medien und Plugins.

Die Datenschutz-Erklärung von TYPO3-GRÜNE sollte daher eine gute Vorlage für Euch sein.

Zum Zeitpunkt der Installation von TYPO3 GRÜNE OPEN SOURCE bzw. Inbetriebnahme von TYPO3 GRÜNE HOSTED findet Ihr die Erklärung unter dem Menü-Punkt Datenschutz oder Datenschutzerklärung.

Was sollte eine Datenschutz-Erklärung enthalten?

• Datenschutz-Erklärung

Tutorials

Dieses Handbuch bezieht sich auf die Funktionen von TYPO3 GRÜNE.

Allgemeine Informationen zum Arbeiten mit TYPO3 findest Du hier:

• Für Anfänger: TYPO3 Getting Started Tutorial
• Für Redakteur*innen: TYPO3 Tutorial for Editors

Für Administrator*innen

Die ChangeLog-Dateien der Netzmacher-Erweiterungen sind ausgezeichnet dokumentiert. Du findest die ChangeLog-Dateien auf oberster Verzeichnis-Ebene der jeweiligen Erweiterung.

Zum Beispiel für TYPO3 GRÜNE (startgreen)

• typo3conf/ext/startgreen/ChangeLog
• https://gitlab.die-netzmacher.de/typo3/startgreen/blob/master/ChangeLog

Der Weg zu den Seiten-Eigenschaften

Der Weg:

• Modulleiste: Web > Seite
• Seitenbaum: Wähle die gewünschte Seite aus (hier: Wurzel-Seite).
• Bearbeitungsfenster: Klicke oben auf das Symbol mit dem Stift.

2. Update "überholter" Backend-Layouts

-- Update deprecated backend layouts
UPDATE `pages` SET `backend_layout` = 'start__mixed_05' WHERE `backend_layout` = 'start__slim_01';
UPDATE `pages` SET `backend_layout` = 'start__mixed_05_02_r' WHERE `backend_layout` = 'start__slim_02';
UPDATE `pages` SET `backend_layout` = 'start__mixed_09_gcms' WHERE `backend_layout` = 'start__slim_02_gcms';
UPDATE `pages` SET `backend_layout` = 'start__mixed_05_03_l' WHERE `backend_layout` = 'start__slim_03';
UPDATE `pages` SET `backend_layout` = 'start__mixed_05_01_lr' WHERE `backend_layout` = 'start__slim_04';
UPDATE `pages` SET `backend_layout` = 'start__mixed_01' WHERE `backend_layout` = 'start__slim_extended_04';
UPDATE `pages` SET `backend_layout` = 'start__mixed_02' WHERE `backend_layout` = 'start__slim_extended_05';
UPDATE `pages` SET `backend_layout` = 'start__mixed_02' WHERE `backend_layout` = 'start__slim_extended_06';
UPDATE `pages` SET `backend_layout` = 'start__mixed_01_01_lr' WHERE `backend_layout` = 'start__slim_extended_07';
UPDATE `pages` SET `backend_layout` = 'start__mixed_01_02_r' WHERE `backend_layout` = 'start__slim_extended_08';
UPDATE `pages` SET `backend_layout` = 'start__mixed_01_03_l' WHERE `backend_layout` = 'start__slim_extended_09';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_05' WHERE `backend_layout_next_level` = 'start__slim_01';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_05_02_r' WHERE `backend_layout_next_level` = 'start__slim_02';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_09_gcms' WHERE `backend_layout` = 'start__slim_02_gcms';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_05_03_l' WHERE `backend_layout_next_level` = 'start__slim_03';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_05_01_lr' WHERE `backend_layout_next_level` = 'start__slim_04';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_01' WHERE `backend_layout_next_level` = 'start__slim_extended_04';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_02' WHERE `backend_layout_next_level` = 'start__slim_extended_05';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_02' WHERE `backend_layout_next_level` = 'start__slim_extended_06';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_01_01_lr' WHERE `backend_layout_next_level` = 'start__slim_extended_07';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_01_02_r' WHERE `backend_layout_next_level` = 'start__slim_extended_08';
UPDATE `pages` SET `backend_layout_next_level` = 'start__mixed_01_03_l' WHERE `backend_layout_next_level` = 'start__slim_extended_09';

3. Cache leeren

TYPO3-Frontend-Cache leeren

Seiten-Id für Footer neu setzen

5.5.0

Wenn mit einem Fußbereich gearbeitet wird, muss die Seiten-Id für den Footer neu gesetzt werden.

Administrator*innen finden diese im Constanten-Editor:

• [START - PAGES] > Footer

Jumboteaser (Vorhang)

10.4.0

Es gibt ein neues Inhaltselement Jumboteaser. Es ist eine Art Vorhang, der die eigentliche Website hintre einem formatfüllenden Foto verbirgt, der gelüftet werden kann.

• Redakteur*innen > Inhaltselemente > Jumboteaser

SCSS für Backend Layouts erneuert

10.3.0

Wir haben das SCSS für Backend Layouts erneuert. Du MUSST Deine Backend-Layouts aktualisieren:

• von Slim (ehemals Bronze) auf Mixed (ehemals Silver)

Dies kannst Du bequem mit dem Upgrade-Wizard und Extension-Manager erledigen. Siehe

• Upgrades > 10 > Datenbank > Upgrade-Wizard
• Upgrades > 10 > Exension-Manager

Archiv

Links prüfen

3.0.10

Du kannst auf Deiner Website interne und externe Links prüfen. Siehe

• Redakteur*innen > Links prüfen

UNBEDINGT BEACHTEN!

Administrator*innen müssen die Seiten-ID für den Fußbereich neu setzen!

Siehe Updates und Upgrades

Fußbereich

Anleitung für individuelle Gestaltung.

Siehe Redakteur*innen > Fußbereich

Layout

Mega-Menü

• Mega-Menü

Migration

Modul

Stil

Neben dem bisherigen Layout TYPO3 Grüne 1.0 steht ein weiteres Layout zur Verfügung: TYPO3 Grüne 1.1. Das neue Layout arbeitet mit einer zurückhaltenderen Gestaltung von Nachrichten-Listen.

• Extension Manager > Modul

Handbuch

Features / Funktionen

Handbuch

Features / Funktionen

Verbesserungen

2.13.6

2.13.3

2.13.2

2.13.1

2.13.0