html - 为所有页面应用背景颜色，包括 Shiny 中的导航栏

Question

在下面的代码中，我尝试在所有闪亮的 UI 页面中设置背景颜色，但我无法为导航栏执行此操作：

library(shiny)
ui <- fluidPage(

    setBackgroundColor(
        color = c("#F7FBFF", "#2171B5"),
        gradient = "linear",
        direction = c("bottom","left")
    ),

titlePanel("Titulo"),

navbarPage( 

title = h1('Métodos'),
    tabPanel(h1('Painel Geral')),
                 tabPanel(h1('Painel Geral')),
                          tabPanel(h1('Painel Geral')),
                                   tabPanel(h1('Painel Geral'))))


server <- function(input, output) {


}


shinyApp(ui = ui, server = server)

如您所见，导航栏仍然是灰色的。如何更改整个页面？

另外如何使用 .css 文件更改它？

我尝试了所有divs但没有奏效。

有什么帮助吗？

非常感谢

标签： htmlcssrshiny

Answer 1

使用这个 CSS：

library(shinyWidgets)
library(shiny)

css <- "
.navbar-default {
  background-color: inherit;
  border: none;
}
"

ui <- fluidPage(
  tags$head(tags$style(css)),
  setBackgroundColor(
    color = c("#F7FBFF", "#2171B5"),
    gradient = "linear",
    direction = c("bottom","left")
  ),
  ......

如果您不想使用shinyWidgets::setBackgroundColor，请使用此 css：

css <- "
body {
  min-height: 100%; 
  width:100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  position: absolute; 
  background: -moz-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: -webkit-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: -ms-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: -o-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
}
.navbar-default {
  background-color: inherit;
  border: none;
}
"