Anyone catch the CSS needed to adjust the color of the profile widget?
Trying the profile widget
Here is what works for me:
.profile {
background-size: cover; background-color: blue; background-position: center center; }
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/7e2d15c3-114a-43b1-8e13-149f0f1c372f.png)
I guess if you’re wanting the widget to be a different color than the rest of your theme you’ll need CSS.
Otherwise, this will change it too. (along with some other things.
But you probably already knew that.
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/3822ec2c-afe4-43ad-aa7b-87f8156abda6.png)
Hi Dan
Here’s what I found
div.course-completed-ready.ng-star-inserted {
background-color:hide;
}
div.profile {
background-color: #ff5722;
}
You’ll need to change the hexi for the Background color
Dave
There a few customizations that I do. I add text and removed the “password” button since my users are all SSO.
I showed how to change the color. I am also going to show you an example here on how to put in an image as a background for you profile widget.
.profile {
background-size: cover; background-image: url("https://cdn5.dcbstatic.com/files/s/p/sprayingecs_docebosaas_com/userfiles/13499/spray410x200.png"); background-position: center center;
}
.fullName::before {
content: "Hello, ";
}
.fullName::after {
content: " - Welcome to SprayUniversity! ";
}
/* hide the password reset option */
myprofile-widget > div > div > div.widget-actions-container > widget-action-button:nth-child(1) > div {
display: none !important;
}
Example:
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/b9dd32ea-7c43-4166-a014-32fc195cb888.png)
I am just starting to build our Docebo platform - and already was trying to solve this - as someone with no CSS skills - thanks! One thing (actually 2) - I want to have Hello first name and last name with no other message. And I am trying to link to an image on our server but can’t make that work - hate to ask - but can you assist?
I’m very new to CSS. where do I put this code??
I am just starting to build our Docebo platform - and already was trying to solve this - as someone with no CSS skills - thanks! One thing (actually 2) - I want to have Hello first name and last name with no other message. And I am trying to link to an image on our server but can’t make that work - hate to ask - but can you assist?
For the server component - reach out to the Docebo service desk…there may be many reasons for that not working.
I’m very new to CSS. where do I put this code??
I am just starting to build our Docebo platform - and already was trying to solve this - as someone with no CSS skills - thanks! One thing (actually 2) - I want to have Hello first name and last name with no other message. And I am trying to link to an image on our server but can’t make that work - hate to ask - but can you assist?
For the server component - reach out to the Docebo service desk…there may be many reasons for that not working.
This fix was working for me, but just recently (since the beginning of the year maybe?) this code isn’t working and the background color is still on top. When I inspect the page, the CSS is there, but the background color is still “covering” it.
Halp
Reply
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.