Changing the page break button style and alignment

  • Profile Image
    locomotivedisplaycases
    Asked on December 12, 2015 at 04:06 AM

    I know this has been asked before, I have looked at various answers on the forum and playing around with CSS coding but with little results. So please can you help.

    I am trying to use my own images as page buttons to match my website and layout. The first screenshot is what my form looks like now the second is the result I want to achieve. whilst I don't have the button images saved in my images on my jotform account if provided with the right coding solution I should be okay. I would need the buttons to align on the left.

    Hope you can help. David 

  • Profile Image
    Welvin
    Answered on December 12, 2015 at 01:03 PM

    This is possible by adding a custom CSS codes in your form. I'm now working on this and will let you know later for the codes. 

  • Profile Image
    Welvin
    Answered on December 12, 2015 at 01:12 PM

    Inject the following custom CSS codes to your form:

    .form-pagebreak-next {

        border : 1px solid #344E60;

        background : #344E60;

        border-radius : 0;

        padding : 12px 45px !important;

        color : #fff;

        box-shadow : none;

        margin-left: -50px

    }

    .form-pagebreak-back {

        border : 1px solid #DEDEDE;

        border-radius : 0 !important;

        padding : 12px 45px !important;

        color : #555555;

        margin-left : 30px;

        background : #F0F0F0;

        box-shadow : none;

    }

    .form-pagebreak {

        border-top : none;

        background : none;

    }

     

    Here's how to inject the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. I would suggest adding it in the designer. 

    Here's a clone version of your form showing the changes: https://form.jotform.com/53455525438965.

    In the "Order Information" tab, you will have to delete the page break and replace it with a new one so the design will be changed to our default.

    Please get back to us if you need further assistance about this matter.

  • Profile Image
    locomotivedisplaycases
    Answered on December 13, 2015 at 03:46 AM

    Thanks for all your help, I can now alter alignment css to suit. Much appreciate your excellent support. David

  • Profile Image
    abajan
    Answered on December 13, 2015 at 08:15 AM

    On behalf of my learned colleague, you're most welcome, David!

    Cheers