Menu

How to style the course content / player

Hello,

 

I would like to know, if there is any option to style my course content itself. I know I can choose between a black and a white course player and change the formattting but I mean like to add padding, intergrate google fonts etc.

I know I can use inline css but I want to do some global changes in an easy way to fit the course player to my corporate design and make it look better.

 

Is there a way to get this done or are there any themes, resources or suggestions?

 

Thank you, Christopher

 



Hi Christophe!


There are some customizations that can be made by clicking on the cog icon on your Courses page:



You can also add some custom CSS for your course player under Advanced Settings > Site Footer Code.


Happy to help if you have any further questions at all.


Thanks!

Catherine

Ah! Thank you Catherine. The Advanced Settings is what I was searching for! 


All CSS I add in th Site Footer Code, do they only affect the course player or landing pages etc. as well?


Thanks. Christopher

It affects both the site pages and the course player.  To keep my customizations from affecting the site pages, I am naming my styles and using them by name in the course player.  For example, in the Site Footer Code I put:


<style>

 a.course-button {

  border-radius: 100px;

  font-family: 'Roboto', Sans-Serif;

  font-size: 1em;

  font-weight: 500;

  line-height: normal;

  text-align: center;

  text-decoration: none;

  border: 2px solid #f5a623;

  background-color: #f5a623;

  color: #000;

  padding: 4px 12px 4px 12px;

  cursor: pointer;

 }

</style>


And then in the course player HTML I added class="course-button" to some of my <a> tags:


<p style="text-align: center;"><span style="font-size: 24px;"><a class="course-button" href="{your link here}" rel="noopener noreferrer" target="_blank">Take the Quiz!</a></span></p>


I tried using the classes from the site pages on the course player pages (i.e., class="button button-primary"), but it doesn't work.