Best Answer

Trying the profile widget

dklinger
Rank
Userlevel 7
Badge +6

Anyone catch the CSS needed to adjust the color of the profile widget?

icon

Best answer by sigamoline 15 June 2022, 16:57

View original

13 replies

sigamoline
Rank
Userlevel 4

Here is what works for me:

.profile {

background-size: cover; background-color: blue; background-position: center center; }

 

gstager
Rank
Userlevel 7
Badge +5

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.

 

Greg
D
Rank

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

dklinger
Rank
Userlevel 7
Badge +6

@sigamoline and @Dlibengood - thank you! Siga - you did something neat with yours how did you customize that message????

sigamoline
Rank
Userlevel 4

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:

 

gstager
Rank
Userlevel 7
Badge +5

@sigamoline 

Nice use of  ::before  and  ::after

👍🏻

Greg
sigamoline
Rank
Userlevel 4

@gstager Thanks! Someone showed me that trick around 5 or 6 years ago. I am so happy we have this platform for everyone to share what they have learned.

dklinger
Rank
Userlevel 7
Badge +6

Yawl are awesome. This so made my day.

L
Rank

@sigamoline 

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?

K
Rank

I’m very new to CSS. where do I put this code?? 

dklinger
Rank
Userlevel 7
Badge +6

@sigamoline

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?

@Loconnorrmc - Hey - you probably can figure out a hack - but the Profile widget was meant for the profile. I think you definitely can get clever with CSS and exploit it for this. For example you can take widget make it a single row and start off with your welcome.

For the server component - reach out to the Docebo service desk…there may be many reasons for that not working.

dklinger
Rank
Userlevel 7
Badge +6

I’m very new to CSS. where do I put this code?? 

@KC_SS - Start here: https://www.docebo.com/knowledge-base/activate-manage-themes/#post-simple-toc-heading-5

L
Rank

@sigamoline

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?

@Loconnorrmc- Hey - you probably can figure out a hack - but the Profile widget was meant for the profile. I think you definitely can get clever with CSS and exploit it for this. For example you can take widget make it a single row and start off with your welcome.

For the server component - reach out to the Docebo service desk…there may be many reasons for that not working.

@dklinger Thanks.  I have the name working - I just needed to activate the first name last name in the advanced settings - so that is solved and looks great. Certainly will reach out to support about the image - and a way to use one from our server.  Appreciate the note!

Reply


Terms & ConditionsCookie settings