How to change outline color of a collapsable box shiny

Viewed 506

I want to change the outline of a collapsible box. Currently, the outline is the default whiteish grey color. I have been trying to figure out how to change the HTML by inspecting the app while running and then trying to change the HTML but I haven't had much luck. I think the problem is that the code will change if the box is collapsed or uncollapsed. I will attach some code and some images of what exactly I want to change. NOTE: I know there are two boxes in the images, the outline that is red is how I want it to look. The bottom box that is still whitish-grey is the default. I just wanted to make sure you could see both.

    library(shiny)
    library(shinydashboard)
    library(DT)
    library(shinyjs)
    library(sodium)
    library(plotly)
    
    
    header <- dashboardHeader(title = "Results", titleWidth=0)
    sidebar <- dashboardSidebar(uiOutput("sidebarpanel"), collapsed = TRUE) 
    body <- dashboardBody(shinyjs::useShinyjs(), tags$head(tags$style(HTML('.logo {
                                  background-color: #334C59 !important;
                                  }
                                  .navbar {
                                  background-color: #334C59 !important;
                                  }
                                  '))), uiOutput("body"))
    ui<-dashboardPage(header, sidebar, body, skin = "blue", tags$head(
      tags$style(HTML(".main-sidebar {
                      background-color:  #334C59 !important;
                      }
                      .skin-blue .main-header .navbar .sidebar-toggle:hover{
                                  background-color: #F190C5; 
                      }
                      .navbar {
                      height: 60px;
                      min-height:60px !important;
                      }
                      .main-header {
                      max-height: 20px
                      }
                      .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                      background-color: #F190C5;color: white;
                      }
                      .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                      background-color: #334C59;
                      color: rgb(255,255,255);
                      text-align: Center;
                      }
                      
                      "))
    )
    )
    
    server <- function(input, output, session) {
    
      
      output$sidebarpanel <- renderUI({
        if (USER$login == TRUE ){ 
          sidebarMenu(id = "tabs",
                      menuItem("Test", tabName = "Test", icon = icon("dna")),
                      menuItem("Test2", tabName = "Test2", icon = icon("microscope")),
                      menuItem("Test3", tabName = "Test3", icon = icon("microscope"))
          )
        }
      })
      
      output$body <- renderUI({
          tabItems(
            # Second tab
            tabItem(tabName = "Diseases", class = "active",
                    fluidRow(
                      column(div(style = "height:25px;"),
                             width = 12, offset = 30,
                             box(
                               title = "Title", collapsible = FALSE, status = "danger", solidHeader = TRUE, collapsed = TRUE,
                               width = 12,
                               box(
                                 title = "Subtitle1", collapsible = TRUE, solidHeader = TRUE, collapsed = TRUE, width = NULL,
                                 fluidRow(column(width=12, align="left", uiOutput("test1_ui"))),
                                 #fluidRow(column(div(style = "right: 10px;"), width=12, uiOutput("test2_ui"))),
                                 column(width = 12, align = "right",
                                        actionButton(inputId='redirect', label="Learn More", 
                                                     icon = icon("book-medical"), 
                                                     onclick ="window.open('https://google.com', '_blank')"),
                                        actionButton(inputId = 'switchtab', 'More', icon =icon("user")))),
                               #tabPanel(title = "Panel 1", value = "Diseases", 
                               #       actionButton('switch_tab', 'View Results'))),
                               box(
                                 title = "Subtitle2", collapsible = TRUE, solidHeader = TRUE, collapsed = TRUE, width = NULL,
                                 fluidRow(column(width=12, align="left", uiOutput("test3_ui"))),
                                 #fluidRow(column(div(style = "right: 10px;"), width=12, uiOutput("test2_ui"))),
                                 column(width = 12, align = "right",
                                        actionButton(inputId='redirect2', label="Learn More", 
                                                     icon = icon("book-medical"), 
                                                     onclick ="window.open('https://google.com', '_blank')"),
                                        actionButton(inputId = 'switchtab2', 'More', icon =icon("user")))),
                             )
                      )
                    ))
          )
          
      })
      
    
      output$test1_ui <- renderUI({
        tagList("abc")
      })
      output$test3_ui <- renderUI({
        tagList("abc")
      })
      
      observeEvent(input$home2, {
        updateTabItems(session, "tabs", "Test")
      })
      
      observeEvent(input$switchtab, {
        updateTabItems(session, "tabs", "Test2")
      })
      
      observeEvent(input$switchtab2, {
        updateTabItems(session, "tabs", "Test3")
      })
    }
    
    
    shinyApp(ui = ui, server = server)

Collapsed Uncollapsed

1 Answers

Define a status in the box of interest (warning here), and then modify the border color for that status in CSS as shown below.

library(shiny)
library(shinydashboard)
library(DT)
library(shinyjs)
#library(sodium)
library(plotly)


header <- dashboardHeader(title = "Results", titleWidth=0)
sidebar <- dashboardSidebar(uiOutput("sidebarpanel"), collapsed = TRUE) 
body <- dashboardBody(shinyjs::useShinyjs(), tags$head(tags$style(HTML('.logo {
                                  background-color: #334C59 !important;
                                  }
                                  .navbar {
                                  background-color: #334C59 !important;
                                  }
                                  '))), 
                      tags$style(HTML("
.box.box-solid.box-warning>.box-header {
  color:black;
  background:white
                    }

.box.box-solid.box-warning{
border-bottom-color:red;
border-left-color:red;
border-right-color:red;
border-top-color:red;
}
                                    ")),
                      uiOutput("body"))
ui<-dashboardPage(header, sidebar, body, skin = "blue", tags$head(
  tags$style(HTML(".main-sidebar {
                      background-color:  #334C59 !important;
                      }
                      .skin-blue .main-header .navbar .sidebar-toggle:hover{
                                  background-color: #F190C5; 
                      }
                      .navbar {
                      height: 60px;
                      min-height:60px !important;
                      }
                      .main-header {
                      max-height: 20px
                      }
                      .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                      background-color: #F190C5;color: white;
                      }
                      .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                      background-color: #334C59;
                      color: rgb(255,255,255);
                      text-align: Center;
                      }
                      i.fa.fa-minus {
                      color:grey;
                      }
                      i.fa.fa-plus {
                      color:grey;
                      }
                      
                      "))
)
)

server <- function(input, output, session) {
  
  output$sidebarpanel <- renderUI({
    if (USER$login == TRUE ){ 
      sidebarMenu(id = "tabs",
                  menuItem("Test", tabName = "Test", icon = icon("dna")),
                  menuItem("Test2", tabName = "Test2", icon = icon("microscope")),
                  menuItem("Test3", tabName = "Test3", icon = icon("microscope"))
      )
    }
  })
  
  output$body <- renderUI({
    tabItems(
      # Second tab
      tabItem(tabName = "Diseases", class = "active",
              fluidRow(
                column(div(style = "height:25px;"),
                       width = 12, offset = 30,
                       box(
                         title = "Title", collapsible = FALSE, status = "danger", solidHeader = TRUE, collapsed = TRUE,
                         width = 12,
                         box(
                           title = "Subtitle1", collapsible = TRUE, status = "warning", solidHeader = TRUE, collapsed = TRUE, width = NULL,
                           fluidRow(column(width=12, align="left", uiOutput("test1_ui"))),
                           #fluidRow(column(div(style = "right: 10px;"), width=12, uiOutput("test2_ui"))),
                           column(width = 12, align = "right",
                                  actionButton(inputId='redirect', label="Learn More", 
                                               icon = icon("book-medical"), 
                                               onclick ="window.open('https://google.com', '_blank')"),
                                  actionButton(inputId = 'switchtab', 'More', icon =icon("user")))),
                         #tabPanel(title = "Panel 1", value = "Diseases", 
                         #       actionButton('switch_tab', 'View Results'))),
                         box(
                           title = "Subtitle2", collapsible = TRUE, status = "warning", solidHeader = TRUE, collapsed = TRUE, width = NULL,
                           fluidRow(column(width=12, align="left", uiOutput("test3_ui"))),
                           #fluidRow(column(div(style = "right: 10px;"), width=12, uiOutput("test2_ui"))),
                           column(width = 12, align = "right",
                                  actionButton(inputId='redirect2', label="Learn More", 
                                               icon = icon("book-medical"), 
                                               onclick ="window.open('https://google.com', '_blank')"),
                                  actionButton(inputId = 'switchtab2', 'More', icon =icon("user")))),
                       )
                )
              ))
    )
    
  })
  
  
  output$test1_ui <- renderUI({
    tagList("abc")
  })
  output$test3_ui <- renderUI({
    tagList("abc")
  })
  
  observeEvent(input$home2, {
    updateTabItems(session, "tabs", "Test")
  })
  
  observeEvent(input$switchtab, {
    updateTabItems(session, "tabs", "Test2")
  })
  
  observeEvent(input$switchtab2, {
    updateTabItems(session, "tabs", "Test3")
  })
}


shinyApp(ui = ui, server = server)

output

Related