|
|
|
@@ -1,334 +0,0 @@ |
|
|
|
<!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"><-</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 > 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">#> [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"><div</span><span class="ot"> class=</span><span class="st">"page"</span><span class="kw">></span></a> |
|
|
|
<a class="sourceLine" id="cb5-2" data-line-number="2"> <span class="kw"><h1></span>Section 1<span class="kw"></h1></span></a> |
|
|
|
<a class="sourceLine" id="cb5-3" data-line-number="3"> <span class="kw"><p></span>This is paragraph 1...<span class="kw"></p></span></a> |
|
|
|
<a class="sourceLine" id="cb5-4" data-line-number="4"> <span class="kw"><p></span>This is paragraph 2...<span class="kw"></p></span></a> |
|
|
|
<a class="sourceLine" id="cb5-5" data-line-number="5"><span class="kw"></div></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><div class="page"></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> |
