R Shiny box content background color
13,345
if you want to change only the background of the box content, do this:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-primary>.box-header {
}
.box.box-solid.box-primary{
background:#222d32
}
")),
fluidRow(
box(width = 6, title = "test", status = "primary", solidHeader
= TRUE,
"Box content"
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
if you want to change everything in the box do this:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-primary>.box-header {
color:#fff;
background:#222d32
}
.box.box-solid.box-primary{
border-bottom-color:#222d32;
border-left-color:#222d32;
border-right-color:#222d32;
border-top-color:#222d32;
background:#222d32
}
")),
fluidRow(
box(width = 6, title = "test", status = "primary", solidHeader =
TRUE,
"Box content"
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Related videos on Youtube
Author by
Sharma
Updated on May 20, 2022Comments
-
Sharma about 2 years
I am trying to change the background content colour of my box from white to #222d32 (or any custom colour), however when using the
background
parameter I get the errorError in validateColor(background): Invalid color: #222d32. Valid colors are: red, yellow, aqua, blue, light-blue, green, navy, teal, olive, lime, orange, fuchsia, purple, maroon, black.
Code below:
library(shiny) library(shinydashboard) ui <- dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody( fluidRow( box(width = 6, title = "test", status = "primary", solidHeader = TRUE, background = '#222d32', "Box content" ) ) ) ) server <- function(input, output) {} shinyApp(ui, server)
I have also tried to create a custom wrapper to catch the
<div>
and modify it, however was not successful. Code below:library(shiny) library(shinydashboard) box_customBackground <- function(box_object, color = NULL){ new_color_class <- paste0('<div class="box box-solid ', color ,'">') box_modify <- gsub('<div class="box">', new_color_class, box_object) box_html <- HTML(box_modify) return(box_html) } ui <- dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody( fluidRow( box_customBackground(box_object = box( actionButton(inputId = 'SelectGroup', label = 'Change Groups'), checkboxGroupInput(inputId = 'SimulationType', choices = c('Growth', 'Step'), selected = 'Growth', label = NULL, inline = TRUE), width = 5), color = '#222d32' ) ) ) ) server <- function(input, output) {} shinyApp(ui, server)