How can I change the pagebreak background color?

  • Profile Image
    Quirky2014
    Asked on September 05, 2014 at 08: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. 

  • Profile Image
    KadeJM
    Answered on September 05, 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.

  • Profile Image
    KadeJM
    Answered on September 05, 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:

  • Profile Image
    Quirky2014
    Answered on September 07, 2014 at 09: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.
  • Profile Image
    BaneD
    Answered on September 07, 2014 at 03: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 :)

  • Profile Image
    EltonCris
    Answered on September 07, 2014 at 07: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:

    ----

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

    Thanks!