Question

我想自定义我的闪亮应用的盒子状态的颜色。我找到了一种改变这些盒子的盒子背景颜色的方法，但没有自定义状态颜色，但我没有看到＆＃34; status＆＃34;的等效参数。在CSS？因此，我打印一个包含所考虑的参数＆＃34; status＆＃34;的简单页面的源代码。我正在看它的课程（我认为课程=＆＃34; box box-solid box-primary＆＃34;）但是我无法在这个网页提供的几个.css中达到它... :( < / p>

你有什么想法吗？

这是一个简单的代码：

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参数（尤其是闪亮的页面：转到相应的页面并右键单击，类似于＆＃34;检查元素＆＃34; !!

太棒了!!

然后，我看得更深（非常非常深，有太多类!!）我设法访问盒子的任何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样式代码的源优先级有关，并直接添加带有$$ 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)

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

R shinyDashboard自定义框状态颜色

4 个答案: