Css R shinyDashboard定制盒子状态颜色
我想自定义我的闪亮应用程序的状态框的颜色。 我找到了一种css方法来更改这些框的框背景颜色,但没有自定义状态颜色,但是我没有看到css中“status”的等效参数? 因此,我打印了一个简单页面的源代码,其中包含经过考虑的参数“status”,我正在查看它的类(我想class=“box solid box primary”),但我没有在本网页中提供的几个.css中找到它…:( 你有什么想法吗 以下是简单的代码:Css R shinyDashboard定制盒子状态颜色,css,r,shiny,box,shinydashboard,Css,R,Shiny,Box,Shinydashboard,我想自定义我的闪亮应用程序的状态框的颜色。 我找到了一种css方法来更改这些框的框背景颜色,但没有自定义状态颜色,但是我没有看到css中“status”的等效参数? 因此,我打印了一个简单页面的源代码,其中包含经过考虑的参数“status”,我正在查看它的类(我想class=“box solid box primary”),但我没有在本网页中提供的几个.css中找到它…:( 你有什么想法吗 以下是简单的代码: library(shiny) library(shinydashboard) ui
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)
库(闪亮)
图书馆(shinydashboard)
ui我终于找到了答案(漫长而艰难,但总是令人满意: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)
库(闪亮)
图书馆(shinydashboard)
ui这太棒了,对我来说效果非常好!我只是想补充一点,如果你想在solidHeader=FALSE
中使用新的颜色,你可以添加一些代码(为了回答Dmitri的问题)。你需要更改标题中文本的颜色(我现在使用黑色)我的新“状态”是紫色的。下面是一个示例(我正在替换危险
状态,而不是主要
):
库(闪亮)
图书馆(shinydashboard)
ui由于我已经尝试更改状态颜色好几个小时了,如果有人再次遇到同样的问题,我想我会在这里分享我的解决方案
我试图在一个专用的CSS文件中编辑CSS代码,但这不起作用。但当我通过标签$style(如Charlotte Sirot和Michelle Ross提供的解决方案)将CSS代码直接添加到闪亮的应用程序文件中时,它起了作用
可能与确定CSS样式代码源的优先级有关,并且直接添加带有标记$style的代码会覆盖所有其他源。这太棒了!感谢您和您的朋友,此解决方案似乎只适用于以下boxPlus()
或box()
参数:solidHeader=TRUE
和status=“primary”
。否则它会失败。我应该如何找到一个不受这些参数限制的更灵活的解决方案?我怀疑这是.box.box solid.box primary
行,尽管我不知道如何准确地更改它。谢谢。我有与@DmitryShutin相同的注释。当solidHeader=FALSE时,我该如何更改它?有什么问题吗看到所有css元素了吗?这是我和Shiny经常遇到的问题。对于Dimitry的问题,我发现这篇文章是一个完美的答案:
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)