How to Customize your Profile Page Using CSS Snippets

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 the Edit button

/*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;
}

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;
}