Styling can really make a project stand out. But new developers might not realize how unlimited their styling options really are. Take, for instance the Entry Field. Lectora® does not provide a style menu for this object, so at first it seems we can only adjust its size and background color, but is that really all? The answer is a resounding “No.” As a web designer, one of the greatest strengths I see in Lectora is its extensibility. Not only does it natively provide what might seem like an overwhelming amount of options for new eLearning authors, it leaves the door wide open for advanced users with the HTML Extension object. In the year or so since switching from another authoring tool, I have yet to come across a design or functionality issue in Lectora that couldn’t be solved with the addition of external HTML, JavaScript, Styling, or a combination thereof.
In this example I will show you how to take a generic entry field and make it pop with additional styling. Don’t worry if you’ve never written a cascading style sheet (CSS) before because we are going to use one of the many free online CSS generators to do the heavy lifting. Here are additional bonuses that come with using cascading style sheets. They are reusable. Save the sheet and save valuable time by adding it to any project.
I maintain a library of my style sheets. They make project-wide styling changes as simple as editing one line of text. If multiple objects are assigned a CSS rule, changing the rule will change all the assigned objects. No need to monotonously change each one at a time. There are plenty of other reasons to use style sheets, such as maintaining styling across multiple projects, leaner code, and faster loading times—but enough of the sell. Let’s get down to business.
First, we’re going to build the style sheet. Head over to Enjoy CSS (http://enjoycss.com/). Feel free to use whatever online CSS generator you like—this is one of my favorites. Once there you should choose “Input” as what you want to style.
While this article is not intended to explain how to use this site, I will go over a few important things you must do.
In the window that opens when you select input, there should be a settings option (with little gear icon) on the bottom left of the screen.
Click on the top rectangle to edit the “normal” state of the input box. Any changes you make using the expandable styling options menu on the right will immediately be reflected on the input shown. When you make changes to the hover state, hovering over the normal state will show you the hover state in action. The focus state is the “selected” state of the input box.
When you have the input box styled how you like, click the little blue icon (Enjoy CSS logo)
To see all the CSS, click CSS on the left side (above LESS and SCSS).
Copy all the text shown and paste it into a notepad or other text file.
If you didn’t alter them while generating the CSS, you’ll notice that the three styling rules are named .enjoy-css, .enjoy-css:hover and .enjoy-css:focus. For all three, change the enjoy-css to whatever “class” name you will want to use to assign to your entry fields in Lectora. In my example, I called them entry1, entry1:hover and entry1:focus respectively (class name highlighted in yellow).
Next, save the file with .css extension. To do this, select File > Save As and change the save extension to “all files”. Save the text file as any name you want with .css as the file extension.
That’s it! Now, we will use a simple line of JavaScript to assign the class to entry fields in Lectora.
Important! Because Lectora internally puts the entry field inside a div, you cannot use the appearance menu to assign the class name. It will assign it to the div, not the actual entry field and therefore will not work correctly.
Add an Entry Field to a Lectora project. Rename the entry field to reflect the HTML Name Lectora assigns it but add “id” (lowercase, no quotes). You can find the HTML name on the object Description.
So if Lectora assigns the entry field an HTML Name of entry39, the real name of the input would be entry39id. Next, add an HTML Extension object to the title level of the project and select type – Cascading style sheet then browse for and select the CSS file you just made.
You’re almost done.
Now you need to assign the class to the entry field. Remember, because the class that you can add via the appearance menu is for the div, not the actual entry field, we cannot use it. Instead, we will add the class via JavaScript. Add a “Run JavaScript” action to the “on show” of the page the entry field is on. Then add the following line of JavaScript (substituting your entry field name and class name from your style sheet):
document.getElementById("entry39id").className = "entry1";
This line of code selects the entry field and assigns it a class. In this example the entry field is entry39id and the class name I made in my style sheet is entry1. Note that you do not need to assign the hover and focus classes. That is part of the magic of CSS. They are considered pseudo classes of the initial class and will automatically be triggered on hover or focus.
If you wish to have initial text in the entry field (such as First Name), you can do so via this line of code:
document.getElementById("entry39id").value="First Name";
This line of code selects the entry field and assigns it an initial value of First Name. Change the line to reflect your entry field id and whatever initial text you wish.
That’s it. Preview your project and marvel at how it looks. Remember, you can add as many entry fields on any pages with this styling as you like—just copy the line of JavaScript and replace the entry field id as necessary. Save the Style sheet you made, and you can add it to any future project. Many elements can be styled with CSS—think of the possibilities! I hope this provided some inspiration for you to experiment with CSS.
Note: I have noticed that sometimes if you copy and paste directly from posts or articles, quotes do not copy correctly. Therefore, if you copy and paste from this, I suggest you delete any quotes from the pasted text and then add them back in.
About Darrel Somoza
In the corporate world I am the Assistant Director - Technology Based Training for the largest commuter railroad in North America. My side business is web design and application programming. Originally an Adobe Flash programmer, I shifted gears with the industry to fully embrace HTML5. eLearning modules are web applications/pages. Authoring tools, such as Trivantis Lectora Inspire, provide non-programmers a WYSIWYG interface to build engaging learning content. While some authoring applications are extremely closed and proprietary, Lectora leaves open the door for extending many of its capabilities by allowing for custom code insertion via the HTML extension. This is great news for eLearning developers because even if the program cannot perform a certain task natively, you usually can find a way to accomplish your goals. That is where I come in. My experience allows me to write eLearning material from scratch or via a rapid development tool and customize it as I need. Hopefully, I can use my skills to assist you in your eLearning authoring endeavors.
Website: www.elearningcode.com
