更改选项卡框标题中的字体颜色和大小

Change colour and size of font in header of tabBox(更改选项卡框标题中的字体颜色和大小)

问题描述

虽然我对css不是很熟悉，但我已经能够将它包含在我的R代码中，以改变我闪亮应用程序的各种元素。然而，我无法确定需要更改哪个元素才能更改选项卡框标题中字体的颜色和大小，该选项卡框来自包shinydashboard。

我的应用程序中的其他框都有深色背景和浅色字体的页眉。我已经能够更改选项卡框标题的背景，使其变暗(参见下面的代码)，但我看到的元素似乎没有影响字体。

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

谢谢你的帮助。

示例代码：

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)

推荐答案

查找此类内容的方法是使用右击菜单项"Inspect Element"(在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; 
 }')

这篇关于更改选项卡框标题中的字体颜色和大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！