garrick
/
xaringanthemer
miroir de https://github.com/gadenbuie/xaringanthemer.git


			
							<!DOCTYPE html>
<!-- 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"><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.3.1/bootstrap.min.css" rel="stylesheet"><script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.9/font.css" rel="stylesheet"><link href="../deps/Outfit-0.4.9/font.css" rel="stylesheet"><link href="../deps/font-awesome-6.4.2/css/all.min.css" rel="stylesheet"><link href="../deps/font-awesome-6.4.2/css/v4-shims.min.css" rel="stylesheet"><script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></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 name="description" content="Adds css elements to target outfile, typically a xaringanthemer css file.
The css argument takes a list of CSS classes and definitions (see examples below)
and appends CSS rules to outfile."><meta property="og:description" content="Adds css elements to target outfile, typically a xaringanthemer css file.
The css argument takes a list of CSS classes and definitions (see examples below)
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"></head><body>
    <a href="#main" class="visually-hidden-focusable">Skip to contents</a>


    <nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">

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

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


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

    <div id="navbar" class="collapse navbar-collapse ms-3">
      <ul class="navbar-nav me-auto"><li class="nav-item"><a class="nav-link" href="../articles/xaringanthemer.html">Features</a></li>
<li class="active nav-item"><a class="nav-link" href="../reference/index.html">Reference</a></li>
<li class="nav-item dropdown">
  <button class="nav-link dropdown-toggle" type="button" id="dropdown-themes" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Themes</button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-themes"><li><h6 class="dropdown-header" data-toc-skip>Themes</h6></li>
    <li><a class="dropdown-item" href="../articles/themes.html">Slide Themes</a></li>
    <li><a class="dropdown-item" href="../articles/ggplot2-themes.html">ggplot2 Themes</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header" data-toc-skip>More Customization</h6></li>
    <li><a class="dropdown-item" href="../articles/fonts.html">Fonts</a></li>
    <li><a class="dropdown-item" href="../articles/template-variables.html">Template Variables</a></li>
  </ul></li>
      </ul><ul class="navbar-nav"><li class="nav-item dropdown">
  <button class="nav-link dropdown-toggle" type="button" id="dropdown-" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="fa far fa-newspaper fa-lg"></span> </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-"><li><a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="../news/index.html">Changelog</a></li>
  </ul></li>
<li class="nav-item"><a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer"><span class="fa fab fa-github fa-lg"></span></a></li>
<li class="nav-item"><a class="external-link nav-link" href="https://twitter.com/grrrck"><span class="fa fab fa-twitter fa-lg"></span></a></li>
<li class="nav-item"><a class="external-link nav-link" href="https://www.garrickadenbuie.com"><span class="fa fas fa-home fa-lg"></span></a></li>
      </ul></div>


  </div>
</nav><div class="container template-reference-topic">
<div class="row">
  <main id="main" class="col-md-9"><div class="page-header">
      <img src="../logo.png" class="logo" alt=""><h1>Add Extra CSS Styles</h1>
      <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/main/R/style_extra_css.R" class="external-link"><code>R/style_extra_css.R</code></a></small>
      <div class="d-none name"><code>style_extra_css.Rd</code></div>
    </div>

    <div class="ref-description section level2">
    <p>Adds css elements to target <code>outfile</code>, typically a xaringanthemer css file.
The <code>css</code> argument takes a list of CSS classes and definitions (see examples below)
and appends CSS rules to <code>outfile</code>.</p>
    </div>

    <div class="section level2">
    <h2 id="ref-usage">Usage<a class="anchor" aria-label="anchor" href="#ref-usage"></a></h2>
    <div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">style_extra_css</span><span class="op">(</span></span>
<span>  <span class="va">css</span>,</span>
<span>  outfile <span class="op">=</span> <span class="st">"xaringan-themer.css"</span>,</span>
<span>  append <span class="op">=</span> <span class="cn">TRUE</span>,</span>
<span>  heading <span class="op">=</span> <span class="st">"Extra CSS"</span></span>
<span><span class="op">)</span></span></code></pre></div>
    </div>

    <div class="section level2">
    <h2 id="arguments">Arguments<a class="anchor" aria-label="anchor" href="#arguments"></a></h2>


<dl><dt id="arg-css">css<a class="anchor" aria-label="anchor" href="#arg-css"></a></dt>
<dd><p>A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
<code>list(".class-id" = list("css-property" = "value"))</code></p></dd>


<dt id="arg-outfile">outfile<a class="anchor" aria-label="anchor" href="#arg-outfile"></a></dt>
<dd><p>Customized xaringan CSS output file name, default is "xaringan-themer.css"</p></dd>


<dt id="arg-append">append<a class="anchor" aria-label="anchor" href="#arg-append"></a></dt>
<dd><p>If <code>TRUE</code> output will be appended to <code>outfile</code>; otherwise,
it will overwrite the contents of <code>outfile</code>.</p></dd>


<dt id="arg-heading">heading<a class="anchor" aria-label="anchor" href="#arg-heading"></a></dt>
<dd><p>Heading added above extra CSS. Use <code>NULL</code> to disable.</p></dd>

</dl></div>
    <div class="section level2">
    <h2 id="css-list">css list<a class="anchor" aria-label="anchor" href="#css-list"></a></h2>


<p>The <code>css</code> input must be a named list of css properties and values within a
named list of class identifiers, for example
<code>list(".class-id" = list("css-property" = "value"))</code>.</p>
    </div>

    <div class="section level2">
    <h2 id="ref-examples">Examples<a class="anchor" aria-label="anchor" href="#ref-examples"></a></h2>
    <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>
<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>
<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>
<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>
<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>
<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>
<span class="r-in"><span>      display <span class="op">=</span> <span class="st">"flex"</span>,</span></span>
<span class="r-in"><span>      width <span class="op">=</span> <span class="st">"100%"</span>,</span></span>
<span class="r-in"><span>      flex <span class="op">=</span> <span class="st">"1 1 auto"</span></span></span>
<span class="r-in"><span>    <span class="op">)</span></span></span>
<span class="r-in"><span>  <span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-out co"><span class="r-pr">#&gt;</span> </span>
<span class="r-out co"><span class="r-pr">#&gt;</span> </span>
<span class="r-out co"><span class="r-pr">#&gt;</span> /* Extra CSS */</span>
<span class="r-out co"><span class="r-pr">#&gt;</span> .red {</span>
<span class="r-out co"><span class="r-pr">#&gt;</span>   color: red;</span>
<span class="r-out co"><span class="r-pr">#&gt;</span> }</span>
<span class="r-out co"><span class="r-pr">#&gt;</span> .small {</span>
<span class="r-out co"><span class="r-pr">#&gt;</span>   font-size: 90%;</span>
<span class="r-out co"><span class="r-pr">#&gt;</span> }</span>
<span class="r-out co"><span class="r-pr">#&gt;</span> .full-width {</span>
<span class="r-out co"><span class="r-pr">#&gt;</span>   display: flex;</span>
<span class="r-out co"><span class="r-pr">#&gt;</span>   width: 100%;</span>
<span class="r-out co"><span class="r-pr">#&gt;</span>   flex: 1 1 auto;</span>
<span class="r-out co"><span class="r-pr">#&gt;</span> }</span>
</code></pre></div>
    </div>
  </main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>
    </nav></aside></div>


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

<div class="pkgdown-footer-right">
  <p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.0.</p>
</div>

    </footer></div>


  <script src="../doc-versions.js"></script></body></html>