Viewing 30 posts - 1 through 30 (of 40 total)
  • Author
    Posts
  • #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!

    #180497

    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

    #180684
    This reply has been marked as private.
    #180856

    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

    #180874
    This reply has been marked as private.
    #180905

    Hey!

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

    Best regards,
    Ismael

    #181102
    This reply has been marked as private.
    #181424

    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

    #181581
    This reply has been marked as private.
    #182188

    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 5 months, 3 weeks ago by  Yigit.
    #182194

    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???

    #182198

    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

    #182199

    Sorry yes that is in the layout folder

    #182204

    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

    #182216

    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

    #182220
    This reply has been marked as private.
    #182316

    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 5 months, 3 weeks ago by  Yigit. Reason: website is private
    #182470
    This reply has been marked as private.
    #183230

    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("http://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

    #183416
    This reply has been marked as private.
    #183423

    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

    #183469
    This reply has been marked as private.
    #183750

    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

    #183955
    This reply has been marked as private.
    #184041

    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 5 months, 2 weeks ago by  Yigit.
    #184401
    This reply has been marked as private.
    #184523

    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

    #184546
    This reply has been marked as private.
    #184936

    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

    #184979

    Yes thats fine

    What do i need to do?

Viewing 30 posts - 1 through 30 (of 40 total)

The topic ‘Submit button – use the enfold instead of the form button’ is closed to new replies.