OK - I seem to be missing something.
I have entered some custom CSS under the Branding, Look, and Feel area in both the 7.0 and the 6.9 areas.
If I use an HTML Widget for a custom page - the custom CSS works fine.
However, if I try to use the same custom CSS to style something in an HTML Page as training material for a course - it is ignored.
I have also tried doing some style tags but those get stripped out.
I seem to remember a place where I could put some CSS for courses but I cannot seem to find it again.
It appears I can do some things by placing some styles inline like such but I’d rather access something pre-defined.
<p style="color: #ff0000;">Red</p>
Is there a way to style course HTML pages with custom CSS?
Best answer by gstagerView original
@gstager that's right...unfortunately the HTML widget and other parts of the LMS where a’coding’ option is available don’t all work the same way...(ex: Privacy policies and T&C)...sometimes the code works and sometimes it is ignored. The HTML widget is pretty rudimentary and works mostly with the WYSIWYG options...you might try and iFrame if you have a server structure to support that.
Custom CSS for HTML Training Material is handled separately from custom styles in the rest of the platform to give you greater flexibility in your design options.
I assume that you’ve been adding your current styles to the Custom Styles section of Configure Branding & Look.
CSS for the HTML Training Material can be found in the Course Player section of Configure Branding & Look. Any CSS added here will be automatically applied to your HTML Training Materials. You can learn more in the Customizing the Course Player section of this knowledge article.
However, when I add some CSS to that area and then try to use it in the HTML Training Material, it seems to be ignored.
The only CSS that I can get to work is inline CSS.
I believe I have discovered the problem… or perhaps part of it.
I was expecting to see changes within my editor when toggling between code view and design view.
Instead - I have to fully publish and then view as a learner.
I had been avoiding that because, while it is easy to click “Preview as Learner” - it takes a full seven clicks to get me back to code view where I can edit again.
Using inline styles is more work but at least I can view as I code without the hassle of getting back to code view.
I was using real simple stuff to test with.
I used a class, an ID, and inline CSS.
It would be nice if the editor was a bit more like the end result - but at least I can see that the styling works with inline CSS.
The full publish and view as a learner looks better.
But you can see that font size and style don’t match.
I will try working with some more complicated CSS now and have a separate user open in another browser on a different monitor so I can refresh and improve efficiency.