CSS Questions

  • Martyn
    Asked on July 8, 2021 at 11:57 AM

    1) The logo that is showing on the top of the page is NOT the one that is on my editing version?


    2) I think there are multiple CSS codes for the buttons on the forms? I've forgotten which one changes which boxes. Would you be able to tell me what code I need to paste so that ALL the boxes are the same design, and all black, with white writing, and when you click on them, the writing stays white (currently it goes blue). Would it be possible to do this as one code so I can simply delete all of the existing CSS code and then just add one overwriting code that does all of that, for ease if I ever wanted to change anything in the future?

  • Anthony_Evans
    Replied on July 8, 2021 at 12:18 PM

    Howdy Martyn,

    1. I have inspected your form, and I am seeing the same logo on both forms, however the image is not being displayed correctly. This issue is related to the CSS that has already been added. Please find the corrected code at the end of this post.
    2. I have simplified the code to only handle the aspects you would like to change. Please delete all of the CSS in your form and replace it with this code:
    .form-all:before { /* These two are displaying the logo correctly */
      width: 100% !important;
      right: unset !important;
    }


    button.form-submit-button-black_blue:hover {
      color: white !important; /* This is the color of the text when hovering over the buttons */
    }


    Please let us know if there's anything else you would like to change.


  • Pace_Martyn
    Replied on July 8, 2021 at 1:29 PM

    I've copied and pasted the above code but when I go to fill in the form, there is no logo appearing and the submit button is blue and is also not the same design as the other buttons?

  • Anthony_Evans
    Replied on July 8, 2021 at 3:06 PM

    Hello again,

    I sincerely apologize, I do seem to have missed something on the submit button, I'm now seeing the blue button when it's not being hovered over.

    However, I do see the logo at the top of the form, I have also tested your form using an iPad running Safari.

    1625771050 60e74c2a5ac84  Screenshot 10

    Could you please provide a screenshot of how the logo looks on your end? In the meantime I'll rework my CSS for the Submit button. I will respond to this thread once I have an update.

    Thank you for your patience and understanding!

  • Martyn
    Replied on July 8, 2021 at 3:10 PM

    I've just retested in on both safari and chrome and it works.

    It wasn't showing when I was clicking on "fill in my form" on my jotform app, but again that is alsomnow working. So thank you.

    I look forward to getting the submit button sorted to being the same as the others. Is this possible to also be the same design as well as the same colour too?

    I really appreciate your help with this.

  • Anthony_Evans
    Replied on July 8, 2021 at 3:21 PM

    Howdy Martyn,

    I had attempted to copy the design of the other buttons as much as I can, please try replacing your CSS with this:

    .form-all:before { /* These adjust the position of the logo */
      width: 100% !important;
      right: unset;
      background-position: center; /* now centered with form */
    }
    button.form-submit-button-black_blue:hover {
      color: white !important; /* This is the color of the text when hovering over the buttons */

    #id_2 #input_2 { /* style copied from other buttons */
      text-shadow: -1px -1px 0px #000000;
      border: 1px solid #000000;
      -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.44);
      -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.44);
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.44);
      background: #030303;
      background: -moz-linear-gradient(top, #2e2e2e 0%, #030303 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2e2e), color-stop(100%,#030303));
      background: linear-gradient(top, #2e2e2e 0%, #030303 100%);
    }


    Just like last time, please remove all CSS first then paste this in it's place. You may need to "Hard Refresh" your browser to see changes immediately.

    Please let us know how this works for you!

  • Martyn
    Replied on July 8, 2021 at 3:29 PM

    The button is now black with white writing but the border is blue still as per the screenshot below.


  • Martyn
    Replied on July 8, 2021 at 3:30 PM

    1625772634 60e7525a4588e 084328C7 68A6 4 Screenshot 10

  • Anthony_Evans
    Replied on July 8, 2021 at 4:46 PM

    Hello again,

    Please change this line:

      border1px solid #000000;


    to this:

      border1px solid #000000 !important;

    This will force the border color to display as black.

    Please let us know if there's anything else we can change!

  • Martyn
    Replied on July 8, 2021 at 6:11 PM

    Perfect thanks.

    Another query I now have is that I want to include a condition for the thank you page, so that if the weight loss score is between certain values that a different message appears.

    The scoring categories I'll be looking at using are:

    Greater than +1.5 (where they've actually gained quite a bit of weight)

    Between +0.1 and +1.4 (where they've gained a small amount of weight)

    Between -0.5 and 0 (where they've lost a small amount of weight)

    Between -2 and -0.6 (where they've lost a good amount of weight)

    Greater than -2 (where they've lost too much weight)

    Is there a way I'd be able to set these up as conditions so for each one, a different thank you message was sent?

    Thanks.

  • Mike_G JotForm Support
    Replied on July 9, 2021 at 1:09 AM

    I have moved your new concern to a new ticket considering it is about a new topic.

    Here's the link to the new ticket: https://www.jotform.com/answers/3210316

    We will be responding to that ticket shortly. Kindly refer to that ticket for any follow-up questions or any additional information you would like to let us know to avoid confusion