You may need to refresh the editor and preview to see these take effect.

If you already have a custom theme some CSS may not be specific enough to override the theme CSS.

This code assumes you have a working knowledge of how CSS works! If you require our help to debug or fix your code, you may be charged.

TIP: We recommend writing and editing your code in a dedicated code editor (such as Visual Studio Code) and pasting into Shorthand. This will be much more efficient and provide better formatting and debugging options.

Background colours

Change the background colour of all light background sections

.Theme-Section-Light {
  background-color: #12bf9c!important;
}

Change the background colour of all dark background sections

.Theme-Section-Dark {
  background-color: #12bf9c!important;
}

Change the background colour of the header

.Theme-HeaderContainer {
  background-color: #12bf9c!important;
}

Change the background colour of the story navigation

NB this uses a different method for each breakpoint

@media (max-width: 1099px) {   
.Theme-NavigationBar {     
background-color: #12bf9c!important;   
} 
} 
@media (min-width: 1100px) {  
 .Theme-NavigationBar:before {     
background-color: #12bf9c!important;   
} 
}


Link colours

Change the colour and font of light background linked text (e.g. within light background sections)

.Theme-Layer-BodyText a {
    font-family:Comic Sans MS, Textile, Cursive!important;
    color: #12bf9c!important;
}

Change the colour and font of dark background linked text (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText a {
   font-family:Comic Sans MS, Textile, Cursive!important; 
   color: #12bf9c!important;
}


Fonts and text colours

Title section - change the colour and font of story title

.Theme-TitleSection .Theme-Layer-TextBlock-Inner  .Theme-StoryTitle {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Title section - change the colour and font of story subtitle

.Theme-TitleSection .Theme-Layer-TextBlock-Inner .Theme-LeadIn {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Title section - change the colour and font of story byline

.Theme-TitleSection .Theme-Layer-TextBlock-Inner .Theme-Byline {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Text over media section - change the colour and font of top text block

.Theme-TextOverMediaSection .Theme-Layer-TextBlock-Inner  .Theme-Title {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Text over media section - change the colour and font of middle text block

.Theme-TextOverMediaSection .Theme-Layer-TextBlock-Inner .Theme-SubTitle {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Text over media section - change the colour and font of bottom text block

.Theme-TextOverMediaSection .Theme-Layer-TextBlock-Inner .Theme-Text {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Title & Text over media section - change the colour of captions

.Theme-OverlayedCaption { 
    background-color: #12bf9c!important;
}
.Theme-OverlayedCaption p { 
    color: black!important;
}

Change captions

.Theme-Caption p {
  color:#12bf9c!important;
  font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of light background body text (e.g. within light background sections)

.Theme-Story .Theme-Layer-BodyText p {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of large subheadings (e.g. within light background sections)

.Theme-Layer-BodyText-Heading-Large {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of medium subheadings (e.g. within light background sections)

.Theme-Layer-BodyText-Heading-Small {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of small subheadings (e.g. within light background sections)

.Theme-Layer-BodyText-Heading-xs {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of quotes (e.g. within light background sections)

.Theme-Layer-BodyText-Blockquote {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of dropcaps (e.g. within light background sections)

.Theme-Layer-BodyText-Dropcap:first-letter {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of light background body text (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText p {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of large subheadings (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText-Heading-Large {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of medium subheadings (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText-Heading-Small {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of small subheadings (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText-Heading-xs {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of quotes (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText-Blockquote {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}

Change the colour and font of dropcaps (e.g. within dark background sections)

.Theme-Section-Dark .Theme-Layer-BodyText-Dropcap:first-letter {
    color:#12bf9c!important;
    font-family:Comic Sans MS, Textile, Cursive!important;
}


Section specific styles

Remove extra padding on dark background scollmation text columns

@media (min-width: 900px) {
  .Theme-Section-Dark.Theme-BackgroundScrollmationSection .Theme-Layer-BodyText {
    padding-top: calc(60px - 1.5rem)!important;
    padding-bottom: 60px!important;
  }
}

Remove padding on media sections so that images are full-width

.Theme-MediaSection .Theme-Layer-ResponsiveMedia-image {
  padding:0!important;
}