web-dev-qa-db-ja.com

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

結果: enter image description here

9
Prometheus

次のように、<style>...</style>ブロックのスタイルシートをカスタマイズできます。

---
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ファイルに配置します。

enter image description here

9
lukeA