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.
Individuelles Javascript	ab Premium-Version: Ermöglicht die Ablage von eigenem Javascript-Code
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!

BOXSTART: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.

Kleines Beispiel mit einem Register mit zwei Register-Seiten:

|Page name=startextern type=tab
Page "Home" action=home
Page "Über uns" action=ueberuns
|Page "Home" name=home
Html "https://..../..."
|Page "Über uns" name=ueberuns
Html "https://..../..."

Komplette Beschreibung der Möglichkeiten:

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
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) 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) config:margin=0,50,0,0 : Ränder der Elemente (links,oben,rechts,unten) config:marginrefresh=.. : ergänzend für "refreshview" config:marginview=.. : ergänzend für "scrollview"
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	action=AKTION (siehe unten) webservice=WEBSERVICENAME : Aufruf des Anwendungsservers value=Enter : legt fest dass dieser Button durch das Enter-Drücken ausgelöst wird
ButtonSub "Text"	Anzeige eines untergeordneten Buttons	name=GRUPPENNAME action=AKTION (siehe unten)
Label "Text"	Anzeige eines Bezeichners
Field "Text"	Anzeige eines Eingabefeldes	name=.. : Feldname
FieldPassword "Text"	Anzeige eines Passwort-Eingabefeldes	name=.. : Feldname
BackgroundImages	Anzeige von Hintergrund-Bildern als Slider	webservice=WEBSERVICENAME : Aufruf des Anwendungsservers config:sekunden=10 : Seitenwechsel (Standard: 2)
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)

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

BOXEND:

Beispiel einer eigenen Startseite mit den öffenlich sichtbaren Veranstaltungen/Meldungungen/Shopartikel:

|Page "Start" name=startextern
Menu "zum Mitglieder-Login" action=:loginindividuell
Carousel175 "Aktuelle Termine" webservice=getevents action=eventitem
Carousel150 "Aktuelle Nachrichten" webservice=getpublicnews action=newsitemextern
Carousel150 "Shop-Artikel" webservice=getshop action=shopitem
Button "zum Online-Shop" action=https://vereinonline.org/..../?module=shop&dialog=1
Button "Ich möchte Kontakt aufnehmen" action=https://vereinonline.org/..../?kontakt&dialog=1
Button "Ich möchte Mitglied werden" action=https://vereinonline.org/..../?mitgliedsantrag&dialog=1
Button  "zum Mitglieder-Login" action=:loginindividuell