Question

尽管我对CSS不太熟悉，但是我已经能够将其包含在R代码中，以更改闪亮的应用程序的各种元素。但是，我无法确定需要更改哪个元素以更改我的tabBox标题中的字体的颜色和大小，该标题来自软件包Shinydashboard。

我的应用程序中的其他框都有带有深色背景和浅色字体的标题。我已经能够更改tabBox标头的背景，使其变暗（请参见下面的代码），但是我没有看到似乎会影响字体的元素。

我可以使用font-size中的body更改标签标签的字体大小，也可以使用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)

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; 
 }')

更改tabBox标头中的字体颜色和大小

1 个答案: