garrick
/
xaringanthemer
Mirror von 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.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">
<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">
<!-- 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">
<script src="../pkgdown.js"></script><meta property="og:title" content="xaringanthemer CSS Help">
<meta property="og:description" content="">
<meta name="twitter:card" content="summary">
<!-- 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>
    <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-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.2.0.9000</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="../index.html">
    <span class="fa fa-home fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="../articles/xaringanthemer.html">Get started</a>
</li>
<li>
  <a href="../articles/singles/themes.html">Themes</a>
</li>
<li>
  <a href="../articles/singles/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>
<li>
  <a href="../reference/index.html">Reference</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<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>
      </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>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"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1">firebrick &lt;-<span class="st"> "#CD2626"</span></a>
<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="kw"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(</a>
<a class="sourceLine" id="cb1-3" data-line-number="3">  <span class="dt">header_color =</span> firebrick,</a>
<a class="sourceLine" id="cb1-4" data-line-number="4">  <span class="dt">link_color =</span> firebrick</a>
<a class="sourceLine" id="cb1-5" data-line-number="5">)</a></code></pre></div>
<p>or we can directly give the character string</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(</a>
<a class="sourceLine" id="cb2-2" data-line-number="2">  <span class="dt">header_color =</span> <span class="st">"#CD2626"</span>,</a>
<a class="sourceLine" id="cb2-3" data-line-number="3">  <span class="dt">link_color =</span> <span class="st">"#CD2626"</span></a>
<a class="sourceLine" id="cb2-4" data-line-number="4">)</a></code></pre></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://www.rdocumentation.org/packages/grDevices/topics/rgb">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://www.rdocumentation.org/packages/grDevices/topics/rgb">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://www.rdocumentation.org/packages/grDevices/topics/rgb">rgb()</a></code> function expects decimal numbers in the range [0, 1], like <code><a href="https://www.rdocumentation.org/packages/grDevices/topics/rgb">rgb(0.8039, 0.1490, 0.1490)</a></code>.</li>
<li>The <code><a href="https://www.rdocumentation.org/packages/grDevices/topics/rgb">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://www.rdocumentation.org/packages/grDevices/topics/col2rgb">col2rgb()</a></code> function together with the <code><a href="https://www.rdocumentation.org/packages/grDevices/topics/rgb">rgb()</a></code> function:</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/grDevices/topics/rgb">rgb</a></span>(<span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/t">t</a></span>(<span class="kw"><a href="https://www.rdocumentation.org/packages/grDevices/topics/col2rgb">col2rgb</a></span>(<span class="st">"red"</span>)), <span class="dt">maxColorValue =</span> <span class="dv">255</span>)</a>
<a class="sourceLine" id="cb4-2" data-line-number="2"><span class="co">#&gt; [1] "#FF0000"</span></a></code></pre></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"><a href="https://www.rdocumentation.org/packages/base/topics/Comparison">&gt;</a></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>"3em"</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"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" data-line-number="1">background_position =<span class="st"> "center"</span></a>
<a class="sourceLine" id="cb7-2" data-line-number="2">background_position =<span class="st"> "top"</span></a>
<a class="sourceLine" id="cb7-3" data-line-number="3">background_position =<span class="st"> "left"</span></a>
<a class="sourceLine" id="cb7-4" data-line-number="4">background_position =<span class="st"> "bottom"</span></a>
<a class="sourceLine" id="cb7-5" data-line-number="5">background_position =<span class="st"> "25% 75%"</span> <span class="co"># X-value (from left) Y-value (from top)</span></a>
<a class="sourceLine" id="cb7-6" data-line-number="6">background_position =<span class="st"> "bottom 10px right 20px"</span> <span class="co"># 10px from bottom, 20px from right</span></a>
<a class="sourceLine" id="cb7-7" data-line-number="7">background_position =<span class="st"> "top left 10px"</span> <span class="co"># at top but adjusted left 10px</span></a></code></pre></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"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="kw"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(</a>
<a class="sourceLine" id="cb8-2" data-line-number="2">  <span class="dt">extra_css =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb8-3" data-line-number="3">    <span class="st">".box-right"</span> =<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb8-4" data-line-number="4">      <span class="st">"height"</span> =<span class="st"> "300px"</span>,</a>
<a class="sourceLine" id="cb8-5" data-line-number="5">      <span class="st">"width"</span> =<span class="st"> "300px"</span>,</a>
<a class="sourceLine" id="cb8-6" data-line-number="6">      <span class="st">"position"</span> =<span class="st"> "absolute"</span>,</a>
<a class="sourceLine" id="cb8-7" data-line-number="7">      <span class="st">"top"</span> =<span class="st"> "33%"</span>,</a>
<a class="sourceLine" id="cb8-8" data-line-number="8">      <span class="st">"left"</span> =<span class="st"> "65%"</span></a>
<a class="sourceLine" id="cb8-9" data-line-number="9">    )</a>
<a class="sourceLine" id="cb8-10" data-line-number="10">  )</a>
<a class="sourceLine" id="cb8-11" data-line-number="11">)</a></code></pre></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="sidebar">
        <div id="tocnav">
      <h2 class="hasAnchor">
<a href="#tocnav" class="anchor"></a>Contents</h2>
      <ul class="nav nav-pills nav-stacked">
<li><a href="#about-this-vignette">About this vignette</a></li>
      <li><a href="#colors">Colors</a></li>
      <li><a href="#sizes">Sizes</a></li>
      <li><a href="#positioning">Positioning</a></li>
      </ul>
</div>
      </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.3.0.</p>
</div>
      </footer>
</div>

  
  </body>
</html>