Style your learning content with external CSS

The text editor in Learn365 gives you the freedom to style and format learner-facing content using a wide variety of options.

You can style content created in the content editor by adding style directly in the source code, as shown in this article. Adding style via the source code will only affect the content you are applying it to.

If you want to apply the same styling to several modules and courses, such as styling the background color, your brand logo, or other branding elements, it is easier to use an external stylesheet document.

 

 

To use an external stylesheet document, you need to create a CSS file with the desired style codes and place the CSS file in an online location.

You can place it in a SharePoint folder or in another online location where you can upload and host files. Your learners must have “View” access to the file location because the CSS file will be used every time a course is accessed.

 

 

Step #1

Start by creating a CSS file. You can use advanced coding applications, or you can use a simple Notebook or similar. Make sure that you save it as a .css file type.

 

 

When you've created a CSS file and placed it in an appropriate location that learners have access to, your next step is to integrate it into the content editor.

In this example, a file called style_demo.css was created and placed in a SharePoint folder, from where it can be read.

 

Step #2

Open or create a learning module and add a content editor.

Select the Source code icon to open the source code editor.

 

 

Step #3

In the Source Code panel, you can add the CSS file using this code.

 

<style>
@import url('YOUR LINK TO THE CSS FILE');
</style>

 

Step #4

Then, you can start to write your HTML code and refer to styles in your added CSS file.

This is the code used in the example:

CSS

@charset "utf-8";
/* CSS Document */
.description-content {
    background-color: #fff;
    background-image: linear-gradient(#ececff, #fff);
    margin: 0;
    padding: 0;
    max-width: 100%;
}
.topbar {
    color: #000;
    text-align: left;
    padding: 20px;
}
.logo_compafi {
    height: 75px;
    vertical-align: middle;
    content: url("LINK TO YOUR LOGO");
}
.title {
    display: inline-block;
    margin-left: 10px;
    font-size: 28px;
    font-weight: bolder;
    vertical-align: middle;
}
.ceo_byline{
	font-style: italic; 
	font-weight: 100; 
	font-size: 18;
}
.content {
    text-align: left;
    padding: 20px;
}
.content p {
    font-size: 18px;
    margin: 20px 0;
}
.content img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}
.content iframe {
    border-radius: 20px;
}
.endQuote {
    text-align: center;
    padding: 20px;
}
.endQuote p {
    font-size: 22px;
    font-weight: bolder;
    margin: 20px 0;
}
.endQuote img {
    max-width: 70px;
}
hr.new {
    border-top: 1px dashed #4f4fff;
}

  

 

HTML

<style>
@import url('YOUR LINK TO THE CSS FILE');
</style>

<div class="description-content">
<div class="topbar"><img class="logo_compafi" alt="Compafi Logo">
<div class="title">Welcome to Compafi</div>
</div>
<hr class="new">
<div class="content">
<p><b>A warm welcome by our CEO</b><br><br>I'd like to wish you a heartfelt welcome to the Learn365 team.<br><br>We are a diverse group of people of all ages and backgrounds, spread across the world, working together on one common mission: To help organizations empower people through learning. That mission is the glue that keeps us all together.</p>
<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/894110804?h=cf9344762e&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" title="Compafi_welcome3_2"></iframe></div>
<script src="https://player.vimeo.com/api/player.js" type="text/javascript"></script>
</div>
<div class="endQuote">
<p>Welcome to the team</p>
<p class="ceo_byline">CEO, Kay Bradelle</p>
<img src="https://assets-usa.mkt.dynamics.com/9c949386-c0e0-4279-9d35-d0027dc8c8f2/digitalassets/images/8fcf2ab0-3273-ee11-9ae7-000d3a99892e?ts=638338340141222402" alt="Thumbs up icon"></div>
</div>

 

Now, it's easy to apply the same branding to multiple courses and catalogs. If you ever need to make changes to your branding, it is quick and easy to replace colors and content styled in the CSS.
Every change made to that file will affect all the pieces to which that file is applied.

 

Disclaimer: Learn365 isn't responsible for coding for clients. Please use this guide as a tutorial for applying your own coding. Learn365 is also not responsible for any incorrect coding efforts.