Slideshow Custom CSS

The Theme Setting can be used to set the default visual theme for your slideshow presentation. This theme determines the default font, colors, spacing etc. for your slides.

Each of the six themes supported by GitPitch are based on a subset of themes provided by Reveal.js. The CSS style sheets that correspond to the supported themes can be found in the GitPitch repo here.

To customize the theme for your slideshow presentation do the following:

1. Create a custom CSS stylesheet that overrides any properties in the theme stylesheet
2. Add that custom CSS stylesheet to your Git repo
3. Register your custom CSS stylesheet in your PITCHME.yaml

For example, assume assets/css/PITCHME.css is added to your Git repo. Register it in your PITCHME.yaml as follows:

theme-override : assets/css/PITCHME.css

The theme-override property also supports absolute URLs so your custom CSS stylesheet can live external to your Git repo. This can be useful if you intend applying your custom style changes to more than one GitPitch presentation.

Example 1: Remove Image Borders

By default, slide inline images are rendered with a border and box-shadow. Use the following custom CSS stylesheet to override the default behavior in order to remove image borders for your slideshow:

.reveal section img {
  border: 0;
  box-shadow: none;
}

Example 2: Left-Align Slide Content

By default, slide content is center-aligned both horizontally and vertically. Use the following custom CSS stylesheet to override the default behavior in order to left-align content for your slideshows:

.reveal .slides {
    text-align: left;
}
.reveal .slides section>* {
    margin-left: 0;
    margin-right: 0;
}

Note, if you also want your slide content to be top-aligned rather than vertically center-aligned you can use this CSS in conjunction with the Vertical Center Setting. The combined effect should give you slide content that flows from the top-left corner of each slide.