Customizing the Branding and Look of Your Training Site

by Ana Mays
Follow

Skilljar’s Base Theme is what your Skilljar theme looks like without any additional HTML, CSS, or Javascript customization. Whether you are a brand new customer or creating a new theme to begin building on top of, the Base Theme is where you will start. Any time you create a new theme, you begin with a clean slate and are able to begin building on top of it.

 

Please note that creating a new theme does not automatically apply the theme to your domain(s). Any theme that you create would still have to be assigned to a domain in order for the theme and changes to become live and accessible by your learners.

 

Jump to a section:

Getting Started with a New Theme

Customizing the Base Theme

Accessibility Features

Enabling a Theme on a Domain(s)

Editing a Theme

Deleting a Theme

 

Getting Started with a New Theme

Create a New Theme

  1. After logging into the Skilljar Dashboard as an Admin, navigate to Theming

Screen_Shot_2021-04-21_at_10.27.44_AM.png

The Theming page has a table that shows all of your existing themes, as well as the domain(s) each theme might be enabled for, when it was created, and when it was last updated. The table also allows you to delete themes, as long as they are not actively applied to a domain. 

 

  1. Click the New Theme button near the top-right corner of the page. 

Screen_Shot_2021-04-21_at_11.35.30_AM.png

The steps below will walk through the various sections available for matching your theme to your brand.

 

Customizing the Base Theme

Customizing your theme is an easy way to match your training domain to your brand guidelines.

 

Theme Name

Screen_Shot_2021-04-22_at_8.44.16_AM.png

Naming your theme is a good way to identify different themes you may have. It is common to see notations for different versions of a theme (v1, v2, etc… or adding the date), in the event that you need to revert to a previous version or match something to a current theme. Additionally, Admins will tend to tie the theme name to the domain or audience. For example, if the theme was intended for your external training domain, you may title it “Customer Theme v1" or "Academy Theme - May 2021". The theme name is only seen by Admins, not your learners.

 

Header

Screen_Shot_2021-04-22_at_9.02.19_AM.png

The Header section allows you to customize the header banner that shows across the top of your site. 

  • Logo: The Header Logo is an image that will appear across the top of your catalog pages. Matching this image to your brand is a good way to create consistency for your learners. The ideal size is 162px tall. The width can vary depending on your image.
  • Logo Link (Optional): Feel free to insert a link here. When a learner clicks on the logo, they will be directed to whatever link you set. Leaving it blank will direct them to your Catalog Homepage, which we recommend.
  • Background Color: This sets the background color for the header.
  • Text Color: This sets the color for any text in your header, although it won’t affect any text that is uploaded in your logo image. It will impact any header text, links, as well as the back arrow on Catalog Pages. 

Screen_Shot_2021-04-22_at_9.04.19_AM.png

Look & Feel

Screen_Shot_2021-04-22_at_9.16.53_AM.png

The Look & Feel section can be edited to provide even more customization for matching your training site to your brand.

  • Favicon: The favicon is the image that appears in the tab of your browser window when someone is on your site. Customizing this with a logo or relevant image allows your learner to easily identify the page when switching between tabs. The ideal image size is 16 x 16 pixels.
  • Button Color: The button color sets a color to use for the buttons that a learner might come across while navigating your site (Register, Purchase, Next button for lesson navigation, etc…). This is separate from the text color which is set in the header section.
  • Link Color: The link color sets the color that will be used for hyperlinks that are included throughout the text on your site. Below, you’ll see “Click here to learn more!” includes a hyperlink using the Link color.

Screen_Shot_2021-04-22_at_9.25.10_AM.png

Lesson Settings

The Lesson Settings Section creates/sets the learner’s experience when viewing a lesson within a published course.

Screen_Shot_2021-04-22_at_9.56.08_AM.png

  • Lesson Color Scheme: Here, you have 2 options for the Lesson Color Scheme. You can choose if your learners will view your lesson content using a Light or Dark Color Scheme. The Default selection is Light, but feel free to try out both options to see what works best for your content.
  • Automatically Open Lesson Details: You have the option to automatically show or hide the lesson details (Lesson Summary and Comment section) for your learners. If you regularly include information and links in the summary, it is recommended to show the Lesson Details since you wouldn’t want your learners to miss that content. The Comment Section will only be displayed if you have a Disqus account enabled (see below).
  • Position of Lesson Details On Lesson Page: You have the option of placing your Lesson Details to the Right, Left, or Below your lesson content. The example below shows the position set as Below. However, try different options to see what works best for your content.
  • Disqus Shortname: If you have or would like to create an account with Disqus, this gives you the option to include a comment section as a part of your lesson. After creating an account, you can find your Disqus Shortname and paste it into the field. Learn more about enabling Disqus for comments.
  • Lesson Menu: Depending on what you’d like for your learner’s experience to be, you can choose between “Displaying lesson menu by default (will display as left nav)” or “Hiding lesson menu by default (will be accessible via top nav).” In the example below, the lesson menu is hidden by default, but learners are able to click the Lessons icon in the navigation bar to expand it.

Screen_Shot_2021-04-22_at_9.55.30_AM.png


Email Settings

Screen_Shot_2021-04-29_at_11.15.41_AM.png

The Email Settings section allows you to customize some of your email preferences for emails sent to learners from Skilljar (Registration, Engagement, Completion, Live Event Notifications, etc…)

  • Background Color: The background color is the color surrounding the image and copy of your message. This can be customized to match your company’s styling guidelines.
  • Email Image: An Email Image can be uploaded that will display above your message. This should be brand-specific since it will be included in all of the emails your learner receives regarding their actions within Skilljar. The maximum image size is 800px wide and 200px high, and can be JPEG or PNG format
  • Display Name: This is the name the learner will see in their inbox showing who the email is from. This name will be shown on transactional emails to students, and on other business documents. If blank, the organization’s display name will be used instead.
  • Announcement Email: Emails sent on your behalf to learners from the Skilljar platform will be sent from this address. For instance, student announcements, purchase confirmations, engagement emails, and dashboard user invites.
  • Help Email: Students will use this email address to contact you whenever they need help with one of your courses. If blank, password reset emails will be sent from the Announcement Email address, and purchase page and order confirmation emails will not include a contact email.
  • Reply-To-Email: You can designate a separate reply-to email address for emails sent from your Skilljar account, such as notifications.

Screen_Shot_2021-04-26_at_3.12.10_PM.png

 

Code Snippets

Screen_Shot_2021-04-22_at_10.52.56_AM.png

Code Snippets allow you to build beyond the Skilljar Base Theme through HTML, CSS, and Javascript. 

  • Google Analytics Tracking IDs: You may enter more than one, separated by a comma.
  • Global Title: Defines the HTML page title for any pages on your training site (e.g. sign in / sign up, student profile) that are not catalog pages or other titled objects (e.g. published courses). Sets the meta attribute global-title on every page of your training site, enabling you to leverage that metadata via CSS and Javascript.
  • Cookie Policy Code Snippet: This code snippet is inserted at the very top of the HEAD section in your HTML pages. Place your cookie acceptance javascript here so that it runs before any tracking cookies may be set.
  • Global head snippet: Add custom code snippets that are injected into the head of every page after the theme CSS. Include starting and ending tags: <style></style> for CSS.

- MVP Site Customization Options

- Customizing your Site: CSS and Javascript - Element Targeting Overview

- Customizing Your Training Site with CSS and JavaScript

  • Global code snippet: Custom code snippet that is injected at the bottom of every page. Include starting and ending tags: <script></script> for javascript.
  • Conversion code snippet - Custom code snippet that is injected upon successful purchase after the Global Code Snippet. Include starting and ending tags: <script></script> for javascript.
  • Course completion code snippet - Custom code snippet that is injected upon a course completion event. Include starting and ending tags: <script></script> for javascript.



Checkout Settings

Screen_Shot_2021-04-22_at_11.03.20_AM.png

You are able to upload an image that will be used when learners go through the checkout process through Paypal. The image must be 190x60px.

 

After creating or making changes to a theme, be sure to hit the Save button.

 

 

Accessibility Features

Skilljar has included accessibility features that will benefit learners of all abilities when they arrive to your site. Some of these features include: 

  • Focus States on all default Skilljar objects (highlights interactive components, and is useful when using a keyboard to navigate)
  • Keyboard-Only Navigation (ability to navigate the entire domain without the use of a mouse)
  • Compatibility with Screen Readers (content can be consumed using a third party program, such as screen readers)
  • Ability to add Alt-text to images when uploading through the platform (Note: promo images, however, will automatically use the course name as the Alt-text field)

 

Skilljar gives Dashboard Admins the ability to customize colors, fonts, and text size throughout the platform through the editors and CSS. Admins should design their content and theme with accessibility in mind, especially for areas such as contrast, readability, Alt Text, and the addition of transcripts and/or subtitles.

 

Enabling a Theme on a Domain(s)

After creating a new theme, you will need to enable it on the domain(s) of your choice in order for the customization to take effect. 

 

  1. To enable your theme, you will need to be logged into the Skilljar Dashboard as an Admin and navigate to Domains & Publishing

Screen_Shot_2021-04-29_at_11.30.01_AM.png

  1. Click the Edit Icon under Domain Settings for the domain you’d like to apply a new theme to. If you would like to apply it to more than one domain, you’ll repeat this process for each.

Screen_Shot_2021-04-22_at_11.15.19_AM.png

  1. Scroll down towards the bottom of the page until you see the section for Theme. Select the theme you’d like to use from the drop-down menu. 

Screen_Shot_2021-04-22_at_11.19.02_AM.png

  1.  Click the Save Theme button.

Your theme will now be updated and live on the domain that you chose. 

 

Editing a Theme

You are able to make edits to your existing theme at any time. 

 

  1. After logging into the Skilljar Dashboard as an Admin, navigate to Theming

Screen_Shot_2021-04-21_at_10.27.44_AM.png

The Theming page has a table that shows all of your existing themes, as well as the domain(s) each theme might be enabled for, when it was created, and when it was last updated.

  1. Click on the name of the theme that you’d like to edit or make changes to.

Screen_Shot_2021-04-22_at_11.24.13_AM.png

  1. Scroll through the different sections to make your edits. When finished, be sure to click the Save button.

Any edits you made will be saved and immediately applied to any active themes on your domain(s).

 

Deleting a Theme

You are able to delete existing themes at any time, as long as they are not actively applied to a domain. 

  1. After logging into the Skilljar Dashboard as an Admin, navigate to Theming

Screen_Shot_2021-04-21_at_10.27.44_AM.png

The Theming page has a table that shows all of your existing themes, as well as the domain(s) each theme might be enabled for, when it was created, and when it was last updated.

  1. In the far-right column of the table, click the X for the theme that you’d like to Delete. Please note, you are not able to delete a theme that is linked to a domain. If you would like to delete that theme, follow the above-outlined process of enabling a new theme to that domain. 

Screen_Shot_2021-04-22_at_11.24.13_AM.png

  1. You’ll receive a message asking you to confirm this action. Click OK to delete the theme.

Screen_Shot_2021-04-22_at_11.30.00_AM.png

You’ll receive a notification confirming the deletion of the theme and it will no longer be listed in your table.

Screen_Shot_2021-04-22_at_11.31.44_AM.png

 

Powered by Zendesk