Specific HTML & CSS elements in DataLion

CSS-Selectors

Which selector can I use to format my chart title?

.chart__title__text

Which selector can I use to reformat the info text in the footer of a chart?

.source_info 

Which selector can I use to format the page header?

.page__header

With which selector can I reformat the chart header?

.chart__header

Which selector can I use to format the titles?

.edit-title

With which selector can I reformat the label of the dropdowns for filters?

.filter__dropdown label

Which selector can I use to reformat the report tabs?

.report-tab-link

Which selector can I use to reformat the currently selected report tab?

#report-tab-dropdown

Which selector can I use to reformat the hover effect of a button?

.btn-default:hover

Which selector can I use to reformat the buttons on the page?

.btn-default 

Which selector can I use to format the footer of the page?

.footer

Which selector can I use to format table columns?

Column 0:

.table-column-0

Which selector can I use to format table subcolumns?

Table sub-column with column name Filter1:

.table-cell-filter1 

Table sub-column with column name Filter1 of a column 0:

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

Standard CSS properties and their values

In the following we have made a small preselection of CSS properties that you can use in your project.

A great and extensive documentation on all possible properties can be found here:

https://www.w3schools.com/css/default.asp

background-color Control of the background color

Example: Selector{background-color:#000000;}

• Specification in rgb(123,123,123)
• Specification in hex: #000000

background-image Setting a background image

Example: Selector{background-image: url(‘https://datalion.net/bild.jpg’);}

• Setting a background image can be found under HTML – Backgrounds

background-repeat Repeating the background image

Example: Selector{background-image: url(‘https://datalion.net/bild.jpg’);background-repeat:no-repeat;}

• no-repeat
• repeat-x (Horizontal repetition of the image)
• repeat-y (Vertical repetition of the image)

color Controlling the color of an element

Example: Selector{color:#000000;}

• Specification in rgb(123,123,123)
• Specification in rgba(123,123,123,0.3)
• Specification in hex: #000000

border-style Border setting

Example: Selector{border-style:none;}

• dotted (Dotted border)
• dashed (Dashed border)
• solid (Solid border)
• double (Double border)
• none (No border)
• hidden (Hidden border)

text-align Alignment of the text

Example: Selector{text-align:center;}

• center 
• left 
• right
• justify

font-size Size of the text

Example: Selector{font-size:23px;}

• 23px (Freely selectable)

font-family Set the font

Example: Selector{font-family:“Times New Roman“;}

• “Font name”

text-decoration

Example: Selector{text-decoration:underline;}

• underline
• overline
• line-through
• none

padding - Spacing around text or elements

Example: Selector{padding:10px 24px 10px 24px}

The value padding describes the distance around a text, which influences the size of an element.

The first value is the space at the top, the second is the space at the right, the third describes the space at the bottom, and the last is the space at the left. You can also use padding-left / padding-top / padding-right / padding-bottom to target the pages.

Set transparencies of a text field in DataLion

.textfield{
Background:transparent;
}