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)


