![Demis [Fox-Labs]'s Avatar](https://secure.gravatar.com/avatar/30cdb3d88f2b8f0d7fdea0316b70342b?s=144&r=g&d=https%3A%2F%2Fwww.fox.ra.it%2Fimages%2Favatar-fox.png)
- Posts: 3856
- Thank you received: 515
Submit button
26 May 2011 08:20 - 08 May 2014 11:57 #1
by Demis [Fox-Labs]
Submit button was created by Demis [Fox-Labs]
How to enable the "Button icon"
Under "Submit button" and "Reset button" sections, the option "Icon" controls what icon have to be displayed inside the button.
Feel free to put your own custom png icons in the directory media/com_foxcontact/images/submit/ and media/com_foxcontact/images/reset/.
Note that such icons only work if "button type" has been set to "button", while it doesn't work when "button type" = "input".
This is the final result.
How use images as buttons
The "Image" option determines whether the whole button has to be rendered using an image.
Upload your own custom buttons in the directory media/com_foxcontact/buttons/submit/ and media/com_foxcontact/buttons/reset/.
This is the final result.
Submit button style may appear different from other buttons in the same page
The "Submit" button should appear exactly as the other buttons, but sometimes it looks like different.
It happens when your current template defines a style for "input" elements, but not for (or it defines a different one for) "button" elements.
There are two ways to create a button. The most used is input elementswhile Fox Contact uses by default a button element
If you experience the problem described above, you probably have other working styled buttons created with a code like this:and a css like this:
but button elements aren't affected by "mybutton" style.
In this case you could fix the problem by choosing to use an "Input" element, rather than a "Button" element. Do it in Form Fields -> Submit button -> Type.
If your template doesn't set a style for button elements, you can write a section for buttons:
you could also define together in a single instrucion
How to change the horizontal position of the buttons
By default, submit button appears on the left side (right side for RTL languages), aligned with fields label.
Some people prefer to place submit button a little more centered, aligned with form fields.
A such layout can be achieved by editing css stylesheet, adding a margin to the foxbutton class:The size of the margin required, depends on
label width
chosen.
You probably want to set the same margin for the "Send me a copy" checkbox too. See how the "Send me a copy" checkbox looks like without any margin:
The class fox_copy_to_sender is already defined in neon.css, and you only need to add a margin-left directive.And finally, how the "Send me a copy" checkbox looks like with a margin:
Under "Submit button" and "Reset button" sections, the option "Icon" controls what icon have to be displayed inside the button.
Feel free to put your own custom png icons in the directory media/com_foxcontact/images/submit/ and media/com_foxcontact/images/reset/.
Note that such icons only work if "button type" has been set to "button", while it doesn't work when "button type" = "input".
This is the final result.
How use images as buttons
The "Image" option determines whether the whole button has to be rendered using an image.
Upload your own custom buttons in the directory media/com_foxcontact/buttons/submit/ and media/com_foxcontact/buttons/reset/.
This is the final result.
Submit button style may appear different from other buttons in the same page
The "Submit" button should appear exactly as the other buttons, but sometimes it looks like different.
It happens when your current template defines a style for "input" elements, but not for (or it defines a different one for) "button" elements.
There are two ways to create a button. The most used is input elements
<input type="submit" value="Submit"/><button type="submit">Submit</button>Both solutions works in the same way, but the second offers richer rendering possibilities (it let you disable the button, specify a tabindex, set an accesskey, and insert an HTML content inside the button element).
If you experience the problem described above, you probably have other working styled buttons created with a code like this:
<input type="submit" value="Submit" class="mybutton" />.mybutton {
...button style definition...
}but button elements aren't affected by "mybutton" style.
In this case you could fix the problem by choosing to use an "Input" element, rather than a "Button" element. Do it in Form Fields -> Submit button -> Type.
If your template doesn't set a style for button elements, you can write a section for buttons:
button {
...button style definition...
}you could also define together in a single instrucion
.mybutton, button {
...button style definition...
}How to change the horizontal position of the buttons
By default, submit button appears on the left side (right side for RTL languages), aligned with fields label.
Some people prefer to place submit button a little more centered, aligned with form fields.
A such layout can be achieved by editing css stylesheet, adding a margin to the foxbutton class:
button.foxbutton {
margin-left: 160px;
}You probably want to set the same margin for the "Send me a copy" checkbox too. See how the "Send me a copy" checkbox looks like without any margin:
The class fox_copy_to_sender is already defined in neon.css, and you only need to add a margin-left directive.
.fox_copy_to_sender {
margin-left: 160px !important;
}
Please Log in or Create an account to join the conversation.