CSS-Klasse einer Komponente identifizieren

Owned by Tim Schauder
Last updated: Mar 02, 2017 by graphomate Team
1 min read

Um das Aussehen von graphomate Komponenten per CSS anzupassen, muss man die CSS-Klasse der entsprechenden Elemente kennen. Diese Anleitung zeigt, wie man mithilfe eines modernen Browsers CSS-Klassen der HTML-Elemente ermittelt. 

Schritt-für-Schritt-Anleitung

  1. Ein Dashboard mit Design Studio erstellen und eine Komponente auf dem Canvas platzieren, welche das zu stylende Element enthält, in diesem Beispiel eine Tabelle.
  2. Dieses Dashboard nun starten. (Beispielsweise in Chrome, wie unten zu sehen)
  3. Im Browser die Taste "F12" drücken. Ein Fenster erscheint am rechten Rand.
  4. Auf das im Bild mit rotem Pfeil markierte Symbol klicken. 
  5. Danach kann ein Element des Dashboards im Browser ausgewählt werden und im rechten Fenster können die Klassen und Eigenschaften des entsprechenden Elements abgelesen werden (gelb markiert).
  6. Über die Klasse kann man dieses Element nun im custom.css ansprechen (um die komplette Tabellenzeile anzusprechen würde sich z.b. der Selektor .georgia empfehlen)



        

Verwandte Artikel