How can I change the header border Colors?

  • Profile Image
    hilldrob1990
    Asked on February 11, 2021 at 01:09 AM

    Is there anyway to change the color of the pink lines?

    And also can you explain how the inventory element works? Every time I try to use it there’s always a fill in the blank box.. Am I using it wrong or am I just not understanding the element?
    1613023510_6024c916a6edb_A8461186-7AD8-4
  • Profile Image
    claire
    Answered on February 11, 2021 at 02:56 AM

    Since your questions are different from each other, I moved your other question to another thread. I will answer it as soon as possible. Please check this link.

    For your first question, I kindly recommend you add Custom CSS Code to your form. I cloned your form and tested it on my end. Please add the code below to your form. I used the color black for testing.

    .form-header-group.header-large, .form-header-group.header-default {

     border-bottom: 1px solid black !important;

     border-top: 1px solid black !important;

    }

    My cloned form looks like below;

    1613030053_6024e2a563aa1_

    Please check this related guide to inject Custom CSS Code: How to Inject Custom CSS Codes

    You may also check and clone my test form: https://form.jotform.com/210410997966970

    How to Clone an Existing Form from a URL

  • Profile Image
    hilldrob1990
    Answered on February 11, 2021 at 01:27 PM

    Can you not copy and paste the code you told me to use? I tried coping and pasting and it wouldn’t let me. Can you just add the code for me? I can't the lines to be blue thank you so much

  • Profile Image
    EltonCris
    Answered on February 11, 2021 at 05:03 PM

    I just injected the following CSS code into your form.

    02122021_zR5024SPYm.png

    Just change the color black found in the code to your preference.

    Here's how that code would look like:

    02122021_CFsSxjjs5E.png


  • Profile Image
    hilldrob1990
    Answered on February 12, 2021 at 03:00 AM
    Thank you! What would be the code to change the Astro in pink? Can you
    inject that code as well?
    ...
  • Profile Image
    Vanessa_T
    Answered on February 12, 2021 at 04:38 AM

    I am not sure what you meant by Astro. Can you please share a screenshot?

    How-to-Post-Screenshots-to-Our-Support-System (Note: Email Attachment Is Not Supported)

    Nevertheless, if you are still referring to the lines and want to change it to different colors, simply do the same steps you did when you changed the color from black to blue.

    How-to-Inject-Custom-CSS-Codes

  • Profile Image
    hilldrob1990
    Answered on February 12, 2021 at 03:09 PM

    The little pink star in the circle, can you inject the code to change the color of it? I was able to change the color of the lines from the code you injected. Thank you! 1613160475_6026e01bd96e5_976BD818-5A1B-4

  • Profile Image
    Jovanne_A
    Answered on February 12, 2021 at 08:55 PM

    Hi,

    Please try adding this CSS code:

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

    span.form-required {  color: pink;}

    You can change the color pink to any color you prefer.

    Please give it a try and let us know how it goes.


  • Profile Image
    hilldrob1990
    Answered on February 15, 2021 at 06:51 PM

    I can’t get that code to work either...

  • Profile Image
    Jovanne_A
    Answered on February 15, 2021 at 08:03 PM

    Hi,

    The code seems to be working on the cloned form.

    1613437389_602b19cdcc762_21.png

    Please note that the code will only work on the live form.

    Please give it a try and let us know how it goes.