Anpassning med CSS-formatering

Bygga dashboards med shinydashboard

Png Kee Seng

Researcher

Hur anpassar man ett shinydashboard ytterligare?

Ett mörkt färgtema kan uppnås med ett "black"-skal
Kan man ändra utseendet på enskilda objekt?
Det går att göra med CSS-kod (cascading style sheets)
Härnäst: en snabbkurs i CSS
- Oroa dig inte för alla detaljer

Introduktion till CSS: lägga till kommentarer

CSS är ett formateringsspråk
- Styr utseendet på varje objekt
CSS-kod består av block med selektorer
- Med egenskaper, underegenskaper osv.
- Bildar ett lexikon som håller reda på varje elements utseende
Vi sparar CSS-kod som en sträng
- Använd enkla citationstecken '...'
Kommentarer kan läggas till i CSS-koden

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

Introduktion till CSS: selektorer

I ett block finns en selektor
- Motsvarar ett visst element
.selector refererar till en CSS-klass

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

  property1: value1;
  property2: value2;

}
`

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

Introduktion till CSS: kombinera selektorer

Två selektorer .class1 och .class2 kan kombineras som .class1 .class2
- Inom .class1 väljs en underklass som heter .class2
Mellanslaget är viktigt
- Utan det fungerar inte koden korrekt

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

Ett mer konkret exempel

För att ändra teckensnittsinställningar i ett shinydashboard-sidhuvud
- Använd .main-header .logo
- Välj klassen .main-header och leta sedan upp underklassen .logo
För att ändra bakgrundsfärgen till svart
- Använd .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; 
}
'

Ett fullständigt exempel

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Det finns många fler selektor-kombinationer

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

Använda CSS-formatering i ett shinydashboard

CSS-kod ska infogas i dashboardBody()

CSS-formaterat shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Nu kör vi en övning!

Bygga dashboards med shinydashboard