Custom CSS and Branding

Q: How can I brand my courses?

See our guide on themes.

 

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

See our guide on themes.

 

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

 ;}
 
Q: Can I create horizontal rules?
You can create a horizontal rule <hr /> by placing 3 or more hyphens, asterisks, or underscores on a single line. You can also place spaces between them.
 
Q: Can I create paragraphs?
Placing an empty line in between other content will wrap the sections before and after in paragraph <p></p> tags.
 
Q: How do I do line breaks?
To force a line return, place two empty spaces at the end of a line
 
Q: How can I put in blockquotes?
To enclose a segment of text in blockquotes, one must prefix each written line with a greater-than sign.