How to apply custom css code to change part of the label to italic?

  • Profile Image
    emediting
    Asked on July 31, 2017 at 05:10 AM
    I only know about html - so I am clueless about applying CCS codes.
    Please can you help - all I want is a very small change on: CONTACT US -
    PROOFREADING ENGLISH MANUSCRIPTS
    I want it to say: PHONE NUMBER _(OPTIONAL) ..............__- i.e
    __Optional in italics__ - _in html, I would write_ (OPTIONAL)_
    If you could insert the CCS code in the Form Designer box, I would then
    know what to do in the future - I can copy your code for the other forms
    and fields.
    Please be good enough to help me - thank you so much! I will be very
    grateful!
    Susan
  • Profile Image
    Chriistian
    Answered on July 31, 2017 at 11:38 AM

    You can set the "Optional" text to italic by adding the <i></i> tag on the label. However, for the tag to reflect on the label, please add it on the Question Text property of the field found in the property wizard as shown below.

     

    Do let us know if you need further assistance.

  • Profile Image
    emediting
    Answered on August 01, 2017 at 02:43 AM
    Dear Chriistian
    Thank you for your message. I have tried your suggestion 4 times to no
    avail. What am I doing wrong? I am going to the properties field and
    inserting the tag as you have described - but it does not show
    ...
  • Profile Image
    Chriistian
    Answered on August 01, 2017 at 04:17 AM

    Please remove the (Optional) text on the Question Text and inject this custom CSS below:

    label#label_6:after{

      content:"(Optional)";

      font-style: italic;

    }

    Result:

  • Profile Image
    emediting
    Answered on August 02, 2017 at 11:43 PM
    Dear Chriistian
    Thank you for your assistance! Fantastic! Well done! Sorted!
    I now know what to do with _italics_ - and I have had my first lesson in
    CCS codes!
    It's a shame that you cannot move the red * to the end of the line - but
    I guess that I'll have to live with that!
    Thank you once again - and have a good day!
    Susan
    ...
  • Profile Image
    ashwin_d
    Answered on August 03, 2017 at 03:16 AM

    Hello Susan,

    On behalf of my colleague, you are welcome. 

    On your second question, do you mean to say the you want to move "*" at the end of italic text? Please inject the following custom css code to move the "*" at the end of question "Proofreading English Manuscripts":

    #label_8 span.form-required {

        position: relative;

        left: -27px;

        top: 20px;

    }

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image
    emediting
    Answered on August 04, 2017 at 03:43 AM
    Dear Ashwin_D
    Thank you for your message. I have tried this custom ccs code on
    Proofreading English Manuscripts + Proofreading English + English
    Manuscript Editing - and it looks wierd on each website.........what
    have I done wrong?
    There is a space.........and the red star goes to the bottom of the text
    ...
  • Profile Image
    ashwin_d
    Answered on August 04, 2017 at 04:13 AM

    Hello Susan,

    In "Contact Us - Proofreading English" form, please remove the earlier css code and inject the following custom css code:

    #label_8 span.form-required {

        position: relative;

        left: 159px;

        top: 4px;

    }

    In "Contact Us - English Manuscript Editing" form, please remove the earlier css code and inject the following custom css code:

    #label_8 span.form-required {

        position: relative;

        left: -65px;

        top: 20px;

    }

    In form "Proofreading English Manuscripts", it appears correctly. Have you embedded your form in any webpage? Please share the webpage URLs where you have embedded your forms and we will take a look.

    We will wait for your response.

    Thank you!

  • Profile Image
    emediting
    Answered on August 04, 2017 at 04:43 AM
    Dear Ashwin_D
    Thank you for your message. I have tried this custom ccs code on
    Proofreading English Manuscripts + Proofreading English + English
    Manuscript Editing - and it looks wierd on each website.........what
    have I done wrong?
    There is a space.........and the red star goes to the bottom of the text
    ...
  • Profile Image
    liyam
    Answered on August 04, 2017 at 07:04 AM

    Hello emediting, 

    Can you confirm that you have done changes on the form after Ashwin's last response? It seems that you have responded exactly the same from your last one after the updated CSS code given.

    We'll look forward to your response.

    Thanks.

  • Profile Image
    IDOEWebmaster
    Answered on August 04, 2017 at 10:48 AM

    I have read and applied the instruct on how to inject CSS for italic part on the label text but it did not work on my form, please check it for me.

    Here is the form https://form.jotformpro.com/72125558715964 - I need for question number 4 to have this part "Although this was offered to align to the Lilly Grant process, please only include time spent on RSC and not grant writing" italic, I have delete this text from the label, but it did not work, then I added it back, itid not work either ways. Here is my inject CSS

     label#4If17:after{

     

      content:"Although this was offered to align to the Lilly Grant process, please only include time spent on RSC and not grant writing";

     

      font-style: italic;

    }

    Please help ASAP. Thanks so much.

  • Profile Image
    Chriistian
    Answered on August 04, 2017 at 12:03 PM

    Hi @IDOEWebmaster

    To better assist you, I have moved your concern on a separate thread. You can check the thread here: https://www.jotform.com/answers/1216102. We will attend to your concern on that thread accordingly.

  • Profile Image
    emediting
    Answered on August 04, 2017 at 10:43 PM
    THIS MESSAGE IS NOT FOR ME
    Susan
    ...
  • Profile Image
    emediting
    Answered on August 04, 2017 at 10:43 PM
    THIS MESSAGE IS NOT FOR ME
    Susan
    ...
  • Profile Image
    emediting
    Answered on August 04, 2017 at 11:43 PM
    Hello
    I will do that now. Your message arrived in my nighttime - I live on
    the opposite side of the world to you.
    Susan
    ...
  • Profile Image
    emediting
    Answered on August 04, 2017 at 11:43 PM
    Dear Ashwin_D
    Hello! We are getting there! Thank you ever so much!
    Proofreading English = OK
    (http://proofreading-english.yolasite.com/contact-us.php )
    English Proofreading = OK (even though it is all html)!!
    (http://english-proofreading.yolasite.com/contact-us.php )
    English Manuscript Editing = NO - still a problem
    (http://www.englishmanuscriptediting.com/contact-us.php )
    Proofreading English Manuscripts = NO - still a problem
    (http://proofreading-english-manuscripts.yolasite.com/contact-us.php )
    Thank you so much for your help!
    Susan
    ...
  • Profile Image
    liyam
    Answered on August 05, 2017 at 03:21 AM

    Can you try replacing your CSS code for label_8 and use this to your forms for English Manuscript Editing (http://www.englishmanuscriptediting.com/contact-us.php ) and Proofreading English Manuscripts (http://proofreading-english-manuscripts.yolasite.com/contact-us.php )?

    label#label_8:after{
       content:"English Manuscript Editing";
       font-style: italic;
       margin-left: -10px;
    }

    #label_8 span.form-required {
       position: relative;
       left: 190px;
    }

    This is how it should look like:

    Please let us know if you have additional questions.

  • Profile Image
    emediting
    Answered on August 06, 2017 at 12:43 AM
    Dear Liyam
    Sorted! Excellent! All are working fine now - thank you!
    I changed the px to left: 235px; on _Proofreading English Manuscripts_
    (http://proofreading-english-manuscripts.yolasite.com/contact-us.php ) =
    ok
    Please.........a big thank you to all at Jotform............it has taken
    a week..........but now........."Rocking n Rolling!"
    Thank you
    Susan
    ...
  • Profile Image
    liyam
    Answered on August 06, 2017 at 03:40 AM

    You are very much welcome, Susan. Thank you for keeping us posted. We also apologize that it took a while to completely fix the issue you have raised. We will do our best to make it better.

    In any case, should you have other concerns, please do not hesitate to let us know.

    Thanks and warm regards,
    -Liyam