Narrative Field Widget - how to bold select words and add background color to fill-in sections. Smooth Signature Widget - move signature line down wit

1. You may change the background color injecting this code to the widget: 

input.textbox {

    background-color: #FFFFCC;

}

Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

2. I see on the chat conversation you confirmed that the text was changed to bold in preview, as my colleague informed, the change will not be visible in the builder only in preview. 

It seems to have worked as well, here is what I can see on my end: 

I can see your form has my colleague's code too. 

3. Unfortunately, due to the method how the signature widget works, it's not possible to change the position of the line in the signature, basically since the element is an image. 

Good Morning Kevin!

1. Thanks for the code to highlight the fill-ins. Works perfectly!

2. Notice on screen shots you have here, that 'Term:' is not positioned right. It is shifted to the right slightly. The space between the ':' and 'The' is gone. In fact. the 'T' in 'The' is partially hidden.

Same with 'Insurance:'. The word 'Lessee' is partially cut off. 

I didn't notice this until after I got off the chat with Mike. I worked like a dog to try to fix it and no luck. 

Lastly, if possible, I would like the Narrative Widgets to be aligned on the right with the Text Properties. 

Thanks again Kevin!

I would recommend you to check the widget's text and make sure the text has the desired space there (space between words or letters).

Then go to the designer section and under the CSS tab find and delete  the following code:  

#cid_73:before {

    content : "Insurance:";

    position : absolute;

    font-weight : bold 

!important;

    font-size : 17px 

!Important;

    left : 60px;

    background : white !important;

}

#cid_82:before {

    content : "Term:";

    position : absolute;

    font-weight : bold 

!important;

    font-size : 17px 

!Important;

    left : 55px;

    background : white !important;

}

Once you have done this see how the text is displayed in preview and see the spacing between words is correct. When you have confirmed this, please inject this code, it should resolve the issues you mentioned: 

#cid_82:before {

    content : "Term:";

    position : absolute;

    font-weight : bold 

!important;

    font-size : 15.5px 

!Important;

    left : 54px;

    background : white !important;

}

#cid_73:before {

    content : "Insurance:";

    position : absolute;

    font-weight : bold 

!important;

    font-size : 15.5px 

!Important;

    left : 60px;

    background : white !important;

}

li#id_82, li#id_73 {

    margin-left: 2px;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Result: https://form.jotform.com/81706975416970

I hope this helps. 

FOLLOW UP:

David helped me find a solution to this issue. 

Add the following HTML code within the widget. Go to Narrative Widget / General and add:

11. <b><h style="color:#2e6da4">Insurance: </b><h>Lessee certifies that they have, or procured, all proper insurance protections required to rent and utilize this type of equipment. {Text Box C:15 Lessee Initials Here}.

Here's the results:

Thank you David!

FYI...

The yellow background on 'Lessee Initials Here' is done using the following CSS within the Widget.

/*Lessee Initials Here*/

input.textbox {

background-color: #FFFFCC;

font-style: arial;

font-size: 12pt;

}