Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

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:


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

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.