You can make some alterations to your Profile page (/profile) using our CSS snippets. A CSS snippet is a small section of text or source code that can be inserted into the code of a program or Web page. Snippets provide an easy way to implement commonly used code or functions into a more extensive code section.
If you would like to learn more about CSS selectors and Custom Coding, here are a few things that you can check:
- Take some time to understand CSS selectors.
- You can also check our custom code article, a detailed explanation of our custom code editor.
In order to perform such changes in the Profile page of your school:
All the relevant snippets should be added to the Custom code editor of your school. Go to Website → Design → Edit website → Site → Site custom code.
Copy from this article the snippet code that fits your goal, paste it in the <style> (css) for built in pages (i.e social, profile, workpad, my account) field, and click on Update.
Hiding elements
Hide the number of courses alongside the icon
/*hide number of courses alongside with the icon*/
.-prof-basic-info.-courses-info {
display:none;
}
Hide the number of hours alongside the icon
/*hide number of hours alongside with the icon*/
.-prof-basic-info.-hours-info {
display:none;
}
Hide the number of posts alongside the icon
/*hide number of posts alongside with the icon*/
.-prof-basic-info.-posts-info {
display:none;
}
Hide the number of achievements
/*hide number of achievements*/
.-prof-basic-info.-achievements-info {
display:none;
}
/*hide edit button*/
.slug-profile #actions {
display:none;
}
Hide the staff tag
/*hide the staff tag*/
.slug-profile #profFrame .stuff-tag {
display:none;
}
Hide the achievements section
/*hide achievements*/
.slug-profile #badges {
display:none!important;
}
Hide the courses section
/*hide courses*/
.slug-profile #coursesTaken {
display:none!important;
}
Hide the network section
/*hide network*/
.slug-profile #friends {
display:none;
}
If you hide all three courses network section remove the height as well
/*remove min height if courses, network, achievement were also hidden*/
.slug-profile #profileWrapper {
min-height:0px;
}
Hide the top row (About and Activity row - this can be used to hide the Activity tab)
/*hide the top row, so as to hide activity*/
.slug-profile #tabsWrapper {
display:none;
}
Hide the progress bar from course cards (both the bar and the percentage)
.slug-profile .box-course-progress-wrapper {
display:none;
}Hide the progress bar only
.slug-profile .box-course-progress-bar {
display: none;
}Hide the percentage only
.slug-profile .box-course-progress-perc.learnworlds-main-text-small {
display: none;
}Hide the progress bar from the Profile page course cards
.box-course-progress-wrapper {
display:none;
}Hide the footer from the profile page
.slug-profile .lw-footer {
display: none;
}Changing the colors of elements (alter the background color hex code to your desired color)
/*change thetifyelement="669*/
.slug-profile #profFrame {
background-color:#4CF6FF;
}
/*change edit button color*/
.slug-profile #profFrame .profBut {
background-color:#4CF6FF;
}
/*change staff tag color*/
.slug-profile #profFrame .stuff-tag {
background-color:#455FFF;
}
/*change tabs row color*/
.slug-profile #tabsWrapper {
background-color:#5678FF;
}
/*change selected tab’s color on tabs row*/
.slug-profile .profile-tab-wrapper-selected, .slug-profile .profile-tab-wrapper:hover {
background-color:#5678FF;
}
.slug-profile .profile-tab-wrapper-selected::after {
border-top-color:#5678FF;
}Make the Email and Username input in the Profile page uneditable
.slug-profile input[data-key="email"], .slug-profile input[data-key="username"] {
pointer-events: none;
}