Aanpassen met CSS-opmaak

Dashboards bouwen met shinydashboard

Png Kee Seng

Researcher

Hoe pas je een shinydashboard verder aan?

Een donker thema krijg je door skin "black" te kiezen
Kunnen we losse objecten uiterlijk aanpassen?
Ja, met CSS (Cascading Style Sheets)
Straks een korte CSS-crashcourse
- Maak je niet druk om de details

Introductie tot CSS: commentaar toevoegen

CSS is een opmaaktaal
- Bepaalt het uiterlijk van elk object
CSS-code bestaat uit blokken met selectors
- Met properties, subproperties, enz.
- Vormt een woordenboek dat het uiterlijk bijhoudt
We slaan CSS op als een string
- Gebruik enkele aanhalingstekens '...'
Je kunt commentaar toevoegen in CSS

css_code <- '
/* Dit is een commentaar */
'

Introductie tot CSS: selectors

In een blok staat een selector
- Komt overeen met een bepaalde feature
.selector verwijst naar een CSS-klasse

css_code <- '
/* Dit is een selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* Dit is een selectorklasse */
.selector {
  property1: value1;
  property2: value2;
}
`

Introductie tot CSS: selectorcombinaties

Combineer twee selectors .class1 en .class2 als .class1 .class2
- Binnen .class1 selecteer je subklasse .class2
De spatie is belangrijk
- Anders werkt de code niet goed

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

Een concreter voorbeeld

Lettertype-instellingen in een shinydashboard-header wijzigen
- Gebruik .main-header .logo
- Selecteer de klasse .main-header en zoek dan de subklasse .logo
Achtergrondkleur naar zwart wijzigen
- Gebruik .skin-blue .main-header .logo

css_code <- '
/* Tekst in de hoofdkop opmaken */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Achtergrondkleur naar zwart wijzigen */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

Een volledig voorbeeld

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Er zijn veel meer combinaties van selectors

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

CSS-opmaak toepassen op een shinydashboard

Plaats CSS-code in dashboardBody()

CSS-opgemaakt shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Laten we oefenen!

Dashboards bouwen met shinydashboard