12.2.3 Layout

Bestimmt das Layout der ganzen Seite. Hier können Sie zwischen verschiedenen Darstellungsformen und Farb/Bildschematas wählen sowie Logos hochladen.

Feld	Beschreibung
Layout	Auswahl zwischen verschiedenen Layouts. Sie können (in der Premium- oder Plus-Version) auch ein individuelles Layout auf Basis eines HTML-Templates erstellen (siehe: Individuelles Layout) und damit Ihre "Corporate Identity" wahren. Enthält das Layout freie Parameter (für z.B. Namen, Urls), dann werden diese hier zum individuellen Befüllen angezeigt.
Logo/Bilder	Logos u.ä. (abhängig vom gewähltem Layout)
Farben	Ermöglicht die Auswahl von Farben u.ä. (abhängig vom Layout)
Schrift	Ermöglicht die Auswahl einer Schrift. Auch der Upload einer eigenen .ttf-/.oft-Schriftdatei ist möglich.
Individuelles CSS	CSS ermöglicht die flexible Formatierung von Webseiten. Siehe nachfolgend. Mit "[x] CSS" kann man das CSS deaktivieren.
Individuelles Javascript	ab Premium-Version: Ermöglicht die Ablage von eigenem Javascript-Code Mit "[x] Javascript aktiv" kann man das Javascript deaktivieren.
Vereins-App	bei beauftragter Individuellen App, ab Plus-Version: Ermöglicht die Ablage von Startseiten für die individuelle Vereins-App
Speichern	Speichert die Eingaben und schließt das Fenster

CSS

CSS ermöglicht die Formatierung von Webseiten.

siehe z.B. https://wiki.selfhtml.org/wiki/CSS

Kurzübersicht:

Aufbau jeder Sektion:

bezeichner
{
   format1: wert1;
   format2: wert2;
}

Gültige Bezeichner:

Bezeichner	Beschreibung
*	Gilt überall
.modulname	Gilt nur in dem Modul Beispiel: .members
.actionname	Gilt nur bei der Aktion Beispiel: .nachlese
.element	Gilt nur bei dem entsprechenden Element Beispiel: .listheader
.linknamestatischeseite	Gilt nur bei der entsprechenden statischen Seite Beispiel: .impressum
.dialog	Gilt für geöffnete Popups

Beispielhafte CSS-Formate und Werte

Format und Wert	Beschreibung
color: green;	Setzt die Vordergrundfarbe auf grün. Auch beliebige Farbwerte der Form #rrggbb möglich.
background-color: red;	Setzt die Hintergrundfarbe auf rot. Auch beliebige Farbwerte der Form #rrggbb möglich.
font-family: Times;	Setzt die Schriftart.

Schriften können Sie so einbinden (die Schriftarten in diesem Beispiel sind im Unterordner "webfonts" unter Administration/Basiskonfiguration/Dateien abgelegt):


@font-face { 
font-family: "Montserrat Light"; 
src: url("files/webfonts/Montserrat-Light.ttf"); 
}
body, td, * { font-family: 'Montserrat Light' !important; }
.glyphicon { font-family: 'Glyphicons Halflings' !important; }
.fa, .far, .fas { font: 'FontAwesome' !important; }

Viele weitere CSS-Möglichkeiten können Sie im Internet recherchieren.

Wenn bestimmte Stellen nicht per CSS erreichbar sind (z.B. weil das Programm feste Werte vorgibt oder das Element nicht genau genug adressierbar ist), dann geben Sie uns dies bitte per "Support-Anfrage"-Funktion bekannt!

Vereins-App, Individuelle Seiten

Diese Seite ermöglicht es Vereinen, die eine individuelle App nutzen, öffentliche Startseiten in der App bereitzustellen.

Jede Seite wird durch einen |Page-Befehl eingeleitet.

Die Standard-Konfiguration sieht so aus (Startseite mit 5 Register):

|Page name=startextern type=tabbottom
Page "Start" action=startpage
Page "Termine" action=newsextern
Page "Antrag" action=aufnahme
Page "Login " action=startlogin
Page "Mehr" action=mehr
|Page "{#name#}" name=startpage icon=home25.png
ListView webservice=getpublicstartpage config:template=box action=startpageitem
|Page "Aktuelle Termine" name=newsextern icon=groups25.png
ListView webservice=getevents&extern=1 action=eventitem
|Page "Mitgliedsantrag" name=aufnahme icon=usermale25.png
Label "Ich möchte gerne Mitglied werden:"
Html "{#url#}?mitgliedsantrag&dialog=1"
|Page "Mitglieder-Login" name=startlogin icon=users25.png
Label "Ich bin Mitglied und möchte mich zum internen Bereich anmelden:"
Field "Login:" name=userlogin
Fieldpassword "Passwort:" name=userpwd
ButtonGrid "Jetzt anmelden" value=Enter webservice=login action=startintern icon=sf_createnew.png
|Page "Mehr" name=mehr icon=worldwide_location25.png
ButtonGrid "Kontakt" action=#html:{#url#}?kontakt&dialog=1 icon=sf_hilfe.png
ButtonGrid "Impressum" action=#html:{#url#}?impressum&dialog=1 icon=sf_address.png
ButtonGrid "Datenschutz" action=#html:{#url#}?datenschutz&dialog=1 icon=sf_shield.png

Die wichtigsten Befehle und deren Parameter lauten:

Befehl	Beschreibung	Mögliche Parameter
Register-Seiten (hat mehrere Register-Unterseiten)
\|Page	Register-Hauptseite	name=... : Name der Seite ("startextern" ist die Startseite für nicht angemeldete Nutzer) type=tab : Register (Android: oben, iOS: unten) type=tabbottom : Register immer unten icon=https://.../datei.png : Icon des Tab-Registers (oder ein App-internes Icon)
Page "Überschrift"	Eine Register-Seite	action=seitenname
Normale Seiten (Elemente sequentiell untereinander)
\|Page "Überschrift"	Beginn einer neuen Seite mit der angegebenen Überschrift Kann auch Platzhalter der übergeordneten Liste enthalten: #CAPTION#, ..	name : Name der Seite ("startextern" ist die Startseite für nicht angemeldete Nutzer) (kein "type": Normale Seite mit beliebigen Elementen) type=noheader : Normale Seite mit beliebigen Elementen, ohne Navigations-Kopf type=refreshview/refreshviewnoheader : Seite, die durch "nach unten ziehen" aktualsiert werden kann type=scrollview/scrollviewnoheader : Seite, die auch länger sein kann (nach unten scrollbar) webservice=WEBSERVICENAME : Aufruf des Anwendungsservers config:cancelpush=xxx : Löscht beim Aufruf diese Push-Meldung config:height=5000 : Höhe der Seite
Menu	Kontext-Menü-Eintrag oben als Button	webservice=WEBSERVICENAME : Aufruf des Anwendungsservers action=AKTION (siehe unten) icon=https://.../datei.png : Icon (oder ein App-internes Icon)
Context	Kontext-Menü-Eintrag per "..."	(analog zuvor)
Image	Bild	src=https://.../datei.jpg
HeaderImage	Bild, das ganz oben ohne Rand angeordnet wird	src=https://.../datei.jpg
Listview	Liste	webservice=WEBSERVICENAME : Aufruf des Anwendungsservers action=AKTION (siehe unten) config:template=box : Legt fest, dass die Listen-Elemente als Box dargestellt werden
Html "HTML" Html "https://..."	Anzeige HTML-Text	HTML kann auch Platzhalter der übergeordneten Liste enthalten: #CAPTION#, #HTML#, .. webservice=WEBSERVICENAME : Aufruf des Anwendungsservers
Button "Text"	Anzeige eines Buttons (klassischer Stil)	action=AKTION (siehe unten) webservice=WEBSERVICENAME : Aufruf des Anwendungsservers value=Enter : legt fest dass dieser Button durch das Enter-Drücken ausgelöst wird confirm : Bestätigungsrückfrage badge : Zahl config:backcolor : Hintergrundfarbe config:align=right : Ausrichtung
ButtonGrid "Text"	Anzeige eines Buttons (mit Icon)	(siehe zuvor) icon=https://.../datei.png : Icon des Tab-Registers (oder ein App-internes Icon)
ButtonRow "Text"	Anzeige eines Buttons, in einer Reihen nebeneinander mit anderen ButtonRow-Elementen	(siehe zuvor)
ButtonSub "Text"	Anzeige eines untergeordneten Buttons	name=GRUPPENNAME action=AKTION (siehe unten)
Label "Text"	Anzeige eines Bezeichners	color=#ff0000,#f0f0f0 : Farben Schriftfarbe Hintergrundfarbe config:size=12 : Schriftgröße Label "#STATUS#": Zeigt die App-Version an
LabelCenter "Text"	Anzeige eines zentrierten Bezeichners	(analog zuvor)
Section "Überschrift xxx"	Anzeige einer Sektion	config:size=12 : Schriftgröße config:margin=10,10,10,10 : Rand außen links,oben,rechts,unten oder nur eine Angabe (gilt für alle)
Field "Text"	Anzeige eines Eingabefeldes	name : Feldname value : der Wert
FieldPassword "Text" FieldDisabled "Text" FieldEmail "Text" FieldZahl "Text" FieldTelefon "Text" FieldUrl "Text" FieldChat "Text" FieldPlain "Text" FieldCheckbox "Text" FieldDate "Text" FieldRadio "Text" FieldText "Text" FieldText300 "Text"	Anzeige eines Eingabefeldes bestimmer Eingabetypen	name : Feldname value : der Wert FieldDate: action: bei Wechsel FieldRadio: confirm="Auswahl1,Auswahl2,..."
FieldScan "Text" FieldScanFront "Text"	Zeigt eine QR-Code-Eingabe an	name: Feldname webservice=WEBSERVICENAME : Aufruf des Anwendungsservers action=AKTION (siehe unten)
FieldSearch "Text"	Zeigt eine Such-Zeile an, aktualisiert eine nachfolgende "ListView"
FieldDropdown "Text"	Zeigt eine Dropdown-Box an	name : Feldname value : der Wert confirm="Auswahl1,Auswahl2,..."
FieldCombo	Zeigt eine Dropdown-Box an	name : Feldname value: Feldwert webservice: Bereitstellung der Auswahl action=AKTION (siehe unten)
Hidden	Zeigt ein verstecktes Feld an	name: Feldname value: Feldwert
NetworkStatus	Zeigt den Netzwerkstatus an	color=#ff0000,#f0f0f0 : Farben Schriftfarbe Hintergrundfarbe config:size=12 : Schriftgröße config:margin=10,10,10,10 : Rand außen links,oben,rechts,unten oder nur eine Angabe (gilt für alle) config:padding=10,10,10,10 : Rand innen links,oben,rechts,unten oder nur eine Angabe (gilt für alle)
BackgroundImages	Anzeige von Hintergrund-Bildern als Slider	webservice=WEBSERVICENAME : Aufruf des Anwendungsservers config:sekunden=10 : Seitenwechsel (Standard: 2)
Auto "Abbruch in #SEKUNDEN#"	Wechselt nach .. Sekunden auf eine andere Seite	action: Neue Seite webservice=WEBSERVICENAME : Aufruf des Anwendungsservers value: Anzahl der Sekunden
Weitere Seiten (Elemente mit absoluter Positionierung)
\|Page "Überschrift"	Beginn einer neuen Seite mit der angegebenen Überschrift	name=... : Name der Seite ("startextern" ist die Startseite für nicht angemeldete Nutzer) type=absolute/absolutenoheader : absolute Anordnung der enthaltenen Elemente config:margin=0,50,0,0 : Ränder der Elemente (links,oben,rechts,unten) icon=https://.../datei.png : Icon des Tab-Registers
Image	Bild	src=https://.../datei.jpg
ImageBack	Hintergrund-Bild	src=https://.../datei.jpg
Box#x#	Buttons im Raster (Box2x2, Box3x4 u.ä.)	style=#ffffffff,#325C41,24,B : Hintergrundfarbe,Schriftfarbe,Schriftgröße,fett x=1.. y=1.. action=AKTION (siehe unten)
Allgemeines
#....	Kommentar (hat keine Auswirkung)
Alle/viele Elemente
		status=#network:online : Wird nur angezeigt wenn eine Internet-Verbindung vorhanden ist status=#network:offline : Wird nur angezeigt wenn keine Internet-Verbindung vorhanden ist status=...: bedingte Sichtbarkeit abhängig von Anwendungsserver-Antworten maxversion=40 : Nur bis zu App-Version 40 anzeigen minversion=40 : Nur ab App-Version 40 anzeigen
		config:margin=10,10,10,10 : Rand außen links,oben,rechts,unten oder nur eine Angabe (gilt für alle) config:padding=10,10,10,10 : Rand innen links,oben,rechts,unten oder nur eine Angabe (gilt für alle)

AKTION-Werte:

Action	Beschreibung
seitename	Wechselt zur einer anderen Seite (mit Navigation)
:seitenname	Wechselt zur einer anderen Seite (ohne Navigation)
>seitenname	Wechselt zur einer anderen Seite (ohne Navigation), keinen Inhalt übergeben
#close	Schließt die Seite und wechselt eine Ebene zurück in der Navigation
#closereload	Schließt die Seite und wechselt eine Ebene zurück in der Navigation und läd diese Seite neu
#logout	Führt den Logout durch
#show:GRUPPENNAME	Zeigt die "ButtonSub"-Buttons mit dem angegebenen Gruppennamen an
##html:URL	Öffnet die Webseite
#refreshstart	Läd die Layout-Definition vom Anwendungsserver neu