css - 更改 tabBox 标题中字体的颜色和大小

Question

虽然我不是很熟悉 CSS，但我已经能够将它包含在我的 R 代码中以更改我 Shiny 的应用程序的各种元素。但是，我无法弄清楚我需要更改哪个元素才能更改 tabBox 标题中字体的颜色和大小，它来自 shinydashboard 包。

我应用程序中的其他框的标题具有深色背景和浅色字体。我已经能够更改 tabBox header 的背景，使其变暗(见下面的代码)，但我没有看到任何元素似乎会影响字体。

我可以使用 body 中的 font-size 更改选项卡标签的字体大小，或者我可以使用 更改框中文本的颜色>颜色。但是我找不到任何与标题标题本身的属性相关的内容!

感谢您的帮助。

示例代码:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tabBox(title = "Title of box", 
           tabPanel("Tab A"),
           tabPanel("Tab B")),
    tags$head(tags$style(HTML('
                              /* tabBox background */                    
                              .nav-tabs-custom>.nav-tabs {
                              background-color: #2F4858;
                              }
                             '
    )
    )
    )
  )
)

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

}

shinyApp(ui, server)

Answer 1

找到这种东西的方法是使用右键菜单项“检查元素”(在Firefox中，其他浏览器中的名称类似，但RStudio中的内置浏览器不如独立浏览器).单击标题所在的位置，它将突出显示，屏幕右侧的面板中显示许多 CSS 属性。我的节目

标题在主显示屏中突出显示。从顶部开始，寻找您感兴趣的属性。我在第三组中看到了 font-size 和 color。它有一个有点令人困惑的顶行:说 AdminLTE.min.css:7 的部分说了这个定义是在哪里找到的，其余的 .nav-tabs-custom > .nav-tabs > li .header 是对该元素有效的选择器。

因此，要更改大小和颜色，请使用该选择器，例如将其放入您的 tabBox:

tags$head(tags$style(HTML('
 /* tabBox background */                    
 .nav-tabs-custom>.nav-tabs {
     background-color: #2F4858;
 }
 .nav-tabs-custom > .nav-tabs > li.header {
     font-size: 40px;
     color: white; 
 }')