PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Custom Submit button: almost there...

Gravity Support Forums » Plugin Support » Gravity Forms

  1. biagio111
    Member

    Trying to use a rollover image for my submit button. You can see what I'm trying to do on my sandbox site here:

    http://www.accessdv.com/d2dl

    Originally I'd tried using the custom button option in the advanced settings of the form itself, but of course, as it's a rollover image, it showed the whole thing. Right now, I'm targeting the button like this:

    .button {

background: url(images/submit.png) 0 0;
border: none;
cursor: pointer;
width: 101px;
height: 32px;
float: left;
margin: 0 499px 0 0;
}

.button:hover {
background: url(images/submit.png) 0 -32px;
}
    Copy

    That pretty much works, but you can still see some of the "base button" behind it...haven't been able to turn that off. Any help appreciated. Thanks!

    Biagio

    Posted 14 years ago on Saturday November 27, 2010 | Permalink

  2. biagio111
    Member

    Forgot one last thing, which I'm sure you'll see: similarly trying to target the field shape with the field from the theme, but have them both showing up. Targeted it like this:

    .large {
background: url(images/fields.png) 0 0;
}
    Copy

    http://www.accessdv.com/d2dl

    I'm still a css newbie, so thanks for your patience.
    Best,
    Biagio

    Posted 14 years ago on Saturday November 27, 2010 | Permalink

  3. Kevin Flahaut
    Administrator

    When you use CSS to do the image replacement tecnique, you have to hide the default text by using a negative text-indention.

    body #gform_wrapper_1 .gform_footer input.button {text-indent:-9000px]

    on the input field, it just looks like you want to turn the border off and then tweak the size a little

    body #gform_wrapper_1 input#input_1_1 {border:none}

    test screenshot: http://grab.by/7BqR

    You'll notice I used a specific CSS inheritance and unique input ID rather than just using the simple .large and .button classes. Unless you really plan to use that background on every field in every form with a .large class, it's better to be more specific. The same goes for the .button class.

    Hope that helps.

    Posted 14 years ago on Saturday November 27, 2010 | Permalink

  4. biagio111
    Member

    Kevin,
    Clearly, getting the developer license yesterday is not something I'll ever regret. Of every paid service I've ever been a part of, you are the fastest, most responsive guy I've ever seen. Surfing the forums last night, where I was able to find your answers to many questions, I learned a lot...not the least of which was how much you care about your customers.

    Your answers were perfect, and now I understand how to target things properly...thanks! Everything's working.

    Best,
    Biagio

    Posted 14 years ago on Saturday November 27, 2010 | Permalink

  5. Kevin Flahaut
    Administrator

    @Biagio,

    Thanks so much for the kind words. We try really hard to provide the best service we can and I'm very pleased to hear that you're happy. If you need any other help, don't hesitate to ask.

    Posted 14 years ago on Saturday November 27, 2010 | Permalink