Css 更改选项卡框标题中字体的颜色和大小
虽然我对CSS不是很熟悉,但我已经能够将它包含在我的R代码中,以更改我闪亮应用程序的各种元素。但是,我无法确定需要更改哪些元素才能更改选项卡框标题中字体的颜色和大小,选项卡框来自ShinydaShashboard软件包 我的应用程序中的其他框有黑色背景和浅色字体的标题。我已经能够更改tabBox标题的背景,使其变暗(请参见下面的代码),但我没有看到影响字体的元素 我可以使用Css 更改选项卡框标题中字体的颜色和大小,css,r,shiny,shinydashboard,Css,R,Shiny,Shinydashboard,虽然我对CSS不是很熟悉,但我已经能够将它包含在我的R代码中,以更改我闪亮应用程序的各种元素。但是,我无法确定需要更改哪些元素才能更改选项卡框标题中字体的颜色和大小,选项卡框来自ShinydaShashboard软件包 我的应用程序中的其他框有黑色背景和浅色字体的标题。我已经能够更改tabBox标题的背景,使其变暗(请参见下面的代码),但我没有看到影响字体的元素 我可以使用正文中的字体大小更改选项卡标签的字体大小,也可以使用颜色更改框中文本的颜色。但是我找不到任何与标题本身属性相关的东西 谢谢你
正文
中的字体大小
更改选项卡标签的字体大小,也可以使用颜色
更改框中文本的颜色。但是我找不到任何与标题本身属性相关的东西
谢谢你的帮助
示例代码:
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)
库(闪亮)
图书馆(shinydashboard)
ui查找此类内容的方法是使用右键单击菜单项“Inspect element”(在Firefox中,其他浏览器中的名称类似,但RStudio中的内置浏览器不如独立浏览器)。单击标题应该在哪里,它将突出显示,屏幕右侧的面板中显示大量CSS属性。地雷显示
标题在主显示屏中高亮显示。从顶部开始,寻找您感兴趣的房产。我在第三组中看到字体大小
和颜色
。它有一个稍微令人困惑的顶行:上面写着AdminLTE.min.css:7
的部分说明了这个定义是在哪里找到的,其余的.nav tabs custom>.nav tabs>li.header
是这个元素的活动选择器
因此,要更改大小和颜色,请使用该选择器,例如,将其放入选项卡框中
:
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;
}')
查找类似内容的方法是使用右键单击菜单项“Inspect element”(在Firefox中,其他浏览器的名称类似,但RStudio中的内置浏览器不如独立浏览器)。单击标题应该在哪里,它将突出显示,屏幕右侧的面板中显示大量CSS属性。地雷显示
标题在主显示屏中高亮显示。从顶部开始,寻找您感兴趣的房产。我在第三组中看到字体大小
和颜色
。它有一个稍微令人困惑的顶行:上面写着AdminLTE.min.css:7
的部分说明了这个定义是在哪里找到的,其余的.nav tabs custom>.nav tabs>li.header
是这个元素的活动选择器
因此,要更改大小和颜色,请使用该选择器,例如,将其放入选项卡框中
:
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;
}')
谢谢我使用的是“Inspect元素”,但似乎与文本无关。这听起来不错-我会检查一下,然后再给你回复:)谢谢!我使用的是“Inspect元素”,但似乎与文本无关。这听起来不错-我会检查一下,然后再给你回复:)