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. Select it and put checks in the hover and focus states, so we can apply styling to them as well.
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) that is located in the top right of any design state to access the CSS. Initially, when clicked it will show the CSS for that state only.
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.
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.
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:
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.
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.
Want to see the completed example? Download it now in the Trivantis Community.
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.