Title slide - yihui/xaringan GitHub Wiki

Most often you want to have a different style on your title slide. All slide styles in remark.js are defined by classes. The "title slide" class is not present in the default example.css. There, the title slide is based on the .inverse class. All changes to class .inverse will hence affect your title slide AND all slides within your presentation which are based on the .inverse class. Hence, you may want to separate your title slide from the .inverse class. The class name to use is .title-slide. All settings applied to this class will only change the title slide.

Background image

To change the background image of the title slide insert the following in your my-theme.css:

.title-slide {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/39/Naruto_Shiki_Fujin.svg);
  background-size: cover;
}

background-size takes care that your image is scaled to fit into the slide.

Color and line spacing of headers

You can also change the appearance of the headers for the title slide only:

.title-slide h1 {
  color: #F7F8FA;
}
.title-slide h2, .title-slide h3 {
  color: #e7e8e2; 
  line-height: 1.5em;
}

In this example we set the same color for headers h2 and h3 (grey) while h1 gets a different color (the same links are using). You can change the line spacing if you have long headers using line-height. Default is 1.0em.

Make sure to insert your .title-slide block after the .inverse block - the latter one will always overwrite the first one.

Removal of slide number

Usually you do not want to have a slide number on your title slide. There is a specific class remark-slide-number in remark.js responsible for the slide number. You can hide the number on the title slide by

.title-slide .remark-slide-number {
  display: none;
}

Adjusting vertical space

Many title slide layouts use predefined blocks with different colours for main title, subtitle and author information etc. If you enter your information and the vertical space of title, author and date do not fit within your title slide layout, you have two options to adjust it:

1. Add the <br> html tag right into your title field in the YAML header. This will add a defined vertical space to your chosen field.

2. Go to your specific title slide header, e.g. title-slide h1{} and change the margins:

.title-slide h1 {
  text-shadow: none;
  color: #F7F8FA;
  margin-top: -70px;
}

Setting margin-top: -70px; will reduce the vertical space of your header and move it more upwards. You can do the same with margin-bottom, margin-right or margin-left.

NOTE: Changing the margins of one header level may also have effects on other heading levels!

Disable default title slide

When setting seal: false in the YAML header, the first slide of the presentation will not use the information from the YAML header. This is particular helpful to create a title slide fully from scratch using custom HTML div boxes.

To do so, you can either use the existing title-slide class or define a new one in a custom CSS and tweak it. Within it, you can define custom div boxes and insert them into the slide using HTML.

Such custom divs are also useful if you want to have a specific image/color box repeated across all slides except the title slide. See the following question on stackoverflow for an example.