Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.




Veranstaltungskalender
(aus Google, Exchange oder Spezialanwendung etc.)

Nutzen Sie Termin Exporte um z.B. auf Ihren Sitzungskalender in unserem Templatedesigner zugreifen zu können.

Kopieren Sie die Adresse der ICS - Datei für den Abruf und fügen Sie diesen in Ihr gestaltetes Template ein.

So erstellen Sie einmalig eine Templatevorlage und haben immer Ihre aktuellen Inhalte geladen:



Im Templatedesigner wird eine Template Vorlage nach Ihrem CI vorbereitet.

Jetzt wir wird in dem Template ein neues Element "Datenschnittstelle" hinzugefügt.



Das folgende Menü erscheint:


im Im neuen Menü wählen Sie dann die gewünschte RSS Auswahl Schnittstelle:

  • Bundesagentur für Arbeit - Jobsuche
  • Bundesagentur für Arbeit - Veranstaltungen
  • Facebook - Seitenabruf
  • Facebook - Seitenabruf ohne QR-Tag
  • ICS - Kalenderabruf
  • RSS / Atom Feed
  • RSS / Atom Feed - ohne QRBild
  • RSS / Atom Feed - ohne QR - ohne Bild
  • RSS / Atom Feed - ohne QR - ohne Bild
  • strait CMS WIM Angebote
  • strait CMS WIM Events
  • strait publish CMS - JobsCMS WIM Events (Events in Kürze)
  • strait publish CMS - VeranstaltungenWIM Jobs

AktualisierungsintervalAktualisierungsintervall: (in Minuten)


Die Auswahl mit übernehmen:

Image Added

Das Feld der Datenschnittstelle entsprechend skalieren und positionieren

rechts Rechts im Menü die Einstellungen Datenschnittstelle vornehmen:

  • URL: hier die Quelle für den Datenabruf eintragen
  • Anzahhl Anzahl der Tage die geladen werden sollen, soweit es eingeschränkt werden soll (Wenn keine Eingabe erfolgt wird 90 Tage gezogen)
  • Verhalten bei längerem Inhalt
    • Objekt scrollen
    • Objekt wechseln
  • Darstellungszeit pro Wechsel in Sekunden
  • Anzahl der Inhalte pro Wechsel
  • Startposition
    • erstes Element
    • zufällig
    • fortlaufend (merkt sich beim Durchlauf der Playliste die Ausspielposition und führt beim nächsten Durchlauf fort)
  • Verhalten beim letzten Element
    • stoppen
    • zum Anfang scrollen
    • wieder von vorne beginnen
  • zusätzliche Template CSS - siehe rechte Spalte
    • über Vorlage laden werden die Standarteinstellungen angezeigt
      • hier hat man die Möglichkeit Korrekturen zu Farbe etc. einzugeben
CSS Vorlage
  •  font-size: 30px;

color: #4b4b4b;

padding: 0;

margin: 0;

Überschrift des Monats und des Fließtextes

Farbewert: Flließtext und datum und Zeit

Keine Funktion ?

Keine Funktion ?

.left-block {

float: left;

width: 250px;

text-align: right;

Beschreibung Left Block - ist der gesammte Text

Ausrichung Fließtext

Abstand von Rand

Wirk auf Datum zu Trennlinie?

.right-block {

margin-left: 250px;

Fließtext

Abstand

.headline {

font-weight: bold;

padding-left: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

Hier passier nichts

Hier passier nichts

.teaser {

padding-left: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

Hier passier nichts

Hier passier nichts

.date-info {

vertical-align: top;

padding-right: 15px;

.date-info .start-date, .date-info .end-date {

font-size: 30px;

font-weight: bold;

Größe Datum

.date-info .start-time, .date-info .end-time {

font-size: 24px;

Größe Uhrzeit

.date-info .time-different .start-date {

display: block;

??????????

.date-info .date-different .time-separator {

display: block

???????????

.standort {

border-left: 2px solid #4b4b4b;

padding-left: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

Trennstrich Datum 002ef3 |Text

.clear {

clear: both;

????????????

.entry {

padding-top: 30px;

margin-top: 30px;

border-top: 1px solid #4b4b4b;

position: relative;

Rand nach oben zum Fliestext

????????????????

Keine Funktion

.switch+.entry {

border: 0;

margin-top: 0;

Keine Funktion

.entry:last-child {

border: 0;

.entry+.switch {

margin-top: 30px;

.switch {

border-bottom: 1px solid #4b4b4b;

Keine Funktion bei Pixelgröß

Farbe Trennlinie

.switch-text {

background-color: #4b4b4b;

color: #FFF;

padding: 5px 10px;

display: inline-block;

width: 232px;

Textfarbe Monat

.entry:first-child .switch {

margin-top: 0;

????????????




Intelligentes Verhalten der Schnittstelle:

Ist momentan kein Kalendereintrag vorhanden, wird das Template in der Ausspielung nicht angezeigt und übersprungen.

Sind wieder Inhalte vorhanden spielt sich das Template wieder automatisiert an Ihren Monitoren aus.



Mit übernehmen und speichern abschließen:

  • das Objekt wird berechnet


Beim nächsten öffnen Öffnen des Objektes ist eine Vorschau sichtbar und Korrekturen können vorgenommen werden.

Einstellungen zu Gestaltung und Animation vornehmen.


Das Template wie gewohnt speichern.

Das Objekt befindet sich in der Objektauflistung.


Eine Vorschau ist über eine Playliste zur Beurteilung möglich:


Anpassungen des Standarts können über HTML oder CSS angepasste werden:

HTML Beispiel

CSS Beispiel

<div class="entry"> <div class="left-block"> <div class="date-info"> <div class="time-different"> <span class="start-date">04.06.2020</span> <span class="start-time">18:00</span><span class="time-separator"> - </span><span class="end-time">20:00</span> </div> </div> </div> <div class="right-block"> <div class="standort">Rathaus der Stadt Vreden, 48691 Vreden, Kleiner Sitzungssaal</div> <div class="headline">Bildungs-, Sport- und Kulturausschuss</div> <div class="teaser">Bildungs-, Sport- und Kulturausschuss</div> </div> <div class="clear"></div> </div>

* {font-size: 30px;color: #4b4b4b;padding: 0;margin: 0;}

.left-block {float: left;width: 250px;text-align: right;}

.right-block {margin-left: 250px;}

.headline {font-weight: bold;padding-left: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.teaser {padding-left: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.date-info {vertical-align: top;padding-right: 15px;}

.date-info .start-date, .date-info .end-date {font-size: 30px;font-weight: bold;}

.date-info .start-time, .date-info .end-time {font-size: 24px;}

.date-info .time-different .start-date {display: block;}

.date-info .date-different .time-separator {display: block;}

.standort {border-left: 2px solid #4b4b4b;padding-left: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.clear {clear: both;}

.entry {padding-top: 30px;margin-top: 30px;border-top: 1px solid #4b4b4b;position: relative;}

.switch+.entry {border: 0;margin-top: 0;}

.entry:last-child {border: 0;}

.entry+.switch {margin-top: 30px;}.switch {border-bottom: 1px solid #4b4b4b;}

.switch-text {background-color: #4b4b4b;color: #FFF;padding: 5px 10px;display: inline-block;width: 232px;

}.entry:first-child .switch {margin-top: 0;}

CSS Vorlage
  •  font-size: 30px;

color: #4b4b4b;

padding: 0;

margin: 0;

Überschrift des Monats und des Fließtextes

Farbewert: Flließtext und datum und Zeit

Keine Funktion ?

Keine Funktion ?

.left-block {

float: left;

width: 250px;

text-align: right;

Beschreibung Left Block - ist der gesammte Text

Ausrichung Fließtext

Abstand von Rand

Wirk auf Datum zu Trennlinie?

.right-block {

margin-left: 250px;

Fließtext

Abstand

.headline {

font-weight: bold;

padding-left: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

Hier passier nichts

Hier passier nichts

.teaser {

padding-left: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

Hier passier nichts

Hier passier nichts

.date-info {

vertical-align: top;

padding-right: 15px;

.date-info .start-date, .date-info .end-date {

font-size: 30px;

font-weight: bold;

Größe Datum

.date-info .start-time, .date-info .end-time {

font-size: 24px;

Größe Uhrzeit

.date-info .time-different .start-date {

display: block;

??????????

.date-info .date-different .time-separator {

display: block

???????????

.standort {

border-left: 2px solid #4b4b4b;

padding-left: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

Trennstrich Datum 002ef3 |Text

.clear {

clear: both;

????????????

.entry {

padding-top: 30px;

margin-top: 30px;

border-top: 1px solid #4b4b4b;

position: relative;

Rand nach oben zum Fliestext

????????????????

Keine Funktion

.switch+.entry {

border: 0;

margin-top: 0;

Keine Funktion

.entry:last-child {

border: 0;

.entry+.switch {

margin-top: 30px;

.switch {

border-bottom: 1px solid #4b4b4b;

Keine Funktion bei Pixelgröß

Farbe Trennlinie

.switch-text {

background-color: #4b4b4b;

color: #FFF;

padding: 5px 10px;

display: inline-block;

width: 232px;

Textfarbe Monat

.entry:first-child .switch {

margin-top: 0;

????????????