Personalização com formatação CSS

Construindo dashboards com shinydashboard

Png Kee Seng

Researcher

Como personalizar ainda mais um shinydashboard?

Um tema escuro pode ser obtido escolhendo o skin "black"
Dá para mudar a aparência de objetos individuais?
Sim, usando código de folhas de estilo em cascata (CSS)
Agora, um minicutso de CSS
- Não se preocupe com os detalhes finos

Introdução ao CSS: adicionando comentários

CSS é uma linguagem de estilo
- Controla a aparência de cada objeto
Um código CSS é composto por blocos de seletores
- Com propriedades, subpropriedades etc.
- Forma um dicionário que registra a aparência de cada recurso
Vamos salvar o CSS como uma string
- Use aspas simples '...'
Comentários podem ser inseridos no CSS

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

Introdução ao CSS: seletores

Em um bloco, há um seletor
- Corresponde a um certo recurso
.selector se refere a uma 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;
}
`

Introdução ao CSS: combinações de seletores

Dois seletores .class1 e .class2 podem ser combinados como .class1 .class2
- Dentro de .class1, selecione a subclasse .class2
O espaço é importante
- Caso contrário, o código não funcionará corretamente

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

Um exemplo mais concreto

Para alterar a fonte no cabeçalho do shinydashboard
- Use .main-header .logo
- Selecione a classe .main-header e, depois, a subclasse .logo
Para mudar o fundo para preto
- Use .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; 
}
'

Um exemplo completo

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Existem muitas outras combinações de seletores

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

Aplicando formatação CSS a um shinydashboard

O CSS deve ser inserido em dashboardBody()

Shinydashboard formatado com CSS.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Vamos praticar!

Construindo dashboards com shinydashboard