garrick
/
xaringanthemer
kopie van 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.0">
<title>xaringanthemer CSS Help • xaringanthemer</title>
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css">
<script src="../bootstrap-toc.js"></script><!-- 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">
<!-- 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><!-- 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><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet">
<meta property="og:title" content="xaringanthemer CSS Help">
<meta property="og:description" content="xaringanthemer">
<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]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc">
    <div class="container template-article">
      <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">
        <a class="navbar-link" href="../index.html">xaringanthemer</a>
        <span class="version label label-danger" data-toggle="tooltip" data-placement="bottom" title="In-development version">0.2.0.9100</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="../articles/xaringanthemer.html">Get started</a>
</li>
<li>
  <a href="../reference/index.html">Reference</a>
</li>
<li>
  <a href="../articles/themes.html">Themes</a>
</li>
<li>
  <a href="../articles/fonts.html">Fonts</a>
</li>
<li>
  <a href="../articles/template-variables.html">Template Variables</a>
</li>
<li>
  <a href="../articles/css-help.html">CSS Help</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<li>
  <a href="../news/index.html">
    <span class="fa fa fa fa-newspaper-o fa-lg"></span>
     
    
  </a>
</li>
<li>
  <a href="https://github.com/gadenbuie/xaringanthemer">
    <span class="fa fa-github fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="https://twitter.com/grrrck">
    <span class="fa fa-twitter fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="https://www.garrickadenbuie.com">
    <span class="fa fa-home fa-lg"></span>
     
  </a>
</li>
      </ul>
</div>
<!--/.nav-collapse -->
  </div>
<!--/.container -->
</div>
<!--/.navbar -->

      
      </header><div class="row">
  <div class="col-md-9 contents">
    <div class="page-header toc-ignore">
      <h1 data-toc-skip>xaringanthemer CSS Help</h1>
            
      
      <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/master/vignettes/css-help.Rmd"><code>vignettes/css-help.Rmd</code></a></small>
      <div class="hidden name"><code>css-help.Rmd</code></div>

    </div>

    
<p>Jump to: <a href="#colors">Colors</a>, <a href="#sizes">Sizes</a>, <a href="#positioning">Positioning</a></p>
<div id="about-this-vignette" class="section level2">
<h2 class="hasAnchor">
<a href="#about-this-vignette" class="anchor"></a>About this vignette</h2>
<p>This vignette cover some basic CSS, in particular to give an idea about the possible values you can use with the various arguments to the xaringan theme functions. See <code><a href="../articles/template-variables.html">vignette("template-variables", package = "xaringanthemer")</a></code> for a full list of the theme functions.</p>
<p>Because we are setting the CSS properties from R, we can either give <strong>xaringanthemer</strong> function arguments a character string or we can call an R function or variable that returns a character string. For example, we can create an R variable with a specific color that is used in several places in a theme</p>
<div class="sourceCode" id="cb1"><html><body><pre class="r"><span class="no">firebrick</span> <span class="kw">&lt;-</span> <span class="st">"#CD2626"</span>
<span class="fu"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(
  <span class="kw">header_color</span> <span class="kw">=</span> <span class="no">firebrick</span>,
  <span class="kw">link_color</span> <span class="kw">=</span> <span class="no">firebrick</span>
)</pre></body></html></div>
<p>or we can directly give the character string</p>
<div class="sourceCode" id="cb2"><html><body><pre class="r"><span class="fu"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(
  <span class="kw">header_color</span> <span class="kw">=</span> <span class="st">"#CD2626"</span>,
  <span class="kw">link_color</span> <span class="kw">=</span> <span class="st">"#CD2626"</span>
)</pre></body></html></div>
<p>in both cases, we get CSS like the following that sets the link color</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb3-1" data-line-number="1">a, a &gt; code {</a>
<a class="sourceLine" id="cb3-2" data-line-number="2">  <span class="kw">color</span>: <span class="dv">#CD2626</span>;</a>
<a class="sourceLine" id="cb3-3" data-line-number="3">}</a></code></pre></div>
<p>Note that when a string is given to the theme function, the outer quotes are removed.</p>
<p>In the sections below, R code is represented without quotes – like <code><a href="https://rdrr.io/r/grDevices/rgb.html">rgb(0.8, 0.15, 0.15)</a></code> – and CSS code is represented inside quotes – like <code>"rgb(205, 38, 38)"</code> – to differentiate between R and CSS functions with the same or similar names.</p>
</div>
<div id="colors" class="section level2">
<h2 class="hasAnchor">
<a href="#colors" class="anchor"></a>Colors</h2>
<p>In CSS, text colors are specified with the <code>color:</code> property, background colors use <code>background-color:</code>, and border colors use <code>border-color:</code>.</p>
<p>In <strong>xaringanthemer</strong>, template variables that set</p>
<ul>
<li>text color end with <code>_color</code>;</li>
<li>background color end with <code>_background_color</code>;</li>
<li>border color end with <code>_border_color</code>;</li>
</ul>
<div id="setting-colors" class="section level3">
<h3 class="hasAnchor">
<a href="#setting-colors" class="anchor"></a>Setting colors</h3>
<p>In CSS, there are a number of ways to specify a color:</p>
<ul>
<li><p>You can use a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords">color keyword</a>, such as <code>"darkslategray"</code> or <code>"red"</code>.</p></li>
<li>
<p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()">RGB color specification</a> either via</p>
<ul>
<li>the hexadecimal representation
<ul>
<li>
<code>"#CD2626"</code> or</li>
<li>
<code>"#CD262680"</code> (50% transparency)</li>
</ul>
</li>
<li>or the rgb function notation
<ul>
<li>
<code>"rgb(255, 38, 38)"</code> or</li>
<li>
<code>"rgba(255, 38, 28, 0.5)"</code> (50% transparency).</li>
</ul>
</li>
</ul>
</li>
<li>
<p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()_and_hsla()">HSL color specification</a> via the functions</p>
<ul>
<li>
<code>"hsl(270,60%,70%)"</code> or</li>
<li>
<code>"hsl(270, 60%, 50%, .15)"</code> (15% transparency).</li>
</ul>
</li>
</ul>
<p>In R, there are a number of ways to specify a color:</p>
<ul>
<li>
<p>Use <code><a href="https://rdrr.io/r/grDevices/rgb.html">rgb(205, 38, 38, maxColorValue = 255)</a></code> as an equivalent to the CSS <code>"rgb()"</code> function.</p>
<ul>
<li>Without the <code>maxColorValue</code> argument, the <code><a href="https://rdrr.io/r/grDevices/rgb.html">rgb()</a></code> function expects decimal numbers in the range [0, 1], like <code><a href="https://rdrr.io/r/grDevices/rgb.html">rgb(0.8039, 0.1490, 0.1490)</a></code>.</li>
<li>The <code><a href="https://rdrr.io/r/grDevices/rgb.html">rgb()</a></code> function also sets transparency via the <code>alpha</code> argument (in the [0, 1] range).</li>
</ul>
</li>
<li>
<p>You can get the hexadecimal representation of a built-in R color using the <code><a href="https://rdrr.io/r/grDevices/col2rgb.html">col2rgb()</a></code> function together with the <code><a href="https://rdrr.io/r/grDevices/rgb.html">rgb()</a></code> function:</p>
<div class="sourceCode" id="cb4"><html><body><pre class="r"><span class="fu"><a href="https://rdrr.io/r/grDevices/rgb.html">rgb</a></span>(<span class="fu"><a href="https://rdrr.io/r/base/t.html">t</a></span>(<span class="fu"><a href="https://rdrr.io/r/grDevices/col2rgb.html">col2rgb</a></span>(<span class="st">"red"</span>)), <span class="kw">maxColorValue</span> <span class="kw">=</span> <span class="fl">255</span>)
<span class="co">#&gt; [1] "#FF0000"</span></pre></body></html></div>
</li>
</ul>
</div>
</div>
<div id="sizes" class="section level2">
<h2 class="hasAnchor">
<a href="#sizes" class="anchor"></a>Sizes</h2>
<p>In <strong>xaringanthemer</strong>, any template variable that accepts a CSS size (or length unit) ends with <code>_size</code>. Sizes are also used for positioning and those template variables end include <code>position</code> in their name.</p>
<p>There are many units available in CSS sizes, but the three most common and easiest to use are pixels (<code>"px"</code>), percentage (<code>"%"</code>), and em units (<code>"em"</code>). Mozilla’s devloper portal has a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">full list of CSS length units</a>.</p>
<p>These sizes are either <em>absolute</em> or <em>relative</em> values. Relative values are set relative to the size of the parent element, but absolute values ignore the parent element.</p>
<dl>
<dt>Pixels <code>"px"</code>
</dt>
<dd>Pixels are an <em>absolute</em> size unit, traditionally representing one device pixel. E.g. <code>"16px"</code> or <code>"23px"</code>.
</dd>
<dt>Percentage <code>"%"</code>
</dt>
<dd>Percentages are relative to the size of the parent element, scaled linearly. E.g. <code>"75%"</code> or <code>"150%"</code>.
</dd>
<dt>em Units <code>"em"</code>
</dt>
<dd>em Units are just like percentages, except expressed as decimals. E.g. <code>"0.75em"</code> or <code>"1.5em"</code>.
</dd>
</dl>
<p>To make this more concrete, here is a simple “page” containing a section header and two paragraphs.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">"page"</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb5-2" data-line-number="2">  <span class="kw">&lt;h1&gt;</span>Section 1<span class="kw">&lt;/h1&gt;</span></a>
<a class="sourceLine" id="cb5-3" data-line-number="3">  <span class="kw">&lt;p&gt;</span>This is paragraph 1...<span class="kw">&lt;/p&gt;</span></a>
<a class="sourceLine" id="cb5-4" data-line-number="4">  <span class="kw">&lt;p&gt;</span>This is paragraph 2...<span class="kw">&lt;/p&gt;</span></a>
<a class="sourceLine" id="cb5-5" data-line-number="5"><span class="kw">&lt;/div&gt;</span></a></code></pre></div>
<p>Intuitively, you might want the section header to have a somewhat bigger font size than the paragraph text, but you don’t want to have to set the text size for each and every paragraph or header.</p>
<p>To do this, we can set the base size of any element inside the <code>&lt;div class="page"&gt;</code>, and adjust the header size relatively.</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="fu">.page</span> {</a>
<a class="sourceLine" id="cb6-2" data-line-number="2">  <span class="kw">font-size</span>: <span class="dv">16px</span>;</a>
<a class="sourceLine" id="cb6-3" data-line-number="3">}</a>
<a class="sourceLine" id="cb6-4" data-line-number="4">h1 {</a>
<a class="sourceLine" id="cb6-5" data-line-number="5">  <span class="kw">font-size</span>: <span class="dv">2em</span>;</a>
<a class="sourceLine" id="cb6-6" data-line-number="6">}</a></code></pre></div>
<p>Now our paragraph font will be 16 pixels tall, and the level 1 headers will be twice as big. If we later decide to change the base font size, say to <code>"15px"</code>, the header text will still be twice as big as the paragraph text.</p>
</div>
<div id="positioning" class="section level2">
<h2 class="hasAnchor">
<a href="#positioning" class="anchor"></a>Positioning</h2>
<p>If you’re reading this, you’re probably wondering how you make an element be <em>where you want it to be</em>.</p>
<p>There are 3 items that <strong>xaringanthemer</strong> can help you position:</p>
<ul>
<li>
<code>background_position</code> (background image position)</li>
<li>
<code>title_slide_background_position</code> (title slide background image position)</li>
<li>
<code>footnote_position_bottom</code> (footnote location from bottom of screen)</li>
</ul>
<div id="footnote-position" class="section level3">
<h3 class="hasAnchor">
<a href="#footnote-position" class="anchor"></a>Footnote Position</h3>
<p><strong>xaringanthemer</strong> provides one template variable to adjust the position of the footnote element. Footnotes can be insterted into a slide using the <code>.footnote[Here's my quick footnote]</code> syntax.</p>
<p>The <code>footnote_position_bottom</code> argument adjust how far from the bottom of the slide the footnote appears. The default value is <code>"60px"</code>, but you can adjust this value up or down to get the footnote where you want.</p>
</div>
<div id="background-position" class="section level3">
<h3 class="hasAnchor">
<a href="#background-position" class="anchor"></a>Background Position</h3>
<p>The background position is set using the theme function arguments that end with <code>background_position</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Syntax">this article on background-position</a> from Mozilla for more information.</p>
<p>Try any of the following values to get started:</p>
<div class="sourceCode" id="cb7"><html><body><pre class="r"><span class="no">background_position</span> <span class="kw">=</span> <span class="st">"center"</span>
<span class="no">background_position</span> <span class="kw">=</span> <span class="st">"top"</span>
<span class="no">background_position</span> <span class="kw">=</span> <span class="st">"left"</span>
<span class="no">background_position</span> <span class="kw">=</span> <span class="st">"bottom"</span>
<span class="no">background_position</span> <span class="kw">=</span> <span class="st">"25% 75%"</span> <span class="co"># X-value (from left) Y-value (from top)</span>
<span class="no">background_position</span> <span class="kw">=</span> <span class="st">"bottom 10px right 20px"</span> <span class="co"># 10px from bottom, 20px from right</span>
<span class="no">background_position</span> <span class="kw">=</span> <span class="st">"top left 10px"</span> <span class="co"># at top but adjusted left 10px</span></pre></body></html></div>
</div>
<div id="general-positioning" class="section level3">
<h3 class="hasAnchor">
<a href="#general-positioning" class="anchor"></a>General Positioning</h3>
<p>Read this section if you want to put a slide element at a specific spot on your slide.</p>
<p>The <code>position</code> CSS element is used to specify where an element is located on the screen. Mozilla provides a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">very good reference on positioning</a> that I’ve summarized here.</p>
<p>An element can be <code>"relative"</code>-ly positioned, <code>"absolute"</code>-ly positioned, <code>"fixed"</code>, <code>"sticky"</code> or <code>"static"</code> (default). For an element with a computed position (i.e. not <code>"static"</code>), you can also specify the <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> CSS properties for that element. The <code>top</code>/<code>bottom</code> parameters specify vertical displacement, and the <code>right</code>/<code>left</code> specify horizontal displacement.</p>
<dl>
<dt>Relatively positioned <code>position: relative</code>
</dt>
<dd>For relatively positioned elements, the element position is adjusted relative to where it <em>would have been</em> if it were <code>static</code>.
</dd>
<dt>Absolutely positioned <code>position: absolute</code> or <code>position: fixed</code>
</dt>
<dd>Absolutely positioned elements are positioned relative to the block that contains the element (called a containing block). A <code>fixed</code> element won’t move with scrolling (but <code>fixed</code> is not recommended for remarkjs slides).
</dd>
</dl>
<p>If you want something to appear in a specific position on your slide, you’ll need to use the <code>extra_css</code> argument of the <strong>xaringanthemer</strong> functions. For example, lets say you want a 300px by 300px box to appear on the right side of your slide, you’ll need to create a special css class:</p>
<div class="sourceCode" id="cb8"><html><body><pre class="r"><span class="fu"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(
  <span class="kw">extra_css</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
    <span class="st">".box-right"</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
      <span class="st">"height"</span> <span class="kw">=</span> <span class="st">"300px"</span>,
      <span class="st">"width"</span> <span class="kw">=</span> <span class="st">"300px"</span>,
      <span class="st">"position"</span> <span class="kw">=</span> <span class="st">"absolute"</span>,
      <span class="st">"top"</span> <span class="kw">=</span> <span class="st">"33%"</span>,
      <span class="st">"left"</span> <span class="kw">=</span> <span class="st">"65%"</span>
    )
  )
)</pre></body></html></div>
<p>This creates CSS like this:</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb9-1" data-line-number="1"><span class="fu">.box-right</span> {</a>
<a class="sourceLine" id="cb9-2" data-line-number="2">  <span class="kw">height</span>: <span class="dv">300px</span>;</a>
<a class="sourceLine" id="cb9-3" data-line-number="3">  <span class="kw">width</span>: <span class="dv">300px</span>;</a>
<a class="sourceLine" id="cb9-4" data-line-number="4">  <span class="kw">position</span>: <span class="dv">absolute</span>;</a>
<a class="sourceLine" id="cb9-5" data-line-number="5">  <span class="kw">top</span>: <span class="dv">33%</span>;</a>
<a class="sourceLine" id="cb9-6" data-line-number="6">  <span class="kw">left</span>: <span class="dv">65%</span>;</a>
<a class="sourceLine" id="cb9-7" data-line-number="7">}</a></code></pre></div>
<p>which you can then use in your slides by wrapping the slide content in <code>.box-right[]</code>.</p>
<pre><code>.box-right[
Stuff inside the box
]</code></pre>
</div>
</div>
  </div>

  <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">

        <nav id="toc" data-toggle="toc"><h2 data-toc-skip>Contents</h2>
    </nav>
</div>

</div>


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

<div class="pkgdown">
  <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.5.0.</p>
</div>

      </footer>
</div>

  
  </body>
</html>