MachForm Community Forums » MachForm 2

1. glennjohnson
   Member

   Hi everyone,

   Obviously you can style your form buttons with your own custom CSS. I've used a generator to create my CSS button style.
   My form has the following buttons;

   (Choose File) - File Upload Box
   (Continue)
   (Back)
   (Submit)

   Can anyone please tell me;
   • Where do I place the CSS code?
   • Where do I place the HTML code?
   • Where do I upload the button images to?

   Your help would be greatly appreciated. Thanks in advance.

   - Glenn.

   Posted 13 years ago #

2. glennjohnson
   Member

   Oh, and my form is here if that helps at all?

   http://www.glennjohnsondesign.com/#1673501/Client-Retouch-Brief-Form

   Posted 13 years ago #
3. 

   yuniar

   Basically you can paste all your custom css code into your form by using the Edit CSS menu.

   If you could paste me your custom button css code or a link to an example, I might be able to provide you with more detailed instruction.

   ---

   MachForm Founder

   Posted 13 years ago #

4. glennjohnson
   Member

   Hi Yuniar, thanks for the response.
   Here's my custom button CSS code:

   button {
   border: 0 none;
   cursor: pointer;
   font-weight: bold;
   padding: 0 15px 0 0;
   text-align: center;
   height: 30px;
   line-height: 30px;
   width: auto;
   }
   
   button.rounded {
   background: transparent url( btn_right.png ) no-repeat scroll right top;
   clear: left;
   font-size: 0.8em;
   }
   
   button span {
   display: block;
   padding: 0 0 0 15px;
   position: relative;
   white-space: nowrap;
   height: 30px;
   line-height: 30px;
   }
   
   button.rounded span {
   background: transparent url( btn_left.png ) no-repeat scroll left top;
   color: #FFFFFF;
   }
   
   button.rounded:hover {
   background-position: 100% -30px;
   }
   
   button.rounded:hover span {
   background-position: 0% -30px;
   }
   
   button::-moz-focus-inner {
   border: none;
   }

   The instructions on how to apply the custom button say this;

   How to use

   Step 1: Copy the css from style.css to your css file
   Step 2: Copy btn_left.png and btn_right.png files into the folder of your css file
   Step 3: Add button to your html - sample button html as following

   <button class="rounded">
     <span>Your text</span>

   Where do I place the CSS, the PNG files and the HTML to get this button working?

   Thanks.

   - Glenn.

   Posted 13 years ago #
5. 

   redityo

   The css would be different, since machform form using "input" HTML tag as the button. However, you can try to change the css code like this :

   input.button_text{
   border: 0 none;
   cursor: pointer;
   font-weight: bold;
   padding: 0 15px 0 0;
   text-align: center;
   height: 30px;
   line-height: 30px;
   width: auto;
   background: transparent url( '../../../images/btn_right.png') no-repeat scroll right top;
   clear: left;
   font-size: 0.8em;
   }
   
   input.button_text span {
   display: block;
   padding: 0 0 0 15px;
   position: relative;
   white-space: nowrap;
   height: 30px;
   line-height: 30px;
   }
   
   input.button_text span {
   background: transparent url( '../../../images/btn_left.png') no-repeat scroll left top;
   color: #FFFFFF;
   }
   
   input.button_text:hover {
   background-position: 100% -30px;
   }
   
   input.button_text:hover span {
   background-position: 0% -30px;
   }
   
   input.button_text::-moz-focus-inner {
   border: none;
   }

   and here is the steps :

   1. Edit your form css code (you can do this from machform admin) and put those code in there.

   2. Upload the button image file under machform "images" folder.

   Otherwise, you can use method that posted in here to change your form button into an images

   http://www.appnitro.com/forums/topic/replace-the-submit-button-with-an-image?replies=12

   ---

   MachForm Support

   Posted 13 years ago #

RSS feed for this topic

Reply

You must log in to post.