How can I change the pagebreak background color?

  • Quirky2014
    Asked on September 5, 2014 at 8:44 AM

    Behind the 'Next' button there is an ugly white strip. How can I make this transparent so that its the same colour as the form back ground. 

    Jotform Thread 424886 Screenshot
  • KadeJM
    Replied on September 5, 2014 at 12:05 PM

    I see your problem. This is happening due to the color contrast between your form and your background so it has forced a different color into your pagebreak.

    To fix this it needs to be overridden with some injected css for the pagebreak background plus some further colormixing to get it just right.

    I will need some additional time to try to fix this problem for you and will be with you shortly as soon as I figure it out.

  • KadeJM
    Replied on September 5, 2014 at 12:24 PM

    Okay, I think I've managed to fix this problem or at least it seems pretty close to matching that particular color contrasting.

    I ended up having to force the colormixing to an rgba scale to get it to work against your background.

    You are more than welcome to try to tweak it slightly more if you wish.

    CSS:

    .form-pagebreak {

    background: none repeat scroll 0% 0% rgba(219, 206, 175, 1);

     

    Result:

    How can I change the pagebreak background color? Image 1 Screenshot 20

  • Quirky2014
    Replied on September 7, 2014 at 9:55 AM

    Thank you for spending the time on this. You seem to have gotten pretty close with it. I am not sure where I can enter that CS code. 

    Also just a quick one - is there any way I can position the question next to each other rather then one below the other? As you can see in my form I need measurements for hand made garments. It would look more appealing if they where arranged in a line rather than as a long list. It does not matter if not.
  • BaneD
    Replied on September 7, 2014 at 3:25 PM

    Hi Quirky

    "I am not sure where I can enter that CS code."

    You can inject that CSS that was mentioned by Kade by following these steps: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    "is there any way I can position the question next to each other rather then one below the other?"

    Do you want to have them all shown in one line or to have for example 2 of the questions per row?

    I would not suggest setting them all up in one row since your visitors would need to scroll to the side and it is usually preferred to scroll down. Either way you decide should be possible to set up though :)

  • Elton Support Team Lead
    Replied on September 7, 2014 at 7:03 PM

    @Quirky2014

    Something seems to be missing from my colleague's code. Here I have corrected it below and added a property to remove the border line on pagebreak as well.

    .form-pagebreak{

    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0);

    border: none;

    }

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

    This should be the result:

    How can I change the pagebreak background color? Image 1 Screenshot 20

    ----

    We will answer your second question to a separate thread here https://www.jotform.com/answers/425463.

    Thanks!