使用 css 的 Flexdashboard 中标签集的文本样式

Question

我正在尝试在 flexdashboard 应用程序中调整我的 .tabset 页面标题的字体样式、大小和颜色。

这是我使用的布局示例：

---
title: Sample Layout  
output:
  flexdashboard::flex_dashboard:
    orientation: columns
    theme: cerulean
    vertical_layout: scroll
runtime: shiny
---

<style>
.navbar {
  background-color:blue;
  border-color:black;
  font-family: "Times New Roman", serif;
}
.navbar-brand {
  color:white;
  font-size: 25px;
}

body {
    font-family: "Times New Roman", serif;
    font-size: 18px;
    color:black;
}
.chart-title {
    font-family: "Times New Roman", serif;
    font-size: 22px;
    color:black;
}
.nav-tabs-custom > nav.tabs > li.active {
    font-family: "Times New Roman", serif;
    font-size: 22px;
    color:red;
}


</style>

Page 1
=========================================

Column 
-----------------------------------------

### Introduction


Page 2 
========================================

Column {data-width=175}
----------------------------------------

### Sidebar


Column {.tabset}
----------------------------------------
### 1st title I want to change 


### 2nd title I want to change

有谁知道我需要使用哪个 css 样式参数来更改这些标签集标题的字体大小和颜色？谢谢！

Answer 1

您需要一个用于活动标签，一个用于非活动标签。

<style>
.nav-tabs-custom .nav-tabs li.active a {
  color: blue;
}

.nav-tabs-custom .nav-tabs li:not(.active) a {
  color: red;
}
</style>

使用 css 的 Flexdashboard 中标签集的文本样式

Text style of tabset in Flexdashboard using css

css

fonts

styles

r-markdown

flexdashboard