Customize platform appearance with custom CSS

Platform owners can use Custom CSS to customize the look and feel of their platform on the web app. These customizations apply to the platform interface as well as the login page.

To enable this optional setting, contact your Account Manager.

This feature is not part of the Extended Academies solution.

⚠️ 360Learning does not set up, maintain, or provide support for custom code.

Before enabling Custom CSS, we recommend:

• Evaluating a testing and update process before enabling Custom CSS.
• Hiring a developer if you plan to make substantial CSS changes to your platform.

If you determine Custom CSS is the right fit for you, platform owners should be prepared to:

• Test the custom code with each release, which occurs every 3 weeks.
• Manage, troubleshoot, and support any custom code issues.

Understand the coexistence with the HTML widget

The new HTML widget works alongside any existing custom HTML you've set up using the advanced Custom HTML/CSS option.

• Your current custom HTML blocks will stay exactly where they are (at the top of the page) when the new widget rolls out.
• Your existing blocks will continue to work. Move their content into the HTML widget whenever you're ready.

Add, delete, or edit custom CSS

Admins can add CSS or HTML customization at the group level. It then applies to the group and propagates to all subgroups, until it reaches a group with its own custom CSS or HTML settings.

1. In the left sidebar, hover over the platform group (the one with a golden crown), then click Settings.
   • If Settings doesn’t appear in your sidebar, click on the platform group first, then click Settings in the top right of the main section.
2. In the left sidebar, click Branding.
3. In the field Group’s Custom CSS, add, edit, or delete CSS code.
4. In the field Group’s Custom HTML, add, edit, or delete HTML code.
5. Click outside the field to save.
6. Refresh your browser to view changes.

Example CSS

To update the platform CSS, you need to know the element and property that you want to edit.

• Element: .collapsing-panel
• Property: background

Most changes will look something like this.

element {
  property: value;
}

Other resources:

• HTML Color Codes
• W3Schools: CSS Reference

General recommendations

1. Test the code on your test environment.
2. Copy-paste the code in your prod environment.
3. Save a copy of the code in a separate file.

Inline z-index styles are not permitted for security reasons. They are automatically removed when content is displayed, but remain unchanged in the original stored user input.

Code snippets

In this section, you'll find code snippets to:

• Change the font.
• Change the left navigation panel.
• Display custom HTML and CSS based on the user's language.
• Display custom HTML and CSS based on the user's role.
• Hide the newsfeed panel.

Change the font

This code changes the platform font.

body {
  font-family: 'Your Font', sans-serif !important;
}

Change the left navigation panel

This code changes the color of the elements in the navigation panel.

.group-list {
    background: #3B2F87!important;
}

.collapsing-panel {
    background: #3B2F87!important;
}

.section.top.is-selected {
    background-color: #EBE9FA!important;
}

Display custom HTML and CSS based on the user's language

This code sets up an HTML block and associated CSS to display specific content at the top of a group page based on the user's language.

HTML

<div class="test-widget"> 
    <div class="widget_lang widget_fr">French</div> 
    <div class="widget_lang widget_en">English</div>
</div>

CSS

.widget\_lang  
    display  
  
  
\[lang=fr\].widget\_fr  
    display  
  
  
\[lang=en\].widget\_en  
    display  
  
  
.test-widget  
 background-color#EEE  
 padding20px  
 width200px  
 margin  
 text-align  

In the example above:

• A user with the platform language set to French will see the content in the widget-fr element.
• A user with the platform language set to English will see the content in the widget-en element.
• The .test-widget class applies some basic styling to the container to ensure it's visually distinct and centered on the page.

Display custom HTML and CSS based on the user's role

This code sets up an HTML block and associated CSS to display specific content at the top of a group page based on the user's highest role.

HTML

CSS

.widget_role { 
    display: none; 
} 

[role-user=learner] .widget_learner { 
    display: block; 
} 

[role-user=admin] .widget_admin { 
    display: block; 
} 

[role-user=owner] .widget_owner { 
    display: block; 
} 

.test-widget { 
    background-color: #EEE; 
    padding: 20px; 
    width:200px; 
    margin: auto; 
    text-align: center; 
}

In the example above:

• A user with the learner role will see the content in the widget_learner element.
• A user with the admin role will see the content in the widget_admin element.
• A user with the owner role will see the content in the widget_owner element.
• The .test-widget class applies some basic styling to the container to ensure it's visually distinct and centered on the page.

Hide the newsfeed panel

Hide the newsfeed everywhere on the platform

To hide the newsfeed panel on the homepage, all group pages, and user profiles, use the following CSS code:

#workspace-right-panel {
  display: none;
}

Hide the newsfeed on a specific group page

To hide the newsfeed panel on a specific group page, use the following CSS code. Make sure to replace <GROUP_ID> with the actual ID of the group where you want to hide the newsfeed:

#workspace-right-panel[data-group-id='<GROUP_ID>'] {
  display: none;
}