Personalizzare con il CSS

Creare dashboard con shinydashboard

Png Kee Seng

Researcher

Come personalizzare ancora uno shinydashboard?

Un tema scuro si ottiene scegliendo la skin "black"
Possiamo cambiare l’aspetto di singoli oggetti?
Sì, con codice CSS (Cascading Style Sheets)
A seguire, mini‑corso su CSS
- Non preoccuparti dei dettagli fini

Introduzione al CSS: aggiungere commenti

Il CSS è un linguaggio di stile
- Controlla l’aspetto di ogni oggetto
Il codice CSS è fatto di blocchi di selettori
- Con proprietà, sottoproprietà, ecc.
- Forma un dizionario che tiene traccia dell’aspetto di ogni feature
Salveremo il CSS come stringa
- Usa apici singoli '...'
Si possono inserire commenti nel CSS

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

Introduzione al CSS: selettori

In un blocco c’è un selettore
- Corrisponde a una certa caratteristica
.selector indica una classe CSS

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

  property1: value1;
  property2: value2;

}
`

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

Introduzione al CSS: combinazioni di selettori

Due selettori .class1 e .class2 si combinano come .class1 .class2
- Dentro .class1, seleziona la sottoclasse .class2
Lo spazio è importante
- Altrimenti il codice non funziona correttamente

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

Un esempio più concreto

Per cambiare il font nell’header di shinydashboard
- Usa .main-header .logo
- Seleziona la classe .main-header, poi la sottoclasse .logo
Per impostare sfondo nero
- Usa .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; 
}
'

Un esempio completo

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Ci sono molte altre combinazioni di selettori

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;
}
'

Applicare il CSS a uno shinydashboard

Inserisci il codice CSS in dashboardBody()

Shinydashboard formattato con CSS.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Andiamo a esercitarci!

Creare dashboard con shinydashboard