We have enabled custom css for user profiles. Go to settings-> profile->design and you will see a CSS empty box. You have free reign to do as you please in the box. Keep in mind, no HTML or SCRIPT will work, it is all placed inside an empty <style> container.
Here are some cool things you can do:
Color the main header banner green:
.main-header{ background:green !important;}
Make font larger on entire page:
.main-wrapper {font-size: 16px;}Show/hide the chat sidebar:
.chat-sidebar{display: none;}Move profile tabs box to right and vertical:
.profile-tabs-wrapper ul li {
display: block !important;
}
.profile-tabs-wrapper {
right: -215px;left: unset;
}Make profile name flash
.profile-name-wrapper a {
animation: pulsate 2.11s ease-in-out infinite alternate;
color: #0fa;}
@keyframes pulsate {
100% {
/* Larger blur radius */
text-shadow:
0 0 4px #fff,
0 0 11px #fff,
0 0 19px #fff,
0 0 40px #0fa,
0 0 80px #0fa,
0 0 90px #0fa,
0 0 100px #0fa,
0 0 150px #0fa;
}
0% {
/* Smaller blur radius */
text-shadow:
0 0 2px #fff,
0 0 4px #fff,
0 0 6px #fff,
0 0 10px #0fa,
0 0 45px #0fa,
0 0 55px #0fa,
0 0 70px #0fa,
0 0 80px #0fa;
}
}.profile-tabs-wrapper ul li a.active{
animation: pulsate 2.11s ease-in-out infinite alternate;
color: #0fa;
}Hover effect on card sections
.card{text-transform: lowercase; opacity: 70%;}
.card:hover{opacity: 100%;
border: 0.2rem solid #0fa;
border-radius: 2rem;
padding: 0.4em;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #fff,
0 0 0.8rem #0fa,
0 0 2.8rem #0fa,
inset 0 0 1.3rem #0fa;}
Switch the order of the layout of cards:
.order-lg-3 { order: 1;}
.col-lg-3 { max-width: 50%;}
.order-lg-2 {max-width: 100%;}
If you find more things to do with your profile, be sure to post about it and get people to check your profile out!
