R闪亮Dashboard自定义框状态颜色

Question

我想自定义闪亮应用程序的框状态颜色。 我找到了一种 css 方法来更改这些框的框背景颜色，但不自定义状态颜色，但我在 css 中没有看到“status”的等效参数？ 因此，我打印了一个简单页面的源代码，其中包含所考虑的参数“status”，并且我正在查看它的类（我认为 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)

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