How can I change the header border Colors?

  • hilldrob1990
    Asked on February 11, 2021 at 1: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 Screenshot 10
  • claire
    Replied on February 11, 2021 at 2: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  Screenshot 10

    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

  • hilldrob1990
    Replied on February 11, 2021 at 1: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

  • Elton Support Team Lead
    Replied on February 11, 2021 at 5:03 PM

    I just injected the following CSS code into your form.

    02122021 zR5024SPYm Screenshot 10

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

    Here's how that code would look like:

    02122021 CFsSxjjs5E Screenshot 21


  • hilldrob1990
    Replied on February 12, 2021 at 3:00 AM
    Thank you! What would be the code to change the Astro in pink? Can you
    inject that code as well?
    ...
  • Vanessa_T
    Replied on February 12, 2021 at 4: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

  • hilldrob1990
    Replied on February 12, 2021 at 3: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 Screenshot 10

  • Jovanne JotForm Support
    Replied on February 12, 2021 at 8: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.


  • hilldrob1990
    Replied on February 15, 2021 at 6:51 PM

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

  • Jovanne JotForm Support
    Replied on February 15, 2021 at 8:03 PM

    Hi,

    The code seems to be working on the cloned form.

    1613437389 602b19cdcc762 21 Screenshot 10

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

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