How to display different background colors for the fields?

  • Profile Image
    EmilHome
    Asked on July 07, 2020 at 08:21 AM

    Hi 

    I'm using a multiple coice field to show customers order-windows related to the weekday they wish the delivery. for this filed I'd like to work with different colors for background, frame and fonts. 

    could you please send me th css code I'd need to add? also, how can I figure out the color-code to use in CSS based on RGB code? (Red-Yellow-Blue) 

    thanks! 

    bests, C 

  • Profile Image
    JohnRex
    Answered on July 07, 2020 at 08:58 AM

    You can use the ADVANCED DESIGNER to customize the design of form fields. Here's an example: http://tiny.cc/uvj3rz 

    Also, here's a guide on how to Customize-Your-Form-Using-Custom-CSS-Codes

     

  • Profile Image
    EmilHome
    Answered on July 07, 2020 at 09:22 AM

    hi John 

    can you give me an example of the CSS code? field ID deineEmil241

    background color yellow 

    I tried but it changed color to the entire form :-( 

    also, what about "translating" color codes from RYC / RGB to the format used in CSS 

    many thanks! 

  • Profile Image
    Bert_A
    Answered on July 07, 2020 at 10:14 AM

    Hi there,

    To change the field background color to yellow, please try the following CSS.

    #deineEmil241 {

        background-color : #FFFF00!important;

    }

  • Profile Image
    EmilHome
    Answered on July 09, 2020 at 01:32 AM

    hi again 

    somehow not working... 

    this is the CSS 

    1594272378CSS Background color.JPG

    this is the field I want the background in yellow 

    1594272426Field for BG color.JPG


    this is the result... no yellow at all.. 

    1594272725no change in BG color.JPG

  • Profile Image
    Kiran
    Answered on July 09, 2020 at 04:34 AM

    Please try changing the CSS code to the following so that the background color should be displaying for the entire field.

    #id_242 {

        background-color : #FFFF00!important;

    }

    159428367820200709_140424.png

    Hope this information helps! 

  • Profile Image
    EmilHome
    Answered on July 10, 2020 at 04:33 AM

    tx 

    and how would this code look like in a paragraph?

    cheers,C 

  • Profile Image
    ashwin_d
    Answered on July 10, 2020 at 06:57 AM

    To change the background color of the paragraph field of your form, please inject the following custom CSS code in your form:

    li#id_250 {

        background-color: #FFFF00!important;

    }

    Please check the screenshot below:

    1594378589bgCOlor.png

    Hope this helps.

    Do get back to us if you have any questions. 

  • Profile Image
    EmilHome
    Answered on July 10, 2020 at 07:04 AM

    Hi 

    works fine, thanks. where can I find the field number of paragraphs? 

    bests, C 

  • Profile Image
    JohnRex
    Answered on July 10, 2020 at 08:29 AM

    You can use the INSPECT tool of your browser. Here's a quick tutorial:

    http://tiny.cc/i4s9rz 

    Please try that and let us know if you need further assistance.


  • Profile Image
    EmilHome
    Answered on July 10, 2020 at 10:20 AM

    thanks for all your support... as I'm really not a prof when it comes to CSS, I'm still struggeling here... 

    picture one, thats how it looks in your tutorial 

    1594390722investigate.jpg


    Picture two, this is what I see... 

    1594390763missing div-id.JPG


    I try to change the color to the field with the following text:

    deine EMIL Lieferung erfolgt am Freitag, wenn deine Bestellung  bei uns 

    zwischen Dienstag 9h und Mittwoch 9h eingeht


    maybe you could do an other tutorial for me using this field. I've three more fpr training :-) 


    much appriciated 

  • Profile Image
    Bert_A
    Answered on July 10, 2020 at 12:28 PM

    Hi there,

    I have checked your form and it appears that you've been able to apply the color as you preferred on your texts.

    May I please know exactly what part do you still need further clarification for?

  • Profile Image
    EmilHome
    Answered on July 13, 2020 at 01:09 AM

    hi 

    as you can see, there are five text-fields. I want to use them instead of multiple-choice futher down on the form. 

    my problem with the texts is, that I can't find the field number. I understand how the code should look like but without field id I don't get any further... 

    the tutorial from your colleague is really helpfull but the line he's refering to is not showing when I try to work with investigate... 

    hope that helps... 

    Cheers, Christian 


  • Profile Image
    Sonnyfer
    Answered on July 13, 2020 at 02:32 AM

    Hello Christian  - Are you referring to the below text fields?

    1594621732tesqwq.png

    You can right-click on the input box and select "inspect" to see their Field_IDs. Please refer to my screencast below:

    1594621890inspe.gif

    Guide: How-to-Find-Field-IDs-and-Names 

    If you need further assistance, please let us know.

  • Profile Image
    EmilHome
    Answered on July 13, 2020 at 03:00 AM

    Hi 

    my struggle is all arround paragraph fields... can't see the field id there.... 

    see PrtSc below... thanks

  • Profile Image
    EmilHome
    Answered on July 13, 2020 at 03:54 AM

    hi again

    in addition to the background color, I'd also like to have text in color C240D4D and a frame around the field in same color. can you send me the codes for field 250? thx

  • Profile Image
    jherwin
    Answered on July 13, 2020 at 05:19 AM

    Can you please send us the field labels or a screenshot of the field you're referring to so we can give you the CSS code for it?

    Guide: How-to-Post-Screenshots-to-Our-Support-Forum

    Looking forward to your response.

  • Profile Image
    EmilHome
    Answered on July 13, 2020 at 05:47 AM

    here's the creen shot as required... 

    1594633604PrtSc13.7.20.JPG

  • Profile Image
    Kiran
    Answered on July 13, 2020 at 07:15 AM

    Since the paragraph fields are not input fields, the field ID properties are not available in the field settings. However, you may find the field ID of the specific paragraph field by showing them temporarily on the form and inspecting the form in the browser as shown in the screencast provided by our colleague here. Please see the screenshot below:

    15946385402433974_FieldID.gif

    You may add the following CSS Code to the form to change the color of the text in all the paragraph fields. The color code that you have mentioned in your post seems to be incorrect and you may check on it.

    .form-html {

        color: #4a4a4a !important;

    }

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    EmilHome
    Answered on July 13, 2020 at 07:36 AM

    that works fine now. thanks. 

    how woud the code look like to change text color? 

    also, can I add a frame around the field?

    bests, C 

  • Profile Image
    Sonnyfer
    Answered on July 13, 2020 at 08:52 AM

    I have moved your new question to a separate ticket considering that it's another topic. Kindly wait for my response on the following link: https://www.jotform.com/answers/2445368