Personalizacja za pomocą CSS

Tworzenie dashboardów z shinydashboard

Png Kee Seng

Researcher

Jak dalej personalizować shinydashboard?

Ciemny motyw kolorystyczny można uzyskać, wybierając skórkę "black"
Czy można zmienić wygląd poszczególnych elementów?
Można to osiągnąć za pomocą kodu CSS
Następnie krótki kurs CSS
- Nie przejmuj się szczegółami

Wprowadzenie do CSS: komentarze

CSS to język stylizacji
- Kontroluje wygląd każdego elementu
Kod CSS składa się z bloków selektorów
- Z właściwościami, podwłaściwościami itp.
- Tworzy słownik śledzący wygląd każdej cechy
Kod CSS zapisujemy jako ciąg znaków
- Używamy pojedynczych cudzysłowów '...'
Do kodu CSS można wstawiać komentarze

css_code <- '
/* This is a comment */
'

Wprowadzenie do CSS: selektory

W bloku znajduje się selektor
- Odpowiada określonej cesze
.selector odnosi się do klasy CSS

css_code <- '
/* This is a selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* This is a selector class */
.selector {
  property1: value1;
  property2: value2;
}
`

Wprowadzenie do CSS: kombinacje selektorów

Dwa selektory .class1 i .class2 można połączyć jako .class1 .class2
- W obrębie .class1 wybiera podklasę .class2
Spacja ma znaczenie
- W przeciwnym razie kod nie będzie działał poprawnie

css_code <- '
.class1 .class2 {
  property1: value1;
  property2: value2;
  property3: value3;
}
`

Konkretny przykład

Aby zmienić ustawienia czcionki w nagłówku shinydashboard
- Wymagane .main-header .logo
- Wybierz klasę .main-header, a następnie podklasę .logo
Aby zmienić kolor tła na czarny
- Wymagane .skin-blue .main-header .logo

css_code <- '
/* Format the text in the main header */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Change the background-color to black */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

Pełny przykład

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Istnieje wiele innych kombinacji selektorów

css_code <- '
.main-header .logo {
  font-family: "helvetica",  serif, Times, "Times New Roman";
  font-weight: bold;
  font-size: 24px;
}
.skin-blue .main-header .logo {
          background-color: #000000; 
}

.skin-blue .main-header .logo:hover {
          background-color: blue; 
}

.skin-blue .main-header .navbar {
          background-color: #999999;
}
'

Stosowanie CSS w shinydashboard

Kod CSS należy wstawić w dashboardBody()

Shinydashboard sformatowany za pomocą CSS.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Czas na ćwiczenia!

Tworzenie dashboardów z shinydashboard