Remove pagebreak top border and background

  • tristansmith
    Asked on October 1, 2014 at 10:35 AM
  • David JotForm Support
    Replied on October 1, 2014 at 12:21 PM

    Hi,

    You can customize this by following this steps:

    1. You can use button style

    Remove pagebreak top border and background Image 1 Screenshot 20

    OR

    2. You can inject custom CSS and get the page break field ID and insert some CSS script.

    Example

    /*Code Starts Here*/

    Note: .form-pagebreak-back # will differ from the pagebreak field ID

    /* Page break button*/

    #form-pagebreak-back_7{width: 348px;

    margin-top: -10px; cursor: pointer;-moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;padding:8px 18px;color: #154d0e;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-shadow:1px 1px 0px #518d8a;border:1px solid #268a16 !important;-moz-box-shadow:inset 0px 1px 0px 0px #c9efabzz;

    -webkit-box-shadow:inset 0px 1px 0px 0px #c9efab;

    box-shadow:inset 0px 0px 0px 0px #c9efab;background: #4ea20a; /* old browsers */

    background: -moz-linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#518d8a), color-stop(100%,#518d8a)); /* webkit */

    background: linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bd82f', endColorstr='#4ea20a', GradientType=0 ); /* ie */

    }

    #form-pagebreak-back_7:hover{

    border:1px solid #268a16 !important;

    background: #518D76; /* old browsers */

    background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */

    background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */

    }

    #form-pagebreak-back_7:active{

    border:1px solid #268a16 !important;

    position: relative;

    top: 1px;

    background: #5bb215; /* old browsers */

    background: -moz-linear-gradient(top, #5bb215 0%, #80dd32 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bb215), color-stop(100%,#80dd32)); /* webkit */

    background: linear-gradient(top, #5bb215 0%, #80dd32 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb215', endColorstr='#80dd32', GradientType=0 ); /* ie */

    }

    /*Code Ends Here*/

    For your reference here are some of the functions that are included in the code:

    #form-pagebreak-back_7 - You can set your color,size,height etc inside this function.

    #form-pagebreak-back_7:hover - This is when you hover your mouse and see the effects changed, you can set it here.

    #form-pagebreak-back_7:active - After clicking on the submit button it sets to active link and the settings inside here will take effect.

    Here sets the roundess of the button:

    -moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;

    background: - sets the background color

    border: - The border property is used as a shorthand method to specify one or more of the 3 border values (width, style, and color) all in one place. This property applies to all 4 sides

     width: - The width property is used to specify the width of the content area of an element's box

    This block of code below sets the gradient color of your button and its browser's flexibility to display the settings (You can play around with colors, just change the one that starts with "#" ex. #518D76 change to #000000)

    background: #518D76; /* old browsers */

    background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */

    background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */

    Gradient Sample:

    Gradient Screenshot 31

    Just let me know if you have more questions. You can play around with the colors and style but the basic format to follow is the above steps.

  • tristansmith
    Replied on October 1, 2014 at 12:31 PM
    This is ridiculous.
    I have asked many questions over the last day and you still have not address my questions?
    Did you refer to the page I am working on?
    Do you see a white line above the “get free report Button”?
    I want to get rid of this!!!!!!!!!!!
    Tristan Smith
    Cabrillo Mortgage and Realty
    www.1SanDiegoHomes.com
    619-564-6986 direct
    619-202-7729 fax
    ...
  • tristansmith
    Replied on October 1, 2014 at 12:38 PM

    Again, you did not address my simple question. I have a white line that shows up in my form that I want to get rid of. Try looking at the web page before responding!

  • Elton Support Team Lead
    Replied on October 1, 2014 at 2:01 PM

    @tristansmith

    Our sincere apologies.

    It happens that you have posted several questions that's why we are getting confused. Your question on this thread does not contain any explanation that's why we are unable to get it straight. May we suggest you to stick to 1 question per thread to avoid any confusions.

    Upon looking at your form now http://form.jotformpro.com/form/42734704083958 I can't seem to find the white line you've mentioned. Were you able to sort this out?

    Additionally, if you want to move the the form header title onto the box (as well as remove the error background highlight), you can add this CSS codes.

    .form-all {padding-top: 78px;}

    .form-line-error {background: none;}

    .form-required{display:none;}

    Result:

    Remove pagebreak top border and background Image 1 Screenshot 20

    If there's anything else you need help with, let us know here.

    Regards!