MachForm Community Forums » MachForm 4

1. gmf3ooi
   Member

   Please guide me on how to remove shadow on all field in the form?

   http://s3.postimg.org/smcn0l8pv/Screen_Shot_2014_12_26_at_12_06_04_AM.png

   Thank you.

   Posted 9 years ago #

2. Saghalie
   Pro Member

   The best way I believe is to use the theme editor and assign it to that form.

   Regards,

   Saghalie
   http://www.kcmhosting.com

   Posted 9 years ago #

3. gmf3ooi
   Member

   Thank you for reply.

   I already thoroughly try and search for the option to change that, before i post question at this forum. Try for about an hour..

   But still couldn't the way to do it.

   Please refer to the sample at appnitro.com : http://www.appnitro.com/demo/view.php?id=1

   All fields also have shadow around the field box.

   Please guide me.

   Thank you.

   Posted 9 years ago #

4. Saghalie
   Pro Member

   Yep, you'll have to use the theme editor to get rid of those. You can apply a different theme to the form. I suggest the default theme. Or you can edit or create a new theme for your form and apply the theme to your new form.

   Or you might have to go in to the CSS of the form itself and find the shadow borders CSS code and change it there - although that's a needle in the haystack scenario.

   Regards,

   Saghalie,
   http://www.kcmhosting.com

   Posted 9 years ago #

5. Markstein
   Member

   It's actually quite simple to remove with a CSS adjustment. Open the theme that you have designated for your form. In the upper right click the arrow to find Advanced CSS. Enter the following:

   /* Remove the outer borders from all input fields in this theme */
   #main_body input.text {
   border: 0px;
   }

   Now if you'd like to play with the border radius on the fields you would add the following instead:

   /* Remove the outer borders from all input fields in this theme */
   #main_body input.text {
   border: 0px;
   border-radius: 0px;
   }

   Change the 0px to your desired result for the border radius.

   Posted 9 years ago #

6. kevinfernandes
   Member

   Hello.
   The code above removes the border from most fields but they remain on drop downs and paragraph text fields. How is it possible to remove / edit those also? Thank you.

   Posted 9 years ago #

7. Markstein
   Member

   For the drop downs you would add the following:

   /* Remove the outer border from all select boxes in this theme */
   #main_body select.select {
   border: 0px;
   }

   For the paragraph text area you would add the following:

   /* Remove the outer border from all paragraph text boxes in this theme */
   #main_body textarea.textarea {
   border: 0px;
   }

   You could, of course, add the additional CSS for the border radius as I explained above for these as well.

   Posted 9 years ago #

8. gmf3ooi
   Member

   Thank you so much Markstein and Kevinfernandes for your reply. This solve almost all my problems.

   I need a little more help on how to :

   1. Reduce the dropdown menu field height, so it has the same height as other text field.

   2. Reduce the 'country' height in Address field, so it has the same height as other text field ( postal ).

   Reference : http://s24.postimg.org/kd6fnz5h1/Css_edit_machform.jpg

   Thank you very much.

   Posted 9 years ago #

9. Markstein
   Member

   Do you have a link to your form so I can have a look?

   Posted 9 years ago #

10. gmf3ooi
    Member

    The form : http://malaysiafibre.com/mFf15to1m/view.php?id=10687

    Thank you.

    Posted 9 years ago #

11. Markstein
    Member

    Instead of the code above I posted above, use this code for the select boxes:

    /* Remove the outer border from all select boxes in this theme, modify the border radius and specify a height */
    #main_body select.select {
    border: 0px;
    border-radius: 8px;
    height: 28px;
    }

    Posted 9 years ago #

12. doralevich
    Member

    This was exactly what I needed...
    Thank you!

    Posted 9 years ago #

RSS feed for this topic

Reply

You must log in to post.