Best Answer

Using Custom CSS to edit the look and feel of the HTML Page Training Material

  • 5 January 2022
  • 6 replies
  • 1422 views

Userlevel 7
Badge +5

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?

icon

Best answer by gstager 24 January 2022, 18:34

View original

6 replies

Userlevel 7
Badge +7

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.

Userlevel 7
Badge +3

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.

 

Customize CSS for HTML Training Material via the Course Player section of Configure Branding & Look ​​​

 

Userlevel 7
Badge +5

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

Userlevel 6
Badge +1

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

Userlevel 7
Badge +5

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

Simple CSS Added

 

Code Editor View - Admin Mode

 

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.

WYSIWYG View

 

The full publish and view as a learner looks better.

Full Publish and Learner View

 

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.

 

Userlevel 6
Badge +1

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

Reply