CODEWITHSUNDEEP
user-interfaceshinybackground
chas
chas

Reputation: 1645

Change Background color of fluid page in R shiny

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.

Upvotes: 3

Views: 9696

Answers (1)

Eli Berkow
Eli Berkow

Reputation: 2725

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)

Upvotes: 3

Related Questions