garrick
/
xaringanthemer
miroir de https://github.com/gadenbuie/xaringanthemer.git
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Versions 10 Wiki Activité
😎 Give your xaringan slides some style
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
511 Révisions
5 Branches
Aborescence: ef23fc5cb2
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'ef23fc5cb2'
${ noResults }
xaringanthemer/dev/reference/style_extra_css.html

182 lines
14KB
Brut Annotations Historique 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Adds css elements to target outfile, typically a xaringanthemer css file.

  3. The css argument takes a list of CSS classes and definitions (see examples below)

  4. and appends CSS rules to outfile."><title>Add Extra CSS Styles — style_extra_css • xaringanthemer</title><!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png"><link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png"><link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png"><link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png"><link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png"><script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link href="../deps/bootstrap-5.1.3/bootstrap.min.css" rel="stylesheet"><script src="../deps/bootstrap-5.1.3/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.2/font.css" rel="stylesheet"><link href="../deps/Outfit-0.4.2/font.css" rel="stylesheet"><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous"><!-- bootstrap-toc --><script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- search --><script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script><!-- pkgdown --><script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet"><meta property="og:title" content="Add Extra CSS Styles — style_extra_css"><meta property="og:description" content="Adds css elements to target outfile, typically a xaringanthemer css file.

  5. The css argument takes a list of CSS classes and definitions (see examples below)

  6. and appends CSS rules to outfile."><meta property="og:image" content="https://pkg.garrickadenbuie.com/xaringanthemer/logo.png"><meta name="twitter:card" content="summary"><meta name="twitter:creator" content="@grrrck"><meta name="twitter:site" content="@grrrck"><meta name="robots" content="noindex"><!-- 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]>

  7. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  8. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  9. <![endif]--></head><body>

  10.     <a href="#main" class="visually-hidden-focusable">Skip to contents</a>

  11.     

  12. 

  13.     <nav class="navbar fixed-top navbar-light navbar-expand-lg bg-light"><div class="container">

  14.     

  15.     <a class="navbar-brand me-2" href="../index.html">xaringanthemer</a>

  16. 

  17.     <small class="nav-text text-danger me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="In-development version">0.4.1.9000</small>

  18. 

  19.     

  20.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

  21.       <span class="navbar-toggler-icon"></span>

  22.     </button>

  23. 

  24.     <div id="navbar" class="collapse navbar-collapse ms-3">

  25.       <ul class="navbar-nav me-auto"><li class="nav-item">

  26.   <a class="nav-link" href="../articles/xaringanthemer.html">Features</a>

  27. </li>

  28. <li class="active nav-item">

  29.   <a class="nav-link" href="../reference/index.html">Reference</a>

  30. </li>

  31. <li class="nav-item dropdown">

  32.   <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown-themes">Themes</a>

  33.   <div class="dropdown-menu" aria-labelledby="dropdown-themes">

  34.     <h6 class="dropdown-header" data-toc-skip>Themes</h6>

  35.     <a class="dropdown-item" href="../articles/themes.html">Slide Themes</a>

  36.     <a class="dropdown-item" href="../articles/ggplot2-themes.html">ggplot2 Themes</a>

  37.     <div class="dropdown-divider"></div>

  38.     <h6 class="dropdown-header" data-toc-skip>More Customization</h6>

  39.     <a class="dropdown-item" href="../articles/fonts.html">Fonts</a>

  40.     <a class="dropdown-item" href="../articles/template-variables.html">Template Variables</a>

  41.   </div>

  42. </li>

  43.       </ul><form class="form-inline my-2 my-lg-0" role="search">

  44.         <input type="search" class="form-control me-sm-2" aria-label="Toggle navigation" name="search-input" data-search-index="../search.json" id="search-input" placeholder="Search for" autocomplete="off"></form>

  45. 

  46.       <ul class="navbar-nav"><li class="nav-item dropdown">

  47.   <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown--">

  48.     <span class="far fa far fa-newspaper fa-lg"></span>

  49.      

  50.     

  51.   </a>

  52.   <div class="dropdown-menu" aria-labelledby="dropdown--">

  53.     <a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a>

  54.     <div class="dropdown-divider"></div>

  55.     <a class="dropdown-item" href="../news/index.html">Changelog</a>

  56.   </div>

  57. </li>

  58. <li class="nav-item">

  59.   <a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer">

  60.     <span class="fab fa fab fa-github fa-lg"></span>

  61.      

  62.   </a>

  63. </li>

  64. <li class="nav-item">

  65.   <a class="external-link nav-link" href="https://twitter.com/grrrck">

  66.     <span class="fab fa fab fa-twitter fa-lg"></span>

  67.      

  68.   </a>

  69. </li>

  70. <li class="nav-item">

  71.   <a class="external-link nav-link" href="https://www.garrickadenbuie.com">

  72.     <span class="fas fa fas fa-home fa-lg"></span>

  73.      

  74.   </a>

  75. </li>

  76.       </ul></div>

  77. 

  78.     

  79.   </div>

  80. </nav><div class="container template-reference-topic">

  81. <div class="row">

  82.   <main id="main" class="col-md-9"><div class="page-header">

  83.       <img src="../logo.png" class="logo" alt=""><h1>Add Extra CSS Styles</h1>

  84.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/HEAD/R/style_extra_css.R" class="external-link"><code>R/style_extra_css.R</code></a></small>

  85.       <div class="d-none name"><code>style_extra_css.Rd</code></div>

  86.     </div>

  87. 

  88.     <div class="ref-description section level2">

  89.     <p>Adds css elements to target <code>outfile</code>, typically a xaringanthemer css file.

  90. The <code>css</code> argument takes a list of CSS classes and definitions (see examples below)

  91. and appends CSS rules to <code>outfile</code>.</p>

  92.     </div>

  93. 

  94.     <div class="section level2">

  95.     <h2 id="ref-usage">Usage<a class="anchor" aria-label="anchor" href="#ref-usage"></a></h2>

  96.     <div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">style_extra_css</span><span class="op">(</span></span>

  97. <span>  <span class="va">css</span>,</span>

  98. <span>  outfile <span class="op">=</span> <span class="st">"xaringan-themer.css"</span>,</span>

  99. <span>  append <span class="op">=</span> <span class="cn">TRUE</span>,</span>

  100. <span>  heading <span class="op">=</span> <span class="st">"Extra CSS"</span></span>

  101. <span><span class="op">)</span></span></code></pre></div>

  102.     </div>

  103. 

  104.     <div class="section level2">

  105.     <h2 id="arguments">Arguments<a class="anchor" aria-label="anchor" href="#arguments"></a></h2>

  106.     <dl><dt>css</dt>

  107. <dd><p>A named list of CSS definitions each containing a named list

  108. of CSS property-value pairs, i.e.

  109. <code>list(".class-id" = list("css-property" = "value"))</code></p></dd>

  110. 

  111. 

  112. <dt>outfile</dt>

  113. <dd><p>Customized xaringan CSS output file name, default is "xaringan-themer.css"</p></dd>

  114. 

  115. 

  116. <dt>append</dt>

  117. <dd><p>If <code>TRUE</code> output will be appended to <code>outfile</code>; otherwise,

  118. it will overwrite the contents of <code>outfile</code>.</p></dd>

  119. 

  120. 

  121. <dt>heading</dt>

  122. <dd><p>Heading added above extra CSS. Use <code>NULL</code> to disable.</p></dd>

  123. 

  124. </dl></div>

  125.     <div class="section level2">

  126.     <h2 id="css-list">css list<a class="anchor" aria-label="anchor" href="#css-list"></a></h2>

  127.     

  128. 

  129. <p>The <code>css</code> input must be a named list of css properties and values within a

  130. named list of class identifiers, for example

  131. <code>list(".class-id" = list("css-property" = "value"))</code>.</p>

  132.     </div>

  133. 

  134.     <div class="section level2">

  135.     <h2 id="ref-examples">Examples<a class="anchor" aria-label="anchor" href="#ref-examples"></a></h2>

  136.     <div class="sourceCode"><pre class="sourceCode r"><code><span class="r-in"><span><span class="fu">style_extra_css</span><span class="op">(</span></span></span>

  137. <span class="r-in"><span>  outfile <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/showConnections.html" class="external-link">stdout</a></span><span class="op">(</span><span class="op">)</span>,</span></span>

  138. <span class="r-in"><span>  css <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span></span>

  139. <span class="r-in"><span>    <span class="st">".red"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>color <span class="op">=</span> <span class="st">"red"</span><span class="op">)</span>,</span></span>

  140. <span class="r-in"><span>    <span class="st">".small"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-size"</span> <span class="op">=</span> <span class="st">"90%"</span><span class="op">)</span>,</span></span>

  141. <span class="r-in"><span>    <span class="st">".full-width"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span></span>

  142. <span class="r-in"><span>      display <span class="op">=</span> <span class="st">"flex"</span>,</span></span>

  143. <span class="r-in"><span>      width <span class="op">=</span> <span class="st">"100%"</span>,</span></span>

  144. <span class="r-in"><span>      flex <span class="op">=</span> <span class="st">"1 1 auto"</span></span></span>

  145. <span class="r-in"><span>    <span class="op">)</span></span></span>

  146. <span class="r-in"><span>  <span class="op">)</span></span></span>

  147. <span class="r-in"><span><span class="op">)</span></span></span>

  148. <span class="r-out co"><span class="r-pr">#&gt;</span> </span>

  149. <span class="r-out co"><span class="r-pr">#&gt;</span> </span>

  150. <span class="r-out co"><span class="r-pr">#&gt;</span> /* Extra CSS */</span>

  151. <span class="r-out co"><span class="r-pr">#&gt;</span> .red {</span>

  152. <span class="r-out co"><span class="r-pr">#&gt;</span>   color: red;</span>

  153. <span class="r-out co"><span class="r-pr">#&gt;</span> }</span>

  154. <span class="r-out co"><span class="r-pr">#&gt;</span> .small {</span>

  155. <span class="r-out co"><span class="r-pr">#&gt;</span>   font-size: 90%;</span>

  156. <span class="r-out co"><span class="r-pr">#&gt;</span> }</span>

  157. <span class="r-out co"><span class="r-pr">#&gt;</span> .full-width {</span>

  158. <span class="r-out co"><span class="r-pr">#&gt;</span>   display: flex;</span>

  159. <span class="r-out co"><span class="r-pr">#&gt;</span>   width: 100%;</span>

  160. <span class="r-out co"><span class="r-pr">#&gt;</span>   flex: 1 1 auto;</span>

  161. <span class="r-out co"><span class="r-pr">#&gt;</span> }</span>

  162. </code></pre></div>

  163.     </div>

  164.   </main><aside class="col-md-3"><nav id="toc"><h2>On this page</h2>

  165.     </nav></aside></div>

  166. 

  167. 

  168.     <footer><div class="pkgdown-footer-left">

  169.   <p></p><p>Developed by <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a>.</p>

  170. </div>

  171. 

  172. <div class="pkgdown-footer-right">

  173.   <p></p><p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.0.6.</p>

  174. </div>

  175. 

  176.     </footer></div>

  177. 

  178.   

  179. 

  180.   <script>window.jQuery('.navbar-brand + small').addClass(['badge', 'bg-secondary', 'text-light']).removeClass('text-muted')</script></body></html>