Skip to main content

Hi. I’m trying to apply some fairly extensive CSS to an HTML widget, and it’s quite tedious….saving the CSS changes, clicking “confirm”, going over to my widget desktop view in a separate window, reloading the page, clicking on “desktop preview” again.

Is there an easier way? Anything close to a real-time experience?

Thanks.

If you can work with two monitors if possible then you can simply refresh your changes with your one browser window over and over again - so you can check your “live state” a little easier and you can just keep applying your edits on your other monitor.

So you will still be round tripping, but your second monitor makes the round trip feel a little better.


I second @dklinger’s suggestion to use a separate monitor. If that's not possible, at least use an incognito window for quick testing on changes. This prevents super admin cross-contamination with authentication, menu visibility, and page access. Menu and page assignments could affect whether you see your CSS changes. Coming in as a potential user that you’re looking to target with edits will help make the testing more true to life.

The incognito window can serve as your live “learner” or user preview.

After saving any CSS changes, simply refresh the page. The changes will be almost instant for the “learner” user once saved in Branding Look and Feel by your other Super admin user.


Some changes you can make directly in the browser’s “inspect” or “developer tools” mode.  It’s a bit more complicated than I can explain here, but here is an overview video:  

 

Once you’re happy with how the change looks “live”, then you would make the corresponding change in Docebo’s “custom styles” area (under “configure branding and look”).

 

Be prepared for things that worked in the browser to perhaps need tweaking when you add the CSS to the LMS.   The !important property will often help.

.myclass {

  background-color: gray !important;

}


Reply