Spezifische CSS Elemente in DataLion [Artikel in Bearbeitung]

CSS-Selektoren

Mit welchem Selektor kann ich meinen Chart Titel umformatieren?

.chart__title__text

Mit welchem Selektor kann ich den Infotext im Footer eines Charts umformatieren?

.source_info

Mit welchem Selektor kann ich den Header der Seite umformatieren?

.page__header

Mit welchen Selektor kann ich den Chart Header umformatieren?

.chart__header

Mit welchem Selektor kann ich die Titel umformatieren?

.edit-title

Mit welchem Selektor kann ich das Label der Dropdowns bei Filtern umformatieren?

.filter__dropdown label

Mit welchem Selektor kann ich die Report-Tabs umformatieren?

.report-tab-link

Mit welchem Selektor kann ich den aktuell gewählten Report-Tab umformatieren?

#report-tab-dropdown

Mit welchem Selektor kann ich den Hover Effekt eines Buttons umformatieren?

.btn-default:hover

Mit welchem Selektor kann ich die Buttons auf der Seite umformatieren?

.btn-default

Mit welchem Selektor kann ich den Footer der Seite umformatieren?

.footer

Mit welchem Selektor kann ich Tabellenspalten Formatieren?

Spalte 0:

.table-column-0

Mit welchem Selektor kann ich Tabellen-Unterspalten Formatieren?

Tabellen-Unterspalte mit Spaltenname Filter1:

.table-cell-filter1 

Tabellen-Unterspalte mit Spaltenname Filter1 der Spalte 0:

.table-column-0.table-cell-filter1

Standard CSS-Properties und deren Werte

Im folgenden haben wir eine kleine Vorauswahl an CSS-Properties getroffen, die man nutzen kann in seinem Projekt. 

Ein tolle und umfangreiche Doku zu allen möglichen Properties gibt es hier:

https://www.w3schools.com/css/default.asp 
background-color Ansteuerung der Hintergrundfarbe

Beispiel: Selektor{background-color:#000000;}
  • Angabe in rgb(123,123,123)
  • Angabe in hex: #000000
background-image Einstellung eines Hintergrundbildes

Beispiel: Selektor{background-image: url(‘https://datalion.net/bild.jpg’);}
  • Die Einstellung eines Hintergrundbildes finden Sie unter HTML – Hintergründe
background-repeat Wiederholung des Hintergrundbildes

Beispiel: Selektor{background-image: url(‘https://datalion.net/bild.jpg’);background-repeat:no-repeat;}
  • no-repeat
  • repeat-x (Wiederholung des Bildes in der Horizontale)
  • repeat-y (Wiederholung des Bildes in der Vertikale)
color Ansteuerung der Farbe eines Elements

Beispiel: Selektor{color:#000000;}
  • Angabe in rgb(123,123,123)
  • Angabe in rgba(123,123,123,0.3)
  • Angabe in hex: #000000
border-style Einstellung der Umrandung

Beispiel: Selektor{border-style:none;}
  • dotted (Gepunktete Umrandung)
  • dashed (Gestrichelte Umrandung)
  • solid (Durchgezogene Umrandung)
  • double (Doppelte Umrandung)
  • none (Keine Umrandung)
  • hidden (Versteckte Umrandung)
text-align Ausrichtung des Textes

Beispiel: Selektor{text-align:center;}
  • center (Zentriert)
  • left (Linksbündig)
  • right (Rechtsbündig)
  • justify (Blocksatz)
font-size Größe des Textes

Beispiel: Selektor{font-size:23px;}
  • 23px (Frei wählbar)
font-family Festlegen der Schriftart

Beispiel: Selektor{font-family:“Times New Roman“;}
  • “Name der Schriftart”
text-decoration

Beispiel: Selektor{text-decoration:underline;}
  • underline
  • overline
  • line-through
  • none
padding - Abstände um Text oder Elemente

Beispiel: Selektor{padding:10px 24px 10px 24px}

Der Value Padding beschreibt den Abstand um einen Text, welcher die Größe eines Elements beeinflusst.

Der erste Wert ist der Abstand oben, der zweite ist der Abstand rechts, der dritte beschreibt den unteren Abstand und der letzte den Abstand auf der linken Seite. Um die Seiten gezielt anzusteuern kann man auch padding-left / padding-top / padding-right / padding-bottom nutzen.

Transparenzen eines Textfeldes in DataLion festlegen

.textfield{
Background:transparent;
}