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
vignette("template-variables", package = "xaringanthemer") for a full list of the theme functions.
Because we are setting the CSS properties from R, we can either give xaringanthemer 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
or we can directly give the character string
in both cases, we get CSS like the following that sets the link color
Note that when a string is given to the theme function, the outer quotes are removed.
In the sections below, R code is represented without quotes – like
rgb(0.8, 0.15, 0.15) – and CSS code is represented inside quotes – like
"rgb(205, 38, 38)" – to differentiate between R and CSS functions with the same or similar names.
In CSS, text colors are specified with the
color: property, background colors use
background-color:, and border colors use
In xaringanthemer, template variables that set
In CSS, there are a number of ways to specify a color:
You can use a color keyword, such as
You can use the RGB color specification either via
"rgb(255, 38, 38)"or
"rgba(255, 38, 28, 0.5)"(50% transparency).
You can use the HSL color specification via the functions
"hsl(270, 60%, 50%, .15)"(15% transparency).
In R, there are a number of ways to specify a color:
rgb(205, 38, 38, maxColorValue = 255) as an equivalent to the CSS
rgb()function expects decimal numbers in the range [0, 1], like
rgb(0.8039, 0.1490, 0.1490).
rgb()function also sets transparency via the
alphaargument (in the [0, 1] range).
You can get the hexadecimal representation of a built-in R color using the
col2rgb() function together with the
In xaringanthemer, any template variable that accepts a CSS size (or length unit) ends with
_size. Sizes are also used for positioning and those template variables end include
position in their name.
There are many units available in CSS sizes, but the three most common and easiest to use are pixels (
"px"), percentage (
"%"), and em units (
"em"). Mozilla’s devloper portal has a full list of CSS length units.
These sizes are either absolute or relative values. Relative values are set relative to the size of the parent element, but absolute values ignore the parent element.
To make this more concrete, here is a simple “page” containing a section header and two paragraphs.
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.
To do this, we can set the base size of any element inside the
<div class="page">, and adjust the header size relatively.
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
"15px", the header text will still be twice as big as the paragraph text.
If you’re reading this, you’re probably wondering how you make an element be where you want it to be.
There are 3 items that xaringanthemer can help you position:
background_position(background image position)
title_slide_background_position(title slide background image position)
footnote_position_bottom(footnote location from bottom of screen)
xaringanthemer provides one template variable to adjust the position of the footnote element. Footnotes can be insterted into a slide using the
.footnote[Here's my quick footnote] syntax.
footnote_position_bottom argument adjust how far from the bottom of the slide the footnote appears. The default value is
"3em", but you can adjust this value up or down to get the footnote where you want.
The background position is set using the theme function arguments that end with
background_position. See this article on background-position from Mozilla for more information.
Try any of the following values to get started:
background_position = "center" background_position = "top" background_position = "left" background_position = "bottom" background_position = "25% 75%" # X-value (from left) Y-value (from top) background_position = "bottom 10px right 20px" # 10px from bottom, 20px from right background_position = "top left 10px" # at top but adjusted left 10px
Read this section if you want to put a slide element at a specific spot on your slide.
position CSS element is used to specify where an element is located on the screen. Mozilla provides a very good reference on positioning that I’ve summarized here.
An element can be
"static" (default). For an element with a computed position (i.e. not
"static"), you can also specify the
left CSS properties for that element. The
bottom parameters specify vertical displacement, and the
left specify horizontal displacement.
fixedelement won’t move with scrolling (but
fixedis not recommended for remarkjs slides).
If you want something to appear in a specific position on your slide, you’ll need to use the
extra_css argument of the xaringanthemer 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:
This creates CSS like this:
which you can then use in your slides by wrapping the slide content in
.box-right[ Stuff inside the box ]