If you have coding knowledge and want more customization than is available in your Theme settings, you can add custom CSS (Cascading Style Sheets).

ūüóí Note: Before you customize your CSS, just know that we can't provide support for any changes you make due to the infinite number of possibilities. Additionally, we make frequent small improvements to the UI and sometimes redesign areas completely which impacts CSS code across the platform. With that in mind, know that we can't guarantee your customized CSS will always apply or give advance notice for changes. To keep your custom CSS maintenance minimal, we suggest limiting your CSS changes to fonts and colors.

How to add CSS

Open your Administrator Dashboard and click "Account Settings" or just select "Settings" from the main menu. Go to "Customize your brand" and you'll see an advanced option where you can paste in your custom CSS (/manage/school/brand/css/).

H1, H2, H3, H4, body, blockquote and other text changes will be applied to your course heading, to the Path, and to content within Steps. You can adapt the CSS template below if needed. 

Hosting your font

Custom fonts require a Typekit or Google Fonts script. You can create an embed code for your desired font at one of the following locations:

Once you have the embed code for your font, go to "Account Settings" on the main menu or Dashboard, then "Connect other apps," then "Add custom code & pixel tracking." Paste your code into the header field (/manage/school/integrations/custom/). 

CSS Template

  /* platform headings */
  .ResourceHeaderDisplay__name,
  .ResourceHeaderDash__name,
  .Banner__heading,
  .PathTopicDetails__title,
  .PathGroupDetails__title {
   
  }

  /* content h1 */
  .Text--theme h1,
  .theme-typography h1,
  .Redactor--theme .redactor-editor h1 {
   
  }

  /* content h2 */
  .Text--theme h2,
  .theme-typography h2,
  .Redactor--theme .redactor-editor h2 {
   
  }

  /* content h3 */
  .Text--theme h3,
  .theme-typography h3,
  .Redactor--theme .redactor-editor h3 {
   
  }

  /* content h4 */
  .Text--theme h4,
  .theme-typography h4,
  .Redactor--theme .redactor-editor h4 {
   
  }

  /* content h5 */
  .Text--theme h5,
  .theme-typography h5,
  .Redactor--theme .redactor-editor h5 {
   
  }

  /* content blockquote */
  .Text--theme blockquote,
  .theme-typography blockquote,
  .Redactor--theme .redactor-editor blockquote {
   
  }

  /* content body text */
  .Text--theme div,
  .theme-typography div,
  .Redactor--theme .redactor-editor div,
  .Text--theme p,
  .theme-typography p,
  .Redactor--theme .redactor-editor p,
  .Text--theme li,
  .theme-typography li,
  .Redactor--theme .redactor-editor li,
  .question-card-view header .question-card-description {
   
  }

  /* content links */
  .Text--theme a,
  .theme-typography a,
  .Redactor--theme .redactor-editor a {
   
  }

  .Text--theme a:hover,
  .theme-typography a:hover,
  .Redactor--theme .redactor-editor a:hover {
   
  }

  /* DO NOT CHANGE */

  .Text--theme span:not([class]),
  .theme-typography span:not([class]),
  .Redactor--theme .redactor-editor span:not([class]) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  /* italic */
  .Text--theme i,
  .theme-typography i,
  .Redactor--theme .redactor-editor i,
  .Text--theme em,
  .theme-typography em,
  .Redactor--theme .redactor-editor em {
    font-family: inherit;

  }

  /* bold */
  .Text--theme b,
  .theme-typography b,
  .Redactor--theme .redactor-editor b,
  .Text--theme strong,
  .theme-typography strong,
  .Redactor--theme .redactor-editor strong {
    font-family: inherit;
    font-weight: 500;
  }

  /* bold and italic */
  .Text--theme i>b,
  .theme-typography i>b,
  .Redactor--theme .redactor-editor i>b,
  .Text--theme em>b,
  .theme-typography em>b,
  .Redactor--theme .redactor-editor em>b,
  .Text--theme b>i,
  .theme-typography b>i,
  .Redactor--theme .redactor-editor b>i,
  .Text--theme b>em,
  .theme-typography b>em,
  .Redactor--theme .redactor-editor b>em,
  .Text--theme strong>i,
  .theme-typography strong>i,
  .Redactor--theme .redactor-editor strong>i,
  .Text--theme strong>em,
  .theme-typography strong>em,
  .Redactor--theme .redactor-editor strong>em,
  .Text--theme i>strong,
  .theme-typography i>strong,
  .Redactor--theme .redactor-editor i>strong,
  .Text--theme em>strong,
  .theme-typography em>strong,
  .Redactor--theme .redactor-editor em>strong {
    font-family: inherit;
    font-weight: 500;
  }

Sample attributes

 {

   font-family: "fontname", serif;

   font-weight: 300;

   font-size: 26px;

   font-style: normal;

   line-height: 42px;

   color:rgb(50,50,135);

   margin: 30px 0 !important;

   padding: 24px 0;

   text-align: center;

   border: none;

   border-top: 1px solid rgb(150,46,46);

   border-bottom: 1px solid rgb(150,46,46);

  }
Did this answer your question?