代码之家 › 专栏 › 技术社区 › Jaccar

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

shinydashboard shiny r css

Jaccar · 技术社区 · 7 年前

虽然我不太熟悉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)

1 回复 | 直到 7 年前

user2554330 7 年前

找到类似的东西的方法是使用右键单击菜单项“inspect element”(在火狐中,其他浏览器的名称相似,但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; 
 }')

推荐文章