R Shiny - Background of Sidebar Panel

R shiny - background of sidebar panel

Try this:

library(shiny)

ui <- shinyUI(fluidPage(
  tags$head(tags$style(
    HTML('
         #sidebar {
            background-color: #dec4de;
        }

        body, label, input, button, select { 
          font-family: "Arial";
        }')
  )),
  titlePanel("Hello Shiny!"),

  sidebarLayout(
    sidebarPanel(id="sidebar",
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),

    mainPanel(
      plotOutput("distPlot")
    )
  )
))

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

  output$distPlot <- renderPlot({
    x    <- faithful[, 2]  # Old Faithful Geyser data
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })

})

shinyApp(ui=ui,server=server)

The sidebar doesn't have any other attributs than 'col-sm-4' when initialized so you can either use jQuery and some logic to figure out which is the propper column to color (so that we only set the background of the sidebar), or you can give a id to the form nested in the column and color the background of this form.

In R Shiny, how too draw a box around a specified section of a sidebar panel?

Maybe with wellPanel:

  output$panel <- renderUI({
    tagList(
      useShinyjs(),
      strong(helpText("SLIDER INPUT HERE...")),
      div(style = "margin-top: 15px"),
      wellPanel(
        firstInput("input1"),
        strong(helpText("Generate curves (Y|X):")),
        tableOutput("checkboxes"),
        hidden(uiOutput("secondInput"))
      ),
      strong(helpText("ADDITIONAL SCENARIOS..."))
    )
  })

I have not tried, but I think you can change the background color with an inline style:

  wellPanel(
    style = "background-color: cyan;",
    firstInput("input1"),
    strong(helpText("Generate curves (Y|X):")),
    tableOutput("checkboxes"),
    hidden(uiOutput("secondInput"))
  ),
  strong(helpText("ADDITIONAL SCENARIOS..."))
  

How to change the background color of the Shiny Dashboard Body

Ok, ideally I would like you to use dashboardthemes package https://github.com/nik01010/dashboardthemes, where you can create your own themes with ease, however you can css the .content-wrapper like so:

#rm(list = ls())
library(shinydashboard)
library(shiny)
library(DT)
library(shinyWidgets)
library(dplyr)
ui=shinyUI(
  dashboardPage(
    dashboardHeader(
      title = "Example of a long title that needs more space",
      titleWidth = 450
    ),
    dashboardSidebar( sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets",
               badgeLabel = "new", badgeColor = "green")
    )),
    dashboardBody(
      
      tags$head(tags$style(HTML('
                                /* logo */
                                .skin-blue .main-header .logo {
                                background-color: #f4b943;
                                }
                                
                                /* logo when hovered */
                                .skin-blue .main-header .logo:hover {
                                background-color: #f4b943;
                                }
                                
                                /* navbar (rest of the header) */
                                .skin-blue .main-header .navbar {
                                background-color: #f4b943;
                                }
                                
                                /* main sidebar */
                                .skin-blue .main-sidebar {
                                background-color: #f4b943;
                                }
                                
                                /* active selected tab in the sidebarmenu */
                                .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                                background-color: #ff0000;
                                }
                                
                                /* other links in the sidebarmenu */
                                .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                                background-color: #00ff00;
                                color: #000000;
                                }
                                
                                /* other links in the sidebarmenu when hovered */
                                .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                                background-color: #ff69b4;
                                }
                                /* toggle button when hovered  */
                                .skin-blue .main-header .navbar .sidebar-toggle:hover{
                                background-color: #ff69b4;
                                }

                                /* body */
                                .content-wrapper, .right-side {
                                background-color: #7da2d1;
                                }
                                
                                ')))
      )
    
    
      )
      )
server=shinyServer(function(input,output,session){})
shinyApp(ui,server)

R Shiny - Column in Conditional Panel outside Sidebar Panel

Due to the styles of this app, you need to set column width to 12 or add another col-sm-6 element, then add <br> and <hr>:

hr(),
h4("Row Dendrogram"),
column(
  width = 12,
  selectizeInput("distFun_col",
                 "Distance Method",
                 c(Euclidean = "euclidean",
                   Maximum = "maximum",
                   Manhattan = "manhattan",
                   Canberra = "canberra",
                   Binary = "binary",
                   Minkowski = "minkowski"),
                 selected = "euclidean")),
br(),
hr(),

Then, it should look like this:

This happens, because the col-sm-* classes have float: left; attribute, which makes them heightless, so they overflow the parent container.

---

Related Topics