R shinyDashboard 自定义框状态颜色

Question

我想自定义闪亮应用的框状态颜色。 我找到了一种 css 方法来更改这些框的框背景颜色但不自定义状态颜色，但是我在 css 中没有看到“状态”的等效参数？ 因此，我打印了一个包含考虑的参数“状态”的简单页面的源代码，我正在查看它的类（我认为 class="box box-solid box-primary"）但我无法在几个本网页提供的 .css... :(

你有什么想法吗？

这是这个简单的代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
          "Box content"
      )
    )
    )
    )


server <- function(input, output) {}

shinyApp(ui, server)

提前感谢您的帮助！

恰

Answer 1

我终于找到了答案（漫长而艰难但总是令人欣慰：D）

我的一个朋友（非常感谢我的朋友！！！）向我展示了如何显示网页（尤其是闪亮页面）每个元素的所有 css 参数：转到相应的页面并右键单击，比如“检查元素”！！

太棒了！

然后，我看的更深（非常非常非常深，有这么多类！！），我设法访问了盒子的任何 css 参数！

这里是下一个人的代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


.box.box-solid.box-primary>.box-header {
  color:#fff;
  background:#666666
                    }

.box.box-solid.box-primary{
border-bottom-color:#666666;
border-left-color:#666666;
border-right-color:#666666;
border-top-color:#666666;
}

                                    ")),
    fluidRow(
      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
          "Box content"
      )
    )
  )
)


server <- function(input, output) {}

shinyApp(ui, server)

周末愉快！！

干杯！

Answer 2

这太棒了，对我来说效果很好！我只是想补充一点，如果您希望能够将新颜色与solidHeader = FALSE 一起使用，您可以添加一小段代码（以解决 Dmitri 的问题）。您需要更改标题中文本的颜色（我现在使用黑色）并且我的新“状态”是紫色。下面是一个示例（我替换的是danger 状态而不是primary）：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


.box.box-solid.box-danger>.box-header {
  color:#fff;
  background:#9966ff
                    }

.box.box-solid.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
}

.box.box-danger>.box-header {
  color:#000000;
  background:#fff
                    }

.box.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
}

                                    ")),
    fluidRow(
      box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
          "Box content"
      )
    )
  )
)


server <- function(input, output) {}

shinyApp(ui, server)

（我按照 OP 的说明显示所有 css 参数，找到了这种框的正确参数。）

Answer 3

由于我已经尝试更改状态颜色几个小时了，如果有人再次遇到同样的问题，我想我会在这里分享我的解决方案。

我试图在一个专用的 CSS 文件中编辑 CSS 代码，但这不起作用。但是，当我通过 tags$style 将 CSS 代码直接添加到闪亮的应用程序文件中时（就像 Charlotte Sirot 和 Michelle Ross 提供的解决方案），它起作用了。

可能与优先考虑 CSS 样式代码的来源有关，并且直接添加带有 tags$style 的代码会覆盖所有其他来源。

Answer 4

我只是从@Michelle Ross 和@Charlotte Sirot 构建出色的答案，并希望其他人也将从这种变化中受益：我想为不同的状态定制不同的颜色，这里我选择了“危险”和“信息” .我还希望盒子内容背景填充颜色。为了实现这一点，我使用了以下代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


.box.box-solid.box-danger>.box-header {
  color:#9966ff;
  background:#9966ff
                    }

.box.box-solid.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
}

.box.box-danger>.box-header {
  color:#fff; 
  background:#9966ff
                    }

.box.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
background: #9966FF;
}

.box.box-solid.box-info>.box-header {
  color:#000000;
  background:#FFAE66
                    }

.box.box-solid.box-info{
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
}

.box.box-info>.box-header {
  color:#fff; 
  background:#FFAE66
                    }

.box.box-info{
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
background: #FFAE66;
}

                                    ")),
    fluidRow(
      box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
          "Box content"
      ),
      box(width = 6, title = "Hanna", status = "info", solidHeader = F,
          "blabla")
    )
  )
)


server <- function(input, output) {}

shinyApp(ui, server)

并生成了一个带有如下框的闪亮仪表板：