首页 > 解决方案 > 如何更改面板颜色?

问题描述

如何更改面板的面板颜色?如下图所示,我可以通过如下所示的 css 代码更改背景颜色,但无法更改如图所示的面板。

在此处输入图像描述 我可以改变背景颜色。但我无法更改面板颜色。

以下代码是可重现的示例。我应该添加什么 CSS 代码来更改面板的颜色。

   library(shiny)

    # Define UI for application that draws a histogram
    ui <- fluidPage(
        shiny::tags$head(
            # shinythemes::themeSelector()

                              shiny::tags$style(shiny::HTML("


            h1{
              font-size: 35px;
              font-weight: bold;
              font-family: Arial-Black;

              color: #800000            ;

            }

            h2 {
              font-size: 33px;
              font-weight: bold;
              font-family: ACalibri;

              color: #800000            ;

            }

            h3 {
              font-size: 30px;
              font-weight: bold;
              font-family: Calibri;

              color: #800000            ;

            }

            h4 {
              font-size: 27px;
              font-weight: bold;
              font-family: Calibri;

              color: #800000            ;

            }



            h5 {
              font-size: 24px;
              font-weight: bold;
              font-family: Calibri;

              color: #800000            ;

            }



            h6 {
              font-size: 15px;
              font-weight: bold;
              font-family: Arial-Black;

              color: #800000            ;

            }



            img {
                border:0;
            }


            body {
              font-size: 18px;
                 font-weight:bolder;

              font-family: Calibri;


              color: #800000            ;
             font-color: #888889;

             background-color: #222222;



            }


                                           .skin-blue .main-header .logo {
                                            background-color: #f4b943;
                                            }









            p {
                color: #440000      ;
            }




                "))

        ),#taghead
        # Application title
        titlePanel("Old Faithful Geyser Data"),

        # Sidebar with a slider input for number of bins 
        sidebarLayout(
            sidebarPanel(
                sliderInput("bins",
                            "Number of bins:",
                            min = 1,
                            max = 50,
                            value = 30)
            ),

            # Show a plot of the generated distribution
            mainPanel(
               plotOutput("distPlot")
            )
        )
    )

    # Define server logic required to draw a histogram
    server <- function(input, output) {

        output$distPlot <- renderPlot({
            # generate bins based on input$bins from ui.R
            x    <- faithful[, 2]
            bins <- seq(min(x), max(x), length.out = input$bins + 1)

            # draw the histogram with the specified number of bins
            hist(x, breaks = bins, col = 'darkgray', border = 'white')
        })
    }

    # Run the application 
    shinyApp(ui = ui, server = server)

请让我知道任何想法。

标签: rshiny

解决方案


如果要更改整个 的颜色sidebarPanel,可以直接在 R 代码中执行此操作:

sidebarPanel(
  style = "background-color: red;",
  sliderInput(
    "bins",
    "Number of bins:",
    min = 1,
    max = 50,
    value = 30
  )
)

此外,您可以将以下段落添加到您的 CSS 代码段中:

.well {
  background-color: red;
}

推荐阅读