Skip to main content
Answer

Trying the profile widget

  • June 14, 2022
  • 14 replies
  • 594 views
dklinger
Hero III
Forum|alt.badge.img+11

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

Best answer by sigamoline

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:

 

    Bfarkas
    C
    A

    14 replies

    sigamoline
    Helper II
    Forum|alt.badge.img+1
    • sigamoline
    • Helper II
    • June 15, 2022

    Here is what works for me:

    .profile {

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

     

    dklinger
    Bfarkas
    gstager
    Hero III
    Forum|alt.badge.img+8
    • gstager
    • Hero III
    • June 15, 2022

    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
    dklinger
    Bfarkas
    D
    Novice III
    Forum|alt.badge.img
    • Dlibengood
    • Novice III
    • June 15, 2022

    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
    dklinger
    Hero III
    Forum|alt.badge.img+11
    • dklinger
    • Author
    • Hero III
    • June 15, 2022

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

    sigamoline
    Helper II
    Forum|alt.badge.img+1
    • sigamoline
    • Helper II
    • Answer
    • June 15, 2022

    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:

     

    Annarose.Peterson
    Bfarkas
    gstager
    gstager
    Hero III
    Forum|alt.badge.img+8
    • gstager
    • Hero III
    • June 15, 2022

    @sigamoline 

    Nice use of  ::before  and  ::after

    👍🏻

    Greg
    Bfarkas
    sigamoline
    Helper II
    Forum|alt.badge.img+1
    • sigamoline
    • Helper II
    • June 16, 2022

    @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.

    R
    Isram
    dklinger
    Hero III
    Forum|alt.badge.img+11
    • dklinger
    • Author
    • Hero III
    • June 17, 2022

    Yawl are awesome. This so made my day.

    sigamoline
    Bfarkas
    L
    Novice I
    • Loconnorrmc
    • Novice I
    • June 30, 2022

    @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
    Novice II
    • KC_SS
    • Novice II
    • July 1, 2022

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

    dklinger
    Hero III
    Forum|alt.badge.img+11
    • dklinger
    • Author
    • Hero III
    • July 1, 2022

    @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
    Hero III
    Forum|alt.badge.img+11
    • dklinger
    • Author
    • Hero III
    • July 1, 2022

    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

    Bfarkas
    K
    L
    Novice I
    • Loconnorrmc
    • Novice I
    • July 1, 2022

    @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!

    A
    Novice III
    Forum|alt.badge.img
    • amwilliams
    • Novice III
    • January 31, 2024

    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

    Terms & ConditionsCookie settingsAccessibility statement