Getting Started

You can apply these styles in the Course Dashboard under Branding & Behavior Settings, or in your main Account Settings under Branding for a global default. Custom CSS is an advanced feature that allows you to override the default styles of the course player.

Important Note on Specificity

Our platform styles are quite specific. To ensure your custom styles are applied, you will often need to use the !important rule. This tells the browser that your style should take precedence.

Basic Text Styling

You can target basic HTML elements like headings and paragraphs directly. For example, to change the font for all headings to a more formal, serif font:

/* Use a serif font for all headings */
h1, h2, h3 {
  font-family: 'Georgia', serif !important;
  text-transform: uppercase !important;
}

Targeting QuikAuthor Components

We provide specific CSS classes for more granular control over course components. Here are a few examples:

Main Button

Customize the main action button at the bottom of most slides.

/* Make the button pill-shaped with a shadow */
.qa-button {
  border-radius: 9999px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}

Multiple Choice Options

Add a distinctive style to multiple-choice answers.

/* Add a colored left border and hover effect */
.qa-mcq-option {
  border-left-width: 4px !important;
  border-left-color: #007bff !important;
  transition: transform 0.2s ease !important;
}

.qa-mcq-option:hover {
  transform: translateX(5px) !important;
}

Slide Container

Add a border or other styles to the main slide area.

/* Add a subtle gradient background to all slides */
.qa-slide-container {
  background: linear-gradient(to bottom, #ffffff, #f7f7f7) !important;
  border: 1px solid #e0e0e0 !important;
}

Targeting Specific Slide Templates

You can apply styles to only one type of slide by using its data-template attribute. This is useful for highly specific branding.

/* Make the Quote slide text larger */
[data-template="Quote"] blockquote {
  font-size: 2.5rem !important;
}

/* Change the background of only Solid Cover slides */
[data-template="SolidCover"] {
  background-color: #2c3e50 !important;
}

Advanced Examples

Adding Animations

You can add keyframe animations to elements for more dynamic effects.

/* Add a pulsing animation to the timer */
.qa-timer {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Hiding Elements

You can hide certain elements if they don't fit your design.

/* Hide the logo on all slides */
.qa-logo {
  display: none !important;
}

Available Component Classes

Here is a list of some of the most common classes you can target:

.qa-slide-container: The main container for the slide content.
.qa-button: The primary action button.
.qa-mcq-option: An individual multiple-choice option.
.qa-header-text: The main header/title on many slides.
.qa-subheader-text: The sub-header/description text.
.qa-timer: The timer element in timed games.
.qa-logo: The logo image container.

QuikAuthor Custom CSS Cheat Sheet