Platform owners can use Custom CSS to customize the look and feel of their platform on the web app. To enable this optional setting, contact your Account Manager.
This feature is not part of the Customization 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.
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 children groups, until it reaches a group with its own custom CSS or HTML settings.
- In the left sidebar of the homepage, click on the platform group.
- In the top right corner, clickÂ
 Settings.
- In the left sidebar, click Branding.
- In the field Group’s Custom CSS, add, edit, or delete CSS code.
- In the field Group’s Custom HTML, add, edit, or delete HTML code.
- Click outside the field to save.
- 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 simple changes will look something like this.
element {
property: value;
}
Other resources:
General recommendations
- Test the code on your test environment.
- Copy-paste the code in your prod environment.
- Save a copy of the code in a separate file.
Code snippets
In this section, you'll find code snippets to:
- Change the buttons.
- 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 buttons
This code changes the button color.
button.button-regular.high-impact {
background: #692193!important;
}
This code changes both the color and font.
button.button-regular.high-impact {
background: #692193!important;
font-family: Helvetica, sans-serif
}
Change the left navigation panel
This code changes the color of the various 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: none;
}
[lang=fr] .widget_fr {
display: block;
}
[lang=en] .widget_en {
display: block;
}
.test-widget {
background-color: #EEE;
padding: 20px;
width:200px;
margin: auto;
text-align: center;
}
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
<div class="test-widget">
<div class="widget_role widget_learner">Learner</div>
<div class="widget_role widget_admin">Admin</div>
<div class="widget_role widget_owner">Owner</div>
</div>
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 thewidget_learner
element. - A user with the
admin
role will see the content in thewidget_admin
element. - A user with the
owner
role will see the content in thewidget_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 home page, all group pages, and user profiles, use the following CSS code:
#workspace-right-panel:has(.feed-list) {
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;
}