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 add a phone number to my lesson that can be called directly from the users device?

Yes, use the code below 

"<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>"

You will need to enter the telephone number into the section that has “tel://_____” then the text after the “>” where the number is repeated can be changed to whatever you like, e.g. “call this number” and it will have the link of the telephone number underneath it. The “1” in this example is the country code, so please ensure you add the relevant country 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.

 

Q: Can I add an external URL to my lesson that can be opened in another tab when using desktop?

Yes, you can use the code below:

<a target="_blank" href= "https://www.edapp.com">Click Here</a>

You will just need to replace the URL with your desired URL and the URL cover text if necessary.

 

Q: How do I change the colour of the progress bar at the top of the slide?

Use the following code in css box and change the colour code (F84856) to the relevant code.

 

slide-slider .slider-bar, .slide-slider-survey .slider-bar {background: #F84856

 ;}