-
AuthorPosts
-
October 24, 2013 at 2:09 pm #180229
Hi.
Can someone tell me how i can use the enfold buttons as a submit button etc on the button of a contact us form instead of the one that comes with the forms?
Them one with the forms looks out of place compared to the enfold button.
Thanks!
October 25, 2013 at 6:27 am #180497Hey midischool!
Can you please post a screenshot of the button that you want? You can style the submit button using this selector on Quick CSS:
.main_color input[type='submit'] { background-color: #c05f5f; color: #ffffff; border-color: #a03d3d; } .avia_ajax_form .button { margin: 0; padding: 16px 50px; border-radius: 2px; border-bottom-width: 1px; border-bottom-style: solid; font-weight: normal; font-size: 12px; } input[type="submit"], #submit, .button { padding: 9px 22px; cursor: pointer; border: none; -webkit-appearance: none; border-radius: 0px; }
Cheers!
IsmaelOctober 25, 2013 at 2:52 pm #180684This reply has been marked as private.October 26, 2013 at 12:05 am #180856Hey!
Please use this:
.main_color input[type='submit'] { background-color: #c05f5f; color: #ffffff; border-color: #a03d3d; border-radius: 3px; background-image: url("../images/layout/bg-button.png"); background-repeat: repeat-x; background-position: 0 0; padding: 10px; font-size: 12px; text-decoration: none; display: inline-block; border-style: solid; border-width: 1px; margin: 3px 0; line-height: 1.2em; position: relative; font-weight: 600; text-align: center; max-width: 100%; } .avia_ajax_form .button { margin: 0; padding: 16px 50px; border-radius: 2px; border-bottom-width: 1px; border-bottom-style: solid; font-weight: normal; font-size: 12px; } input[type="submit"], #submit, .button { padding: 9px 22px; cursor: pointer; border: none; -webkit-appearance: none; }
Adjust the values if you want.
Cheers!
IsmaelOctober 26, 2013 at 1:06 am #180874This reply has been marked as private.October 26, 2013 at 2:16 am #180905Hey!
I thought you’re trying to change the contact form’s submit button?
Best regards,
IsmaelOctober 26, 2013 at 11:46 pm #181102This reply has been marked as private.October 28, 2013 at 7:01 am #181424Hey!
Please give us a link to the contact page. The code should change the submit button. Please place the code on the child theme’s style.css.
Best regards,
IsmaelOctober 28, 2013 at 2:26 pm #181581This reply has been marked as private.October 29, 2013 at 6:58 pm #182188Hi!
Please once again make sure that this file exists *****
You can download it here https://dl.dropboxusercontent.com/u/14975671/bg-button.pngRegards,
Yigit- This reply was modified 11 years, 1 month ago by Yigit.
October 29, 2013 at 7:10 pm #182194This means nothing what so ever, also please can you remove my URL as this meant to be private- i will get into a load of trouble if you leave the dev site link public!!
Can you explain your post as well, as it starts with one again, you have never commented on this so how is it once again???
October 29, 2013 at 7:15 pm #182198Hey!
Removed.
With Ismael’s code you have added this linebackground-image: url("../images/layout/bg-button.png");
So i assumed that you have checked that bg-button.png file exists inside enfold\images\layout folder. That is why i said “once again” :)
Regards,
YigitOctober 29, 2013 at 7:18 pm #182199Sorry yes that is in the layout folder
October 29, 2013 at 7:27 pm #182204Hey!
1) What is the exact path to that folder? Should be “wp-content/themes/enfold/images/layout/bg-button.png”
2)Please find following line in Ismael’s code.main_color input[type='submit'] { background-image: url("../images/layout/bg-button.png"); }
and change it to
.main_color input[type='submit'] { background-image: url("yourwebsite.com/wp-content/themes/enfold/images/layout/bg-button.png"); }
If you have changed theme folders name from Enfold to something else, you should adjust this link yourwebsite.com/wp-content/themes/enfold/images/layout/bg-button.png
Best regards,
YigitOctober 29, 2013 at 7:51 pm #182216I am using a child theme.
Your link below is correct the file is in there
wp-content/themes/enfold/images/layout/bg-button.png”but in my child theme which is
wp-content/themes/MYCHILDTHEME/images/
there is only one file close box.png
October 29, 2013 at 8:11 pm #182220This reply has been marked as private.October 30, 2013 at 3:21 am #182316Hey!
The bg-button.png doesn’t exist. It should be located here: http://www.yourwebsite.com/wp-content/themes/enfold/images/layout/bg-button.png
Cheers!
Ismael- This reply was modified 11 years, 1 month ago by Yigit. Reason: website is private
October 30, 2013 at 3:51 pm #182470This reply has been marked as private.November 1, 2013 at 2:32 am #183230Hey!
Link to image still seems to be broken. Please change Ismael’s code with following one. It should fix both gradient issue and button on your second link
.main_color input[type='submit'], .header_color input[type='submit'], div .header_color .button { background-color: #c05f5f; color: #ffffff; border-color: #a03d3d; border-radius: 3px; background-image: url("https://dev.midischool.com/wp-content/themes/enfold/images/layout/bg-button.png"); background-repeat: repeat-x; background-position: 0 0; padding: 10px; font-size: 12px; text-decoration: none; display: inline-block; border-style: solid; border-width: 1px; margin: 3px 0; line-height: 1.2em; position: relative; font-weight: 600; text-align: center; max-width: 100%; } .avia_ajax_form .button { margin: 0; padding: 16px 50px; border-radius: 2px; border-bottom-width: 1px; border-bottom-style: solid; font-weight: normal; font-size: 12px; } input[type="submit"], #submit, .button { padding: 9px 22px; cursor: pointer; border: none; -webkit-appearance: none; }
Best regards,
YigitNovember 1, 2013 at 4:27 pm #183416This reply has been marked as private.November 1, 2013 at 4:40 pm #183423Hi!
Please add following code as well
.header_color input[type='submit']:hover, .header_color .button:hover { background-color: #a81010; color: #ffffff; border-color: #a81010; }
Cheers!
YigitNovember 1, 2013 at 7:29 pm #183469This reply has been marked as private.November 2, 2013 at 7:17 pm #183750Hi!
You have “to see full content..” active and i avoid social sharing so i could not take a look at the button but following code should do it
.main_color input[type='submit']:hover, .header_color .button:hover, .header_color input[type='submit']:hover { background-color: black; color: #ffffff; border-color: black; }
You just need to change black to your desired hover color
Best regards,
YigitNovember 3, 2013 at 5:35 pm #183955This reply has been marked as private.November 4, 2013 at 1:36 am #184041Hi!
Please add following code instead
body .avia-button.avia-color-theme-color:hover , body .avia-button.avia-color-theme-color:hover { background-color: black; border-color: black; }
Best regards,
Yigit- This reply was modified 11 years, 1 month ago by Yigit.
November 4, 2013 at 7:39 pm #184401This reply has been marked as private.November 4, 2013 at 11:00 pm #184523Hey!
I updated my previous code. Sorry, i skipped to add one :hover. Just so we are on the same page, you want to change the background color of “enrol on course” on hover, is that correct?
Cheers!
YigitNovember 5, 2013 at 12:02 am #184546This reply has been marked as private.November 5, 2013 at 8:41 pm #184936Hey!
Image link is broken on following button
.main_color input[type='submit']
If you do not mind me posting it publically i can correct it?
Regards,
YigitNovember 5, 2013 at 11:26 pm #184979Yes thats fine
What do i need to do?
-
AuthorPosts
- The topic ‘Submit button – use the enfold instead of the form button’ is closed to new replies.