Custom CSS and Branding

Q: How can I brand my courses?

Click on the course you'd like to brand, then click on the "Branding" tab. Here you can upload your logo, a thumbnail, cover image and background image, as well as choose a color scheme and enter custom CSS.

 

Q: How can I brand my lessons?

Click on the lesson you'd like to brand, then the "Branding" tab. Uncheck "Use Course Branding" and you will be able to brand that individual lesson using a unique background image, logo and/or color scheme.

 

Q: Can I customise CSS? If so, how?

Yes. In the "Branding" tab on the course or lesson level, you can customize CSS in the "Custom CSS Rules" field.

 

Q: Can I link to an external hyperlink in my lesson? 

Yes. You can add the following HTML:

 <a href=“url”>link text</a>

 

Q: Can I change the colour of one word in my lesson? 

Yes. You can add the following HTML:

<span style="color:#000;"> Hello! </span>

Just replace the "#000" with any hex code.

 

Q: Can I change the colour of all the text in my lesson?

Yes. In the Custom CSS Rules field use the following code:

#slides {color: #000;}

Just replace the "#000" with any hex code. This affects text color in places where text color is not otherwise defined (such as captions in the Image Slider template).

 

Q: Can I change the font of all the text in my lesson?

Yes. Though other fonts are not hosted in EdApp, you can insert an import link in the Custom CSS Rules field and then define it for the text. We recommend using Google Fonts or Adobe Fonts if you have an account. For example:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap');

body {

font-family: "Roboto", sans-serif;

}

 

Q: Can I change the colour of the buttons in my lesson?

There are two main buttons in EdApp: the "muted" button and the "solid" button. You can change these in the Custom CSS Rules field in the Branding tab. You can use this as an example:

.btn.btn-muted{

  color: white;

  background-color: #000; }

 

.btn.btn-solid {

  color: white;

  background-color: #000; }

The colors "white" and "#000" can be replaced with any hex code.

 

Q: Can I enable specific CSS to apply across all my courses?

Yes, you can do this on the "content" tab of "app settings" by setting up Global CSS.