Personnalisation avec la mise en forme CSS

Créer des tableaux de bord avec shinydashboard

Png Kee Seng

Researcher

Comment peaufiner un shinydashboard ?

Un thème sombre peut s'obtenir avec l'habillage "black"
Peut-on modifier l'apparence d'objets précis ?
Oui, au moyen de feuilles de style en cascade (CSS)
À suivre : mini-cours éclair sur le CSS
- Ne vous attardez pas aux détails fins

Introduction au CSS : ajouter des commentaires

Le CSS est un langage de style
- Il contrôle l'apparence de chaque objet
Un code CSS est composé de blocs de sélecteurs
- Avec des propriétés, sous-propriétés, etc.
- Forme un dictionnaire qui consigne l'apparence de chaque élément
Nous enregistrerons le CSS dans une chaîne de caractères
- Utilisez des guillemets simples '...'
On peut insérer des commentaires dans le CSS

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

Introduction au CSS : sélecteurs

Dans un bloc, il y a un sélecteur
- Il correspond à un certain élément
.selector désigne une 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;
}
`

Introduction au CSS : combinaisons de sélecteurs

Deux sélecteurs .class1 et .class2 peuvent se combiner en .class1 .class2
- À l'intérieur de .class1, sélectionner la sous-classe .class2
L'espace est essentiel
- Sinon, le code ne fonctionnera pas correctement

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

Un exemple plus concret

Pour changer la police dans l'en-tête d'un shinydashboard
- Utiliser .main-header .logo
- Sélectionner la classe .main-header, puis la sous-classe .logo
Pour mettre l'arrière-plan en noir
- Utiliser .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; 
}
'

Exemple complet

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Il existe bien d'autres combinaisons de sélecteurs

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

Appliquer la mise en forme CSS à un shinydashboard

Le code CSS doit être inséré dans dashboardBody()

shinydashboard mis en forme par CSS.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Passons à la pratique !

Créer des tableaux de bord avec shinydashboard