css - 更改导航栏菜单的字体类型和背景颜色

Question

我有一个 Shiny 的应用程序，我想更改导航栏菜单的字体类型和背景颜色。

我在运行应用程序后对此使用了“检查”，我发现这个元素是:

a href="#" class="dropdown-toggle" data-toggle="dropdown" data-value="More">
                  More
                  <b class="caret"></b>
                </a>

但是我不熟悉css。

ui <- function(){

bootstrapPage('',

            navbarPage(title = 'Hello colour changed',
                       navbarMenu("More",
                                  tabPanel("Table"

                                  ),
                                  tabPanel("About"

                                  )
                       )),

            tags$style(type = 'text/css', '.navbar { background-color: #252525;
                       font-family: Arial;
                       font-size: 13px;
                       color: #FF0000; }',

                       '.navbar-dropdown { background-color: #252525;
                       font-family: Arial;
                       font-size: 13px;
                       color: #FF0000; }',

                       '.navbar-default .navbar-brand {
                       color: #cc3f3e;
            }'

            ))

            }

            server <- function(input, output, session){
            }


            shinyApp(ui = ui, server = server)

Answer 1

下面将更改导航栏的背景颜色、文本颜色，您还可以设置font-family来更改字体类型。

library(shiny)
library(shinydashboard)

ui <- function(){
  navbarPage(title = 'Hello colour change',
             tabPanel("title2"),
             tabPanel("title3"),

             tags$style(type = 'text/css', 
                        '.navbar { background-color: red;}',
                        '.navbar-default .navbar-brand{color: white;}',
                        '.tab-panel{ background-color: red; color: white}'

             ))
  }

server <- function(input, output, session){
}

shinyApp(ui = ui, server = server)