Personalización con formato CSS

Creación de paneles con shinydashboard

Png Kee Seng

Researcher

¿Cómo personalizar más un shinydashboard?

Puedes lograr un tema oscuro eligiendo la piel "black"
¿Podemos cambiar la apariencia de objetos individuales?
Sí, con hojas de estilo en cascada (CSS)
A continuación, un curso exprés de CSS
- No te preocupes por los detalles finos

Introducción a CSS: añadir comentarios

CSS es un lenguaje de estilo
- Controla la apariencia de cada objeto
El código CSS se compone de bloques de selectores
- Con propiedades, subpropiedades, etc.
- Forma un diccionario que registra la apariencia de cada elemento
Guardaremos el CSS como cadena
- Usa comillas simples '...'
Se pueden insertar comentarios en CSS

css_code <- '
/* Esto es un comentario */
'

Introducción a CSS: selectores

En un bloque, hay un selector
- Corresponde a una característica
.selector se refiere a una clase CSS

css_code <- '
/* Esto es un selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* Esto es una clase de selector */
.selector {
  property1: value1;
  property2: value2;
}
`

Introducción a CSS: combinaciones de selectores

Dos selectores .class1 y .class2 se combinan como .class1 .class2
- Dentro de .class1, selecciona la subclase .class2
El espacio es importante
- Si no, el código no funcionará bien

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

Un ejemplo más concreto

Para cambiar la fuente en el encabezado de shinydashboard
- Usa .main-header .logo
- Selecciona la clase .main-header y luego la subclase .logo
Para poner el fondo en negro
- Usa .skin-blue .main-header .logo

css_code <- '
/* Formatea el texto del encabezado principal */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Cambia el color de fondo a negro */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

Un ejemplo completo

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Hay muchas más combinaciones de selectores

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

Aplicar formato CSS a un shinydashboard

El código CSS debe insertarse en dashboardBody()

Shinydashboard con CSS formateado.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

¡Vamos a practicar!

Creación de paneles con shinydashboard