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

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-sizecolor。它有一个稍微令人困惑的顶行: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; 
 }')

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在小程序端input为number类型的表单,调出的键盘只有数字且没有小数点和负号。显然并不符合要求。所以我们用text类型来自己判断 1,必须为数字 2,第一位不是小数点,且只能出现一个小数点 3,负号只能出现在第一位,且只能出现一次 4,如果
file对象转blob对象进行预览的实例代码: //获取到 file文件var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function (event) { let blob = new Blob([event.target.result], { type: file.type }); //{ type: file.type } 预览blob发现乱码可能是type不对 要获取file文件的
js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
一、下拉选择 改动三个地方:下拉选择模板、数据渲染、下拉选择监听填充数据 //表格{ title: '是否棚改房span class="titletips"*/span', field: 'sfpgf', align: 'center', width: 110, // edit: 'text', templet: function (d) { return 'select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" l
layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
element el-tree树结构刷新后保留展开状态解决方法 我们在使用element的el-tree组件的时候,当我们给树结构重新赋值后,树节点就全部自动合上了。所以我们要记录展开状态,方法如下 html代码如下: el-tree ref="tree" :data="treeList" :highlight-current="true" :