CSS Questions

  • Profile Image
    Martyn
    Asked on July 08, 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?

  • Profile Image
    Anthony_Evans
    Answered on July 08, 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.


  • Profile Image
    Pace_Martyn
    Answered on July 08, 2021 at 01: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?

  • Profile Image
    Anthony_Evans
    Answered on July 08, 2021 at 03: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_

    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!

  • Profile Image
    Martyn 
    Answered on July 08, 2021 at 03: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.

  • Profile Image
    Anthony_Evans
    Answered on July 08, 2021 at 03: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!

  • Profile Image
    Martyn 
    Answered on July 08, 2021 at 03:29 PM

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


  • Profile Image
    Martyn 
    Answered on July 08, 2021 at 03:30 PM

    1625772634_60e7525a4588e_084328C7-68A6-4

  • Profile Image
    Anthony_Evans
    Answered on July 08, 2021 at 04: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!

  • Profile Image
    Mike_G
    Answered on July 09, 2021 at 01: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