This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 4

How to: Remove rounded corners and border shadows in Machform 4.2 and up


  1. williamansley
    Member

    Machform 4.2 introduced a new appearance to the form fields; instead of having square corners, the corners are now rounded and instead of a simple line, the border is now surrounded by a shadow. In addition, drop down lists are now very slightly taller than text input boxes, making the address field, for example, look slightly misaligned.

    Some people don't like the new look. If you are one of those people, you can change the appearance of your forms to look like they did in Machform 4.1 or earlier by adding some CSS code to your Machform theme in the Advanced CSS Code text entry box. All thanks for the CSS code should go to forum member Markstein; I just put it all together. (Yuniar, perhaps you could make this message a "sticky". Thank you.)

    http://www.appnitro.com/doc-theme-editor#add-css

    (If you are not using a theme for your form, you will have to create one. Make sure you apply this theme to your form after you create it.)

    http://www.appnitro.com/doc-theme-editor

    Paste this code into the Advanced CSS Code text entry box, in addition to any CSS code your theme may already be using:

    /* Remove the outer borders from all input fields in this theme, make corners square */
    #main_body input.text {
    border: 0px;
    border-radius: 0px;
    }
    
    /* Remove the outer border from all paragraph text boxes in this theme, make corners square */
    #main_body textarea.textarea {
    border: 0px;
    border-radius: 0px;
    }
    
    /* Remove the outer border from all select boxes in this theme, make corners square and specify a height */
    main_body select.select {
    border: 0px;
    border-radius: 0px;
    height: 28px;
    }
    Posted 9 years ago #
  2. HeuF
    Member

    @williamansley: Thanks again, but I miss:

    #form_container,#main_body h1{
    border-radius: 0px;
    }

    The border of the form.

    Posted 9 years ago #
  3. williamansley
    Member

    @HeuF: Thank you for pointing that omission out! For what it's worth, I completely agree with you that Appnitro should add the ability to control these changes to the appearance of forms using the graphical user interface and that they shouldn't have made the changes without letting us know what they were going to do first, and I have told them so. I don't know if they will follow our suggestions, but I hope so.

    Posted 9 years ago #

RSS feed for this topic

Reply