Viewing 30 posts - 1 through 30 (of 40 total)
1 2
  • Author
    Posts
  • October 24, 2013 at 2:09 pm #180229
    mmsdev

    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 #180497
    Ismael

    Hey 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!
    Ismael

    October 25, 2013 at 2:52 pm #180684
    mmsdev
    This reply has been marked as private.
    October 26, 2013 at 12:05 am #180856
    Ismael

    Hey!

    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!
    Ismael

    October 26, 2013 at 1:06 am #180874
    mmsdev
    This reply has been marked as private.
    October 26, 2013 at 2:16 am #180905
    Ismael

    Hey!

    I thought you’re trying to change the contact form’s submit button?

    Best regards,
    Ismael

    October 26, 2013 at 11:46 pm #181102
    mmsdev
    This reply has been marked as private.
    October 28, 2013 at 7:01 am #181424
    Ismael

    Hey!

    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,
    Ismael

    October 28, 2013 at 2:26 pm #181581
    mmsdev
    This reply has been marked as private.
    October 29, 2013 at 6:58 pm #182188
    Yigit

    Hi!

    Please once again make sure that this file exists *****
    You can download it here https://dl.dropboxusercontent.com/u/14975671/bg-button.png

    Regards,
    Yigit

    • This reply was modified 10 years, 6 months ago by Yigit.
    October 29, 2013 at 7:10 pm #182194
    mmsdev

    This 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 #182198
    Yigit

    Hey!

    Removed.
    With Ismael’s code you have added this line

    background-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,
    Yigit

    October 29, 2013 at 7:18 pm #182199
    mmsdev

    Sorry yes that is in the layout folder

    October 29, 2013 at 7:27 pm #182204
    Yigit

    Hey!

    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,
    Yigit

    October 29, 2013 at 7:51 pm #182216
    mmsdev

    I 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 #182220
    mmsdev
    This reply has been marked as private.
    October 30, 2013 at 3:21 am #182316
    Ismael

    Hey!

    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 10 years, 5 months ago by Yigit. Reason: website is private
    October 30, 2013 at 3:51 pm #182470
    mmsdev
    This reply has been marked as private.
    November 1, 2013 at 2:32 am #183230
    Yigit

    Hey!

    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,
    Yigit

    November 1, 2013 at 4:27 pm #183416
    mmsdev
    This reply has been marked as private.
    November 1, 2013 at 4:40 pm #183423
    Yigit

    Hi!

    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!
    Yigit

    November 1, 2013 at 7:29 pm #183469
    mmsdev
    This reply has been marked as private.
    November 2, 2013 at 7:17 pm #183750
    Yigit

    Hi!

    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,
    Yigit

    November 3, 2013 at 5:35 pm #183955
    mmsdev
    This reply has been marked as private.
    November 4, 2013 at 1:36 am #184041
    Yigit

    Hi!

    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 10 years, 5 months ago by Yigit.
    November 4, 2013 at 7:39 pm #184401
    mmsdev
    This reply has been marked as private.
    November 4, 2013 at 11:00 pm #184523
    Yigit

    Hey!

    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!
    Yigit

    November 5, 2013 at 12:02 am #184546
    mmsdev
    This reply has been marked as private.
    November 5, 2013 at 8:41 pm #184936
    Yigit

    Hey!

    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,
    Yigit

    November 5, 2013 at 11:26 pm #184979
    mmsdev

    Yes thats fine

    What do i need to do?

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 40 total)
1 2
  • The topic ‘Submit button – use the enfold instead of the form button’ is closed to new replies.