2017-10-13 6 views
2

私はちょっとグーグルではありますが、私はRMarkdown-CSSリファレンスの「完全な」リファレンスを見つけることができないようです。RMarkdownの "ioslides-CSS"リファレンスガイドはありますか?

私は、次の(かつ有用)リソースが見つかりました:

が、私は本当にの完全な参照を見つけることができませんがすべてのカスタマイズ可能な要素。

たとえば、スライドの背景色、タイトルの色と数値のフォーマットを変更したいとします。 HTML出力(ブラウザインスペクタ)を読み込んでformers(backgroundとtitles-headers btw-)のCSSプロパティを設定することができましたが、実際にスライド番号をスタイルするために何をすればいいのか分かりません。

次は小さな一例です。

--- 
title: "The title" 
author: "Zamengo Bruno" 
date: '`r format(Sys.Date(), "%d/%m/%Y")`' 
output: 
    ioslides_presentation: 
    css: styles.css 
    widescreen: yes 
    theme: yeti 
--- 

```{r setup, include=FALSE} 
knitr::opts_chunk$set(echo = FALSE) 
``` 

## First slide 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor neque ac euismod ornare. Cras scelerisque ante velit, volutpat rhoncus massa vehicula vitae. Donec viverra tincidunt velit id egestas. Quisque a aliquam quam. Phasellus lorem lectus, imperdiet ut libero a, vulputate lobortis arcu. Sed consequat fringilla nulla sed tempor. Proin laoreet massa sed vestibulum tristique. Nulla non volutpat arcu, a semper arcu. Etiam lobortis augue in felis commodo condimentum. Quisque interdum sed lorem in varius. Sed at massa quis ipsum semper vestibulum pharetra vel nisl. 

## Second one 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor neque ac euismod ornare. Cras scelerisque ante velit, volutpat rhoncus massa vehicula vitae. Donec viverra tincidunt velit id egestas. Quisque a aliquam quam. Phasellus lorem lectus, imperdiet ut libero a, vulputate lobortis arcu. Sed consequat fringilla nulla sed tempor. Proin laoreet massa sed vestibulum tristique. Nulla non volutpat arcu, a semper arcu. Etiam lobortis augue in felis commodo condimentum. Quisque interdum sed lorem in varius. Sed at massa quis ipsum semper vestibulum pharetra vel nisl. 

そして、これは(非常に非常にシンプルな)であるCSSファイルstyles.css

slide { 
    background-color: #E0E9E3; 
} 

h1, h2, h3, h4, h5, h6, h7, h8 { 
    color: #99CC00; 
} 

最後の質問:

どのようにすることができますスライド番号を緑色にしますか?

そして、もっと一般的に

はCSSを経由してスタイリングすることができRMarkdown ioslides HTMLタグに任意の完全参照はありますか?

答えて

2

あなたの最初の質問に答えるために:

それ自体は何の言及はありません:私は最初の質問への答えを思いついたのか秒1またはについて

<style> 
slides > slide:not(.nobackground):after { 
    color: green; 
} 
</style> 

を。ここでの問題は、スライド番号の出現のように定義されていることであるpseudo class(例えば:afterなど):

enter image description here

あなたはその行をクリックした場合は、その疑似要素に対応するスタイルを見つける:

enter image description here

属性content内のスライド番号の定義をはっきりと認識できます。したがって、このCSSはスライド要素ではなく、その右下のスペースに影響します。 CSSセレクタをコピー&ペーストして、必要なスタイルを追加または編集してください。

このような状況では、ツリーを通ってフォレストを見ることができない場合は、通常、デフォルトのスタイルシートを確認します。これはgithubです。 のCtrl + F(それがおそらくそのように定義されていることがわかっている)またはちょうどslide-numの場合は、対応するコード行がかなり速く見つかります。

+0

ありがとう、私はちょうど元のCSSよりももっと "構造化された"ものを望んでいた... –

関連する問題