Change Background color of fluid page in R shiny

Question

I have a shiny fluidpage in cerulean theme with two fluidRows one within another. The first fluidRow places an image and the second fluidRow places text below the image. Below is the UI code:

fluidPage(theme = shinytheme("cerulean"),

       fluidRow(column(12,align ="center",
       div(img(src="test.png", height=200, width=300))),

    fluidRow(column(12, align = 'center', 
                    div(style = "font-size: 20px; padding: 0px 0px; margin-top:-2em"),
                    titlePanel(title = 'Express', windowTitle = 'Express Plots'))
)#closefluidRow
)#closefluidRow
) #closefluidPage

Here, the background color of fluidRows with the image and titlePanel is white and i would need to have a blue (cerulean color) in the background. Could someone hint in achieving this.

Eli Berkow Eli Berkow · Accepted Answer · 2019-11-07T09:22:28

It looks like the shinytheme just makes the text cerulean. Please try the below:

library(shiny)

ui <- fluidPage(
              tags$style('.container-fluid {
                             background-color: #007BA7;
              }'),

              fluidRow(column(12,align ="center",
                              div(img(src="test.png", height=200, width=300))),

                       fluidRow(column(12, align = 'center', 
                                       div(style = "font-size: 20px; padding: 0px 0px; margin-top:-2em"),
                                       titlePanel(title = 'Express', windowTitle = 'Express Plots'))
                       )#closefluidRow
              )#closefluidRow
     #closefluidPage
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

You can play around with the hex colour #007BA7. I got it from cerulean wiki.

You could also add background-color: #007BA7; to a div(style = ...)

Update

Based on comment below. To limit the cerulean to the fluidPage add an id and limit the styling as below:

library(shiny)

ui <- fluidPage(id = 'test',
    tags$style('#test {
                             background-color: #007BA7;
              }'),

    fluidRow(column(12,align ="center",
                    div(img(src="test.png", height=200, width=300))),

             fluidRow(column(12, align = 'center', 
                             div(style = "font-size: 20px; padding: 0px 0px; margin-top:-2em"),
                             titlePanel(title = 'Express', windowTitle = 'Express Plots'))
             )#closefluidRow
    )#closefluidRow
    #closefluidPage
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Change Background color of fluid page in R shiny

1 Answers