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.
Best answer by John
I second
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.
+11If 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.
+3I second
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.
+7Some 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;
}
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.