Please can someone help me with css and javascript

jankelly

Hi, I'm working in Lectora 16 and have built a certificate with an entry field for the user to enter their name; the course is for web hosting. The entry box is functioning, but the formatting isn't appearing. I want the text to center, and the font to change.

I used the How to Style Entry Fields in Lectora using CSS as a guide, but I'm obviously missing something. CSS code:

.entry1 {

display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 10px 20px;
border: 1px solid #b7b7b7;
-webkit-border-radius: 3px;
border-radius: 3px;
font: normal normal bold 22px/normal "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: rgba(0,142,198,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: rgba(252,252,252,1);
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.entry1:hover {
}

.entry1:focus {
}

Thanks!

ssneg

The code surely works (see this: https://jsfiddle.net/j4rujsyb/) so I guess you missed something in Lectora. Like did you add the "entry1" class to the textfield?

jankelly

Thanks, Serge. I'll look at this tomorrow, as I'm in the UK :-)

 

jankelly

Hi Serge,

I've checked the settings and all looks well to me. I have attached some screen shots that show the detail.

Also, I want to add an expiry date to the certificate that is generated by javascript (which I have working, but not in the course), I have attached the code. I have tried to get it working in a variety of ways, but can't get it to display. What is the best way to insert it?

Thanks again for your help

Jan

ssneg

I re-created your setup from the screenshots and it works fine (see attached). Share your actual title and I'll take a look at what might have gone wrong.

jankelly

Sergey, can you please send me an email address that I can use to share the content from dropbox.

Thanks

Jan

ssneg

[email protected]

jankelly

Thanks, Sergey

I sent you a message that doesn't appear to have been posted for some reason, and a link to Dropbox - I'll resend.

Please let me know if it doesn't arrive as I sent it at 9.10 pm last night, and again at abou.

I made some progress as when I compared your file to mine, I realized I had been inserting the wrong Entry ID code,  so I now get the correct font and font size, however, I can't get the box to expand, or the static box to center the input box.

I also still cannot get the javascript to work to show the Expiry Date.

I really appreciate your help.

Thanks

Jan

ssneg

I looked at the project and I found the problem. It is related to how you set up the inheritance. The "Certificate" chapter inherits NO objects from title level, including your CSS style sheet. Furthermore, the "Certificate" page inherits no objects from its parent (from the chapter). So you made sure TWICE that the CSS you created does not get into your certiciate....

Solution:
1. Change Certificate chapter to "Inherit specific objects", move all objects except the CSS file into the right column ("excluded").
2. Also change the Certificate page to include ALL objects from parents.

See screenshot.

jankelly

Sergey,

You are a star! Thank you so much, and there was me thinking I had inheritance sorted!! The only outstanding issue is the text isn't centering - see attached screenshot.

Thanks for the time you've spent reviewing this, and more so for explaining the solution to me.

Best wishes

Jan

 
<div id="homeBody" class="homeBody"></div>

ssneg

Centers on my machine alright (in Chrome).

jankelly

Thanks, Sergey

I've tried it with Chrome, Edge and IE - all the same! I'll publish it to ReviewLink and see what happens.

Thanks again for your help, it's very much appreciated.

Jan