Using Custom CSS to edit the look and feel of the HTML Page Training Material
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?
Page 1 / 1
HI @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.
Hey @gstager,
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.
@Adam Ballhaussen - Well that was the spot I had seen but had forgotten where it was, so thanks for that.
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.
@gstager can you share an example of what you’re trying to modify? Sometimes the LMS strips out certain styling due to security reasons or what it views as invalid syntax.
@gstager can you share an example of what you’re trying to modify? Sometimes the LMS strips out certain styling due to security reasons or what it views as invalid syntax.
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.
@gstager gotcha- yeah that’s a good callout. The changes aren’t fully reflected until you’re viewing them live. For what it’s worth, you should be able to just open a second tab of your same admin session with one in the CSS area and one in the course view and refresh as needed in order to see the changes. I don’t think you should have to log in with a separate user or browser.