Skip to main content
Best Answer

Trying the profile widget

dklinger
Hero III
Forum|alt.badge.img+13

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:

 

View original

      14 replies

      sigamoline
      Novice III
      Forum|alt.badge.img+1

      Here is what works for me:

      .profile {

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

       

        gstager
        Hero III
        Forum|alt.badge.img+9
        • 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
          Novice II
          Forum|alt.badge.img

          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
            Hero III
            Forum|alt.badge.img+13
            • 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
            Novice III
            Forum|alt.badge.img+1
            • sigamoline
            • Novice III
            • 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:

             

              gstager
              Hero III
              Forum|alt.badge.img+9
              • gstager
              • Hero III
              • June 15, 2022

              @sigamoline 

              Nice use of  ::before  and  ::after

              👍🏻

              Greg
                sigamoline
                Novice III
                Forum|alt.badge.img+1

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

                  Yawl are awesome. This so made my day.

                    Novice I

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

                    Novice II
                    Forum|alt.badge.img
                    • 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+13
                    • 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+13
                    • 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

                      Novice I

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

                      Novice III
                      Forum|alt.badge.img

                      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 & ConditionsAccessibility statement