INHALTSVERZEICHNIS

• Vorwort:
• Für Fortgeschrittene/Fortgeschrittene:
  • Analysieren Sie den Bildschirminhalt:
  • Bestimmen Sie den zu verwendenden CSS-Selektor:
• Für den Einsteiger:
  • Fügen Sie die benutzerdefinierte CSS-Konfiguration zum Bildschirm hinzu:
• Tipps:
• Ressourcen:

Vorwort:

In diesem Artikel wird beschrieben, wie Sie die Gestaltung von Bildschirmen in hohem Maße anpassen können, von der Änderung von Farben und dem Hinzufügen von Rändern bis hin zum Einfügen von visuellen Effekten wie Schatten oder Farbverläufen. Wenn es sich um eine visuelle Anpassung an etwas handelt, das auf dem Bildschirm angezeigt wird, besteht die Chance, dass es wie gewünscht feinabgestimmt werden kann.

Dies ist ein mittelschweres bis fortgeschrittenes Thema, das nicht für alle Zielgruppen geeignet ist. Im Allgemeinen müssen Sie den Debugging-Modus des Browsers aktivieren, um den HTML-Code der Bildschirme zu überprüfen und CSS-Definitionen (Cascading Style Sheet) zu schreiben. Für diejenigen, die mit diesen Dingen vertraut sind, kann es sich jedoch als sehr nützlich erweisen, um dem DAKboard eine persönliche Note zu verleihen!

Es gibt jedoch einige Möglichkeiten, die Custom-CSS-Funktion für einige grundlegende Anpassungen zu nutzen, wenn Sie diese Anleitung sorgfältig befolgen. Gehen Sie dazu zum Abschnitt "Für Anfänger" weiter unten.

Am Ende dieses Artikels finden Sie Links zu Ressourcen und Referenzmaterialien für CSS.

Bitte beachten Sie, dass wir bei der Aktualisierung von DAKboard im Laufe der Zeit zwar unser Bestes tun, um die Abwärtskompatibilität aufrechtzuerhalten, dass sich jedoch einige Dinge ändern können, die sich auf benutzerdefinierte CSS-Regeln auswirken, insbesondere wenn die zugrunde liegende Seitenstruktur geändert wird. Wenn Sie plötzliche Änderungen in der Bildschirmdarstellung feststellen, überprüfen Sie bitte die benutzerdefinierten CSS-Regeln, um sicherzustellen, dass sie noch wie vorgesehen funktionieren.

Für Fortgeschrittene/Fortgeschrittene:

Analysieren Sie den Bildschirminhalt:

• Melden Sie sich bei Ihrem DAKboard-Konto an.
• Navigieren Sie zur Einstellung "Bildschirme".
• Wählen Sie auf dem Bildschirm zum Anpassen das Menü "...".
• Wählen Sie dann "Ansicht".

Nachdem der Bildschirm angezeigt wurde, rufen Sie den "Seiteninspektor" oder den "Debugger"-Modus des Browsers auf (Links zu diesen Modi finden Sie im Abschnitt Ressourcen weiter unten). Beginnen Sie im Inspektor, den HTML-Code des Bildschirms zu durchsuchen. Hier ist zum Beispiel ein einfacher "Nachrichten"-Bildschirm (RSS):

Ein Beispiel für eine Page Inspector/Debugger-Sitzung könnte wie folgt aussehen:

Wenn Sie diesen Bildschirm in der Nähe der Anzeige "Mein RSS-Feed" untersuchen, ist der folgende HTML-Code sichtbar:

<div class="block rss block-rss block--MyRSSFeed align-left text-left " id="6074b3bd7cfb8664c104b176" style="top:8.186669921875%;left:2.0592380099826%;width:95.169888888889%;height:58.24%;color: #ffffff;font-size:36pt;z-index:121;"> <div class="rss rss-6074b3bd7cfb8664c104b176" style="display: block;"> <div class="block-name">Mein RSS-Feed</div> <marquee class="rss-scroll hide" scrollamount="10"></marquee> <div class="rss-title"><a href="https://blogs.ei.columbia.edu/2021/04/12/amazing-planet-slideshow-2021/" target="_blank" title="Diesen Artikel auf State of the Planet ansehen">Earth Institute Photos of Our Amazing Planet</a></div> <div class="rss-timestamp">State of the Planet&nbsp;&nbsp;-&nbsp;&nbsp;1 days ago</div> <div class="rss-description">Im Laufe des Monats der Erde werden wir einige der unglaublichen Fotos zeigen, die unsere Forscher bei ihrer Feldarbeit aufgenommen haben. Viel Spaß damit!</div> </div> </div>

• Klassen für:
  • block--MyRSSFeed
  • rss-title
  • rss-zeitstempel
  • rss-Beschreibung

Notieren Sie sich diese Dinge, denn sie helfen Ihnen dabei, bestimmte Bereiche gezielt anzupassen, wie im nächsten Abschnitt gezeigt wird.

Bestimmen Sie den zu verwendenden CSS-Selektor:

Die Analyse des Bildschirminhalts offenbart die ID- und Klassenattribute, die verwendet werden können, um Elemente für die Anpassung auszuwählen. Für eine komplexere Ausrichtung lesen Sie bitte die Informationen über CSS-Selektoren hier: https://www.w3schools.com/cssref/css_selectors.asp

Im folgenden Beispiel wurde das Erscheinungsbild des RSS-Blocks durch Hinzufügen interessanter Ränder, eines Schattens und eines lebendigeren Titels verändert. Dies geschieht durch Hinzufügen dieser benutzerdefinierten CSS-Regeln:

.block--MyRSSFeed { border: 3px solid black; border-radius: 25px; background: rgb(0,100,100, 0.5); box-shadow: 0px 0px 20px; height: auto !important; -webkit-mask-image: unset !important; } .block--MyRSSFeed .rss { padding:30px; } .rss-title { font-variant: small-caps; color: #aef; text-shadow: -1px 1px 15px #3af, 1px 1px 15px #3af, 1px -1px 0 #3af, -1px -1px 0 #3af; }

Für den Einsteiger:

Fügen Sie die benutzerdefinierte CSS-Konfiguration zum Bildschirm hinzu:

• Melden Sie sich bei Ihrem DAKboard-Konto an.
• Navigieren Sie zur Einstellung "Bildschirme".
• Wählen Sie den Bildschirm aus, der angepasst werden soll.
• Klicken Sie oben links auf die Schaltfläche "Stile".
• Wählen Sie die Schaltfläche "Benutzerdefinierte CSS-Regeln hinzufügen".

Nun wird ein Textbereich für die Eingabe von CSS-Stildefinitionen für diesen Bildschirm sichtbar. Es sind mehrere Regeldefinitionen zulässig. Die Regeldefinitionen sehen in etwa wie folgt aus:

.block--TitleOfTheBlockIWantToModify { font-variant: small-caps; border: 3px outset blue; } .block--AnotherBlockTitle { border-radius: 25px; }

Jeder Block in einem DAKboard-Bildschirm hat einen CSS-Klassennamen, der dem eingegebenen Titel entspricht. Mit dieser Funktion können Sie Anpassungen für einen bestimmten Block leicht isolieren. Beachten Sie, dass die Anpassung für alle Blöcke mit demselben Namen gilt. Dies kann ein schneller Weg sein, um denselben Stil auf mehrere Blöcke gleichzeitig anzuwenden, oder es kann unerwartete Ergebnisse haben, wenn dies nicht beabsichtigt war.

Der Name der CSS-Klasse in den benutzerdefinierten CSS-Regeln hat das folgende Format:

• Ein Punkt (".")
• Die Zeichenfolge"block"
• Zwei Bindestriche ("--")
• Der Titel des Blocks, wobei alle Leerzeichen und nicht alphanumerischen Zeichen entfernt werden

Auf den Klassennamen folgt dann die Definition, die für die Klasse gilt, im folgenden Format:

• Offene Klammer ("{")
• Durch ein Semikolon (";") abgegrenzte CSS-Eigenschaften, die jeweils das folgende Format haben:
  • Eigenschaftsname
  • Doppelpunkt (":")
  • Wert der Eigenschaft
• geschlossene Klammer ("}")

Dies ermöglicht verschiedene grundlegende Anpassungen von Bildschirmen. Für spezifischere Teile eines DAKboard-Blocks sind komplexere CSS-Selektoren erforderlich, um einzugrenzen, auf welche HTML-Elemente sich die Anpassung bezieht. Einzelheiten zum Schreiben von CSS-Selektoren finden Sie hier: https://www.w3schools.com/cssref/css_selectors.asp

Sobald die Änderungen an den benutzerdefinierten CSS-Regeln abgeschlossen sind, wählen Sie "Änderungen speichern" und klicken Sie dann auf die Schaltfläche "Vorschau" oder laden Sie den Bildschirm neu, damit die Änderungen wirksam werden.

Tipps:

• Wenn Sie CSS-Selektoren schreiben, seien Sie so spezifisch wie möglich! Je breiter der Selektor ist, desto länger braucht der Browser, um das Element zu "finden", was die Leistung des Bildschirms beeinträchtigt (und möglicherweise auch mehr Dinge berührt als beabsichtigt!). Beispiel-Richtlinien:
  • Verwenden Sie den Selektor"#{id here}" wann immer möglich.
  • Darüber hinaus funktioniert die Verwendung eines Klassenselektors, ".{Klassenname hier}". Die Beschränkung auf einen bestimmten Tag-Namen kann ebenfalls von Vorteil sein.
  • Vermeiden Sie es, nur den Namen eines HTML-Tags zu verwenden
• Entfernen Sie alle CSS-Regeln, die nicht verwendet werden
• Das Experimentieren mit Änderungen im Seiteninspektor/Debugger des Browsers, bevor sie in den Bildschirmeinstellungen angewendet werden, kann Zeit und Ärger sparen.
• Wenn benutzerdefinierte Stile keine Wirkung zu haben scheinen, kann manchmal das Hinzufügen der Zeichenfolge "!important" am Ende des Eigenschaftswerts dies erzwingen; aber seien Sie vorsichtig und verwenden Sie diese Technik sparsam

Ressourcen:

• HTML
  • https://developer.mozilla.org/en-US/docs/Web/HTML
  • https://www.w3schools.com/html/
  • https://html.spec.whatwg.org/multipage/

• CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index
  • https://www.w3schools.com/css/
  • https://www.w3schools.com/cssref/css_selectors.asp

• Browser Seiteninspektoren / Debugger:
  • Chrome: https://developer.chrome.com/docs/devtools/css/
  • Firefox: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
  • Edge: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/open/?tabs=cmd-Windows
  • Safari: https://developer.apple.com/safari/tools/