Add a Touch of Style to Lectora

Most web developers use CSS to specify how they want each web page element to look on their web site. They can control things like text color, font, margins, and all sorts of other attributes of elements. For example they may want all paragraphs to have a 10 pixel margin. This is done using CSS.

Hyperlinks by default are underlined and blue. While this is a standard and is universally recognized, there are times in which blue underline does not look appropriate in your project. Using CSS you can change this. If you are familiar with CSS you'll know to include a style sheet in your web page or use the <style> element in the header of your page. So how do you do this in your e-learning using Lectora?

Let's take a look.

Prerequisites

• Ability to use Lectora to add images and create hyperlinks

To do this, you need to understand the power behind the external HTML object in Lectora. This object allows you to do many, many things if you know HTML, CSS, and JavaScript. You use this object to add HTML such as an embedded video or other object (links to my google calendar), and yes, you use it to add style to your project.

I've set up a page with a top navigation bar that contains three links to the home page, the help page, and to exit the project. After adding the hyperlinks, I removed the underline and changed the text color to white. Now you are ready to add the CSS to show an underline when the user hovers over the links.


1. Add an External HTML object to the page.

2. Give it an object type of Meta tags. This will place the CSS code in the header of the underlying HTML page.


3. Add the following CSS code in the Custom HTML field:

<style type="text/css">

a:hover {
  text-decoration: underline;
  color: white;
}

</style>

That's it. Now when you preview the project in HTML, you'll see the underlines appear when you hover over the hyperlinks.


You may find yourself wanting to do something more advanced on the hover event. For example, you may want to show a pop-up message. This is possible in Lectora using JavaScript. I'll save that topic for another day.