😎 Give your xaringan slides some style
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

487 lines
20KB

  1. <!DOCTYPE html>
  2. <!-- Generated by pkgdown: do not edit by hand --><html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Template Variables • xaringanthemer</title>
  9. <!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
  11. <!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script><!-- sticky kit --><script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js" integrity="sha256-c4Rlo1ZozqTPE2RLuvbusY3+SU1pQaJC0TjuhygMipw=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
  12. <script src="../pkgdown.js"></script><meta property="og:title" content="Template Variables">
  13. <meta property="og:description" content="">
  14. <meta name="twitter:card" content="summary">
  15. <!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
  16. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  17. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18. <![endif]-->
  19. </head>
  20. <body>
  21. <div class="container template-article">
  22. <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  23. <div class="container">
  24. <div class="navbar-header">
  25. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
  26. <span class="sr-only">Toggle navigation</span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. <span class="icon-bar"></span>
  30. </button>
  31. <span class="navbar-brand">
  32. <a class="navbar-link" href="../index.html">xaringanthemer</a>
  33. <span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.2.0.9000</span>
  34. </span>
  35. </div>
  36. <div id="navbar" class="navbar-collapse collapse">
  37. <ul class="nav navbar-nav">
  38. <li>
  39. <a href="../index.html">
  40. <span class="fa fa-home fa-lg"></span>
  41. </a>
  42. </li>
  43. <li>
  44. <a href="../articles/xaringanthemer.html">Get started</a>
  45. </li>
  46. <li>
  47. <a href="../articles/singles/themes.html">Themes</a>
  48. </li>
  49. <li>
  50. <a href="../articles/singles/fonts.html">Fonts</a>
  51. </li>
  52. <li>
  53. <a href="../articles/template-variables.html">Template Variables</a>
  54. </li>
  55. <li>
  56. <a href="../articles/css-help.html">CSS Help</a>
  57. </li>
  58. <li>
  59. <a href="../reference/index.html">Reference</a>
  60. </li>
  61. </ul>
  62. <ul class="nav navbar-nav navbar-right">
  63. <li>
  64. <a href="https://github.com/gadenbuie/xaringanthemer">
  65. <span class="fa fa-github fa-lg"></span>
  66. </a>
  67. </li>
  68. <li>
  69. <a href="https://twitter.com/grrrck">
  70. <span class="fa fa-twitter fa-lg"></span>
  71. </a>
  72. </li>
  73. </ul>
  74. </div>
  75. <!--/.nav-collapse -->
  76. </div>
  77. <!--/.container -->
  78. </div>
  79. <!--/.navbar -->
  80. </header><div class="row">
  81. <div class="col-md-9 contents">
  82. <div class="page-header toc-ignore">
  83. <h1>Template Variables</h1>
  84. <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/master/vignettes/template-variables.Rmd"><code>vignettes/template-variables.Rmd</code></a></small>
  85. <div class="hidden name"><code>template-variables.Rmd</code></div>
  86. </div>
  87. <p>The following table shows the template variables, their default values in the standard <code>xaringan</code> theme, the primary element to which the property is applied, and a brief description of the template variable.</p>
  88. <p>For example, <code>background_color</code> by default sets the <code>background-color</code> CSS property of the <code>.remark-slide-content</code> class to <code>#FFF</code>.</p>
  89. <p>Use this table to find the template variable you would like to modify. You can also use this table to find the CSS class or element associated with a particular template item.</p>
  90. <p>Note that themes, like <code><a href="../reference/xaringanthemer-deprecated.html">mono_accent()</a></code>, have additional parameters, but with any theme function you can override the theme by directly setting the arguments below when calling the theme function. For example, to use <code><a href="../reference/xaringanthemer-deprecated.html">mono_accent()</a></code> with a different slide background color, you can call <code><a href="../reference/xaringanthemer-deprecated.html">mono_accent(background_color = "#abc123")</a></code>.</p>
  91. <table class="table">
  92. <thead><tr class="header">
  93. <th align="left">variable</th>
  94. <th align="left">default</th>
  95. <th align="left">element</th>
  96. <th align="left">description</th>
  97. </tr></thead>
  98. <tbody>
  99. <tr class="odd">
  100. <td align="left"><code>text_color</code></td>
  101. <td align="left"><code>#000</code></td>
  102. <td align="left">body</td>
  103. <td align="left">Text Color</td>
  104. </tr>
  105. <tr class="even">
  106. <td align="left"><code>header_color</code></td>
  107. <td align="left"><code>#000</code></td>
  108. <td align="left">h1, h2, h3</td>
  109. <td align="left">Header Color</td>
  110. </tr>
  111. <tr class="odd">
  112. <td align="left"><code>background_color</code></td>
  113. <td align="left"><code>#FFF</code></td>
  114. <td align="left">.remark-slide-content</td>
  115. <td align="left">Slide Background Color</td>
  116. </tr>
  117. <tr class="even">
  118. <td align="left"><code>link_color</code></td>
  119. <td align="left"><code><a href="https://www.rdocumentation.org/packages/grDevices/topics/rgb">rgb(249, 38, 114)</a></code></td>
  120. <td align="left">a, a &gt; code</td>
  121. <td align="left">Link Color</td>
  122. </tr>
  123. <tr class="odd">
  124. <td align="left"><code>text_bold_color</code></td>
  125. <td align="left"><code>NULL</code></td>
  126. <td align="left">strong</td>
  127. <td align="left">Bold Text Color</td>
  128. </tr>
  129. <tr class="even">
  130. <td align="left"><code>text_slide_number_color</code></td>
  131. <td align="left"><code>inverse_background_color</code></td>
  132. <td align="left">.remark-slide-number</td>
  133. <td align="left">Slide Number Color</td>
  134. </tr>
  135. <tr class="odd">
  136. <td align="left"><code>padding</code></td>
  137. <td align="left"><code>1rem 4rem 1rem 4rem</code></td>
  138. <td align="left">.remark-slide-content</td>
  139. <td align="left">Slide Padding in <code>top right [bottom left]</code> format</td>
  140. </tr>
  141. <tr class="even">
  142. <td align="left"><code>background_image</code></td>
  143. <td align="left"><code>NULL</code></td>
  144. <td align="left">.remark-slide-content</td>
  145. <td align="left">Background image applied to each <em>and every</em> slide. Set <code>title_slide_background_image = "none"</code> to remove the background image from the title slide</td>
  146. </tr>
  147. <tr class="odd">
  148. <td align="left"><code>background_size</code></td>
  149. <td align="left"><code>NULL</code></td>
  150. <td align="left">.remark-slide-content</td>
  151. <td align="left">Background image size, requires <code>background_image</code> to be set. If <code>background_image</code> is set, <code>background_size</code> will default to <code>cover</code> so the backround fills the screen. If both <code>background_image</code> and <code>background_position</code> are set, will default to 100 percent</td>
  152. </tr>
  153. <tr class="even">
  154. <td align="left"><code>background_position</code></td>
  155. <td align="left"><code>NULL</code></td>
  156. <td align="left">.remark-slide-content</td>
  157. <td align="left">Background image position, requires <code>background_image</code> to be set, and it is recommended to adjust <code>background_size</code>
  158. </td>
  159. </tr>
  160. <tr class="odd">
  161. <td align="left"><code>code_highlight_color</code></td>
  162. <td align="left"><code>rgba(255,255,0,0.5)</code></td>
  163. <td align="left">.remark-code-line-highlighted</td>
  164. <td align="left">Code Line Highlight</td>
  165. </tr>
  166. <tr class="even">
  167. <td align="left"><code>code_inline_color</code></td>
  168. <td align="left"><code>#000</code></td>
  169. <td align="left">.remark-inline-code</td>
  170. <td align="left">Inline Code Color</td>
  171. </tr>
  172. <tr class="odd">
  173. <td align="left"><code>code_inline_background_color</code></td>
  174. <td align="left"><code>NULL</code></td>
  175. <td align="left">.remark-inline-code</td>
  176. <td align="left">Inline Code Background Color</td>
  177. </tr>
  178. <tr class="even">
  179. <td align="left"><code>code_inline_font_size</code></td>
  180. <td align="left"><code>1em</code></td>
  181. <td align="left">.remark-inline-code</td>
  182. <td align="left">Inline Code Text Font Size</td>
  183. </tr>
  184. <tr class="odd">
  185. <td align="left"><code>inverse_background_color</code></td>
  186. <td align="left"><code>#272822</code></td>
  187. <td align="left">.inverse</td>
  188. <td align="left">Inverse Background Color</td>
  189. </tr>
  190. <tr class="even">
  191. <td align="left"><code>inverse_text_color</code></td>
  192. <td align="left"><code>#d6d6d6</code></td>
  193. <td align="left">.inverse</td>
  194. <td align="left">Inverse Text Color</td>
  195. </tr>
  196. <tr class="odd">
  197. <td align="left"><code>inverse_text_shadow</code></td>
  198. <td align="left"><code>FALSE</code></td>
  199. <td align="left">.inverse</td>
  200. <td align="left">Enables Shadow on text of inverse slides</td>
  201. </tr>
  202. <tr class="even">
  203. <td align="left"><code>inverse_header_color</code></td>
  204. <td align="left"><code>#f3f3f3</code></td>
  205. <td align="left">.inverse h1, .inverse h2, .inverse h3</td>
  206. <td align="left">Inverse Header Color</td>
  207. </tr>
  208. <tr class="odd">
  209. <td align="left"><code>title_slide_text_color</code></td>
  210. <td align="left"><code>inverse_text_color</code></td>
  211. <td align="left">.title-slide</td>
  212. <td align="left">Title Slide Text Color</td>
  213. </tr>
  214. <tr class="even">
  215. <td align="left"><code>title_slide_background_color</code></td>
  216. <td align="left"><code>inverse_background_color</code></td>
  217. <td align="left">.title-slide</td>
  218. <td align="left">Title Slide Background Color</td>
  219. </tr>
  220. <tr class="odd">
  221. <td align="left"><code>title_slide_background_image</code></td>
  222. <td align="left"><code>NULL</code></td>
  223. <td align="left">.title-slide</td>
  224. <td align="left">Title Slide Background Image URL</td>
  225. </tr>
  226. <tr class="even">
  227. <td align="left"><code>title_slide_background_size</code></td>
  228. <td align="left"><code>NULL</code></td>
  229. <td align="left">.title-slide</td>
  230. <td align="left">Title Slide Background Image Size, defaults to “cover” if background image is set</td>
  231. </tr>
  232. <tr class="odd">
  233. <td align="left"><code>title_slide_background_position</code></td>
  234. <td align="left"><code>NULL</code></td>
  235. <td align="left">.title-slide</td>
  236. <td align="left">Title Slide Background Image Position</td>
  237. </tr>
  238. <tr class="even">
  239. <td align="left"><code>footnote_color</code></td>
  240. <td align="left"><code>NULL</code></td>
  241. <td align="left">.footnote</td>
  242. <td align="left">Footnote text color (if <code>NA</code>, then it will be the same color as <code>text_color</code>)</td>
  243. </tr>
  244. <tr class="odd">
  245. <td align="left"><code>footnote_font_size</code></td>
  246. <td align="left"><code>0.9em</code></td>
  247. <td align="left">.footnote</td>
  248. <td align="left">Footnote font size</td>
  249. </tr>
  250. <tr class="even">
  251. <td align="left"><code>footnote_position_bottom</code></td>
  252. <td align="left"><code>3em</code></td>
  253. <td align="left">.footnote</td>
  254. <td align="left">Footnote location from bottom of screen</td>
  255. </tr>
  256. <tr class="odd">
  257. <td align="left"><code>left_column_subtle_color</code></td>
  258. <td align="left"><code>#777</code></td>
  259. <td align="left">.left-column h2, .left-column h3</td>
  260. <td align="left">Left Column Text (not last)</td>
  261. </tr>
  262. <tr class="even">
  263. <td align="left"><code>left_column_selected_color</code></td>
  264. <td align="left"><code>#000</code></td>
  265. <td align="left">.left-column h2:last-of-type, .left-column h3:last-child</td>
  266. <td align="left">Left Column Current Selection</td>
  267. </tr>
  268. <tr class="odd">
  269. <td align="left"><code>blockquote_left_border_color</code></td>
  270. <td align="left"><code>lightgray</code></td>
  271. <td align="left">blockquote</td>
  272. <td align="left">Blockquote Left Border Color</td>
  273. </tr>
  274. <tr class="even">
  275. <td align="left"><code>table_border_color</code></td>
  276. <td align="left"><code>#666</code></td>
  277. <td align="left">table: border-top, border-bottom</td>
  278. <td align="left">Table top/bottom border</td>
  279. </tr>
  280. <tr class="odd">
  281. <td align="left"><code>table_row_border_color</code></td>
  282. <td align="left"><code>#ddd</code></td>
  283. <td align="left">table thead th: border-bottom</td>
  284. <td align="left">Table row inner bottom border</td>
  285. </tr>
  286. <tr class="even">
  287. <td align="left"><code>table_row_even_background_color</code></td>
  288. <td align="left"><code>#eee</code></td>
  289. <td align="left">thead, tfoot, tr:nth-child(even)</td>
  290. <td align="left">Table Even Row Background Color</td>
  291. </tr>
  292. <tr class="odd">
  293. <td align="left"><code>text_font_size</code></td>
  294. <td align="left"><code>20px</code></td>
  295. <td align="left">.remark-slide-content</td>
  296. <td align="left">Slide Body Text Font Size</td>
  297. </tr>
  298. <tr class="even">
  299. <td align="left"><code>header_h1_font_size</code></td>
  300. <td align="left"><code>55px</code></td>
  301. <td align="left">.remark-slide-content h1</td>
  302. <td align="left">h1 Header Text Font Size</td>
  303. </tr>
  304. <tr class="odd">
  305. <td align="left"><code>header_h2_font_size</code></td>
  306. <td align="left"><code>45px</code></td>
  307. <td align="left">.remark-slide-content h2</td>
  308. <td align="left">h2 Header Text Font Size</td>
  309. </tr>
  310. <tr class="even">
  311. <td align="left"><code>header_h3_font_size</code></td>
  312. <td align="left"><code>35px</code></td>
  313. <td align="left">.remark-slide-content h3</td>
  314. <td align="left">h3 Header Text Font Size</td>
  315. </tr>
  316. <tr class="odd">
  317. <td align="left"><code>header_background_auto</code></td>
  318. <td align="left"><code>FALSE</code></td>
  319. <td align="left"></td>
  320. <td align="left">Add background under slide title automatically for h1 header elements. If not enabled, use <code>class: header_background</code> to enable</td>
  321. </tr>
  322. <tr class="even">
  323. <td align="left"><code>header_background_color</code></td>
  324. <td align="left"><code>header_color</code></td>
  325. <td align="left">.remark-slide-content h1</td>
  326. <td align="left">Background Color for h1 Header with Background</td>
  327. </tr>
  328. <tr class="odd">
  329. <td align="left"><code>header_background_text_color</code></td>
  330. <td align="left"><code>background_color</code></td>
  331. <td align="left">.remark-slide-content h1</td>
  332. <td align="left">Text Color for h1 Header with Background</td>
  333. </tr>
  334. <tr class="even">
  335. <td align="left"><code>header_background_padding</code></td>
  336. <td align="left"><code>2rem 4rem 1.5rem 4rem</code></td>
  337. <td align="left">.remark-slide-content h1</td>
  338. <td align="left">Padding for h1 Header with Background</td>
  339. </tr>
  340. <tr class="odd">
  341. <td align="left"><code>header_background_content_padding_top</code></td>
  342. <td align="left"><code>7rem</code></td>
  343. <td align="left">.remark-slide-content</td>
  344. <td align="left">Top Padding for Content in Slide with Header with Background</td>
  345. </tr>
  346. <tr class="even">
  347. <td align="left"><code>header_background_ignore_classes</code></td>
  348. <td align="left"><code><a href="https://www.rdocumentation.org/packages/base/topics/c">c('normal', 'inverse', 'title', 'middle', 'bottom')</a></code></td>
  349. <td align="left">.remark-slide-content</td>
  350. <td align="left">Slide Classes Where Header with Background will not be Applied</td>
  351. </tr>
  352. <tr class="odd">
  353. <td align="left"><code>text_slide_number_font_size</code></td>
  354. <td align="left"><code>0.9em</code></td>
  355. <td align="left">.remark-slide-number</td>
  356. <td align="left">Slide Number Text Font Size</td>
  357. </tr>
  358. <tr class="even">
  359. <td align="left"><code>text_font_google</code></td>
  360. <td align="left"><code>NULL</code></td>
  361. <td align="left">body</td>
  362. <td align="left">Use <code><a href="../reference/google_font.html">google_font()</a></code> to specify body font</td>
  363. </tr>
  364. <tr class="odd">
  365. <td align="left"><code>text_font_family</code></td>
  366. <td align="left"><code>'Droid Serif'</code></td>
  367. <td align="left">body</td>
  368. <td align="left">Body Text Font Family</td>
  369. </tr>
  370. <tr class="even">
  371. <td align="left"><code>text_font_weight</code></td>
  372. <td align="left"><code>normal</code></td>
  373. <td align="left">body</td>
  374. <td align="left">Body Text Font Weight</td>
  375. </tr>
  376. <tr class="odd">
  377. <td align="left"><code>text_font_url</code></td>
  378. <td align="left"><code>https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic</code></td>
  379. <td align="left">
  380. <span class="citation">@import</span> url()</td>
  381. <td align="left">Body Text Font URL(s)</td>
  382. </tr>
  383. <tr class="even">
  384. <td align="left"><code>text_font_family_fallback</code></td>
  385. <td align="left"><code>'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC'</code></td>
  386. <td align="left">body</td>
  387. <td align="left">Body Text Font Fallbacks</td>
  388. </tr>
  389. <tr class="odd">
  390. <td align="left"><code>text_font_base</code></td>
  391. <td align="left"><code>serif</code></td>
  392. <td align="left">body</td>
  393. <td align="left">Body Text Base Font (Total Failure Fallback)</td>
  394. </tr>
  395. <tr class="even">
  396. <td align="left"><code>header_font_google</code></td>
  397. <td align="left"><code>NULL</code></td>
  398. <td align="left">body</td>
  399. <td align="left">Use <code><a href="../reference/google_font.html">google_font()</a></code> to specify header font</td>
  400. </tr>
  401. <tr class="odd">
  402. <td align="left"><code>header_font_family</code></td>
  403. <td align="left"><code>'Yanone Kaffeesatz'</code></td>
  404. <td align="left">h1, h2, h3</td>
  405. <td align="left">Header Font Family</td>
  406. </tr>
  407. <tr class="even">
  408. <td align="left"><code>header_font_weight</code></td>
  409. <td align="left"><code>normal</code></td>
  410. <td align="left">h1, h2, h3</td>
  411. <td align="left">Header Font Weight</td>
  412. </tr>
  413. <tr class="odd">
  414. <td align="left"><code>header_font_url</code></td>
  415. <td align="left"><code>https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz</code></td>
  416. <td align="left">
  417. <span class="citation">@import</span> url</td>
  418. <td align="left">Header Font URL</td>
  419. </tr>
  420. <tr class="even">
  421. <td align="left"><code>code_font_google</code></td>
  422. <td align="left"><code>NULL</code></td>
  423. <td align="left">body</td>
  424. <td align="left">Use <code><a href="../reference/google_font.html">google_font()</a></code> to specify code font</td>
  425. </tr>
  426. <tr class="odd">
  427. <td align="left"><code>code_font_family</code></td>
  428. <td align="left"><code>'Source Code Pro'</code></td>
  429. <td align="left">.remark-code, .remark-inline-code</td>
  430. <td align="left">Code Font Family</td>
  431. </tr>
  432. <tr class="even">
  433. <td align="left"><code>code_font_size</code></td>
  434. <td align="left"><code>0.9em</code></td>
  435. <td align="left">.remark-inline</td>
  436. <td align="left">Code Text Font Size</td>
  437. </tr>
  438. <tr class="odd">
  439. <td align="left"><code>code_font_url</code></td>
  440. <td align="left"><code>https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700</code></td>
  441. <td align="left">
  442. <span class="citation">@import</span> url</td>
  443. <td align="left">Code Font URL</td>
  444. </tr>
  445. <tr class="even">
  446. <td align="left"><code>code_font_family_fallback</code></td>
  447. <td align="left"><code>'Lucida Console', Monaco</code></td>
  448. <td align="left">.remark-code, .remark-inline-code</td>
  449. <td align="left">Code Font Fallback</td>
  450. </tr>
  451. </tbody>
  452. </table>
  453. </div>
  454. <div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
  455. </div>
  456. </div>
  457. <footer><div class="copyright">
  458. <p>Developed by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a>.</p>
  459. </div>
  460. <div class="pkgdown">
  461. <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.3.0.</p>
  462. </div>
  463. </footer>
  464. </div>
  465. </body>
  466. </html>