【问题标题】:flexdashboard - change title bar colorflexdashboard - 更改标题栏颜色
【发布时间】:2017-11-02 11:24:11
【问题描述】:

我想更改 flexdashboard 的标题栏颜色。

我找到了一个删除它的示例 - SE here,但鉴于我不知道任何 CSS/JQuery,我不得不问。

我想将条形颜色更改为红色,并将文本更改为黑色。

有人吗?

编辑(下例):

---
title: "DB: Contact information"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

<style>                     
.navbar {
  background-color:crimson;
  border-color:black;
}
.navbar-brand {
color:black!important;
}


</style>   


Dashboard
=====================================  

Test. Test. Test. 

Column {data-width=650}
-----------------------------------------------------------------------

### Clustered Data

结果:

【问题讨论】:

    标签: r flexdashboard


    【解决方案1】:

    您可以像这样在 &lt;style&gt;...&lt;/style&gt; 块中自定义样式表:

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---
    <style>                     
    .navbar {
      background-color:red;
      border-color:black;
    }
    .navbar-brand {
    color:black!important;
    }
    </style>                    
    
    ```{r setup, include=FALSE}
    library(flexdashboard)
    ```
    
    Column {data-width=650}
    -----------------------------------------------------------------------
    
    ### Chart A
    
    ```{r}
    plot(0)
    ```
    
    Column {data-width=350}
    -----------------------------------------------------------------------
    
    ### Chart B
    
    ```{r}
    plot(0)
    ```
    
    ### Chart C
    
    ```{r}
    plot(0)
    ```
    

    或者使用

    output: 
      flexdashboard::flex_dashboard:
        css: styles.css
    

    将您的自定义样式放在单独的styles.css 文件中。

    【讨论】:

    • 是的,它有效。但它不会改变按钮背景/文本的颜色。
    • 知道如何让它们融入导航栏吗? (我知道我应该学习引导程序)
    • @Prometheus 嗯,我不知道,请编辑您的原始帖子并添加一个最小的示例,用于复制粘贴运行。
    • 你好。谢谢您的帮助。我刚刚更新了 OP。
    • @Prometheus 谢谢,你能在你的帖子中包含按钮以便我测试它吗?