Support

Home Forums Event Espresso Premium Finalize button instead of text link?

Finalize button instead of text link?

Posted: January 10, 2013 at 2:41 pm

Viewing 6 reply threads


Chantel Botha

    January 10, 2013 at 2:41 pm

    Hello, Is it possible to add a “Finalize Button” similar to the “Submit” and “Confirm Registration” Buttons to the Payment Page instead of the

    “Attention!
    If you wish to pay by an Electronic Funds Transfer via your bank, please make note of the information below, then click here to finalize your registration”

    I think it would just be much more consistent and have the same feel as the previous pages?

    Let me know if there is a way I can configure this myself?
    I really do think users might miss that text since it does not even look like a link.

    Much appreciated.


    Josh

      January 10, 2013 at 3:29 pm

      Hi Chantel,

      This is possible by adding some custom CSS to your custom stylesheet.

      the ID for that link for the bank transfer option is a#finalize_bank

      Here is some example code derived from the CSS tricks button maker, which you can use to create your own button design:

      a#finalize_bank  {border-top: 1px solid #96d1f8;
         background: #65a9d7;
         background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
         background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
         background: -moz-linear-gradient(top, #3e779d, #65a9d7);
         background: -ms-linear-gradient(top, #3e779d, #65a9d7);
         background: -o-linear-gradient(top, #3e779d, #65a9d7);
         padding: 5px 10px;
         -webkit-border-radius: 8px;
         -moz-border-radius: 8px;
         border-radius: 8px;
         -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
         -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
         box-shadow: rgba(0,0,0,1) 0 1px 0;
         text-shadow: rgba(0,0,0,.4) 0 1px 0;
         color: white;
         font-size: 14px;
         font-family: Helvetica, Arial, Sans-Serif;
         text-decoration: none;
         vertical-align: middle;
         }
      
      a#finalize_bank:hover {
         border-top-color: #28597a;
         background: #28597a;
         color: #ccc;
         }
      a#finalize_bank:active {
         border-top-color: #1b435e;
         background: #1b435e;
         }
      


      Chantel Botha

        January 14, 2013 at 12:59 pm

        Hello, I apologise for being an idiot, but I have absolutely no idea where to put this code. I went to the style.css file and tried it a couple of places?
        Could you please help… I have 5 delegates registered on my new site but I can see that they are not finalising their registration after selecting the payment type – I only allow EFT payments!

        Would really appreciate your help!


        Josh

          January 14, 2013 at 1:25 pm

          Hi Chantel,

          I’d recommend installing the my custom CSS plugin and copying your custom CSS directly into the editor that it provides.


          Chantel Botha

            January 14, 2013 at 1:36 pm

            Wow! You are great! Last quick one! The button now spans two lines. any way I can put a page break in there to have the button on the next line?
            Forever grateful!


            Josh

              January 14, 2013 at 2:05 pm

              If you add display:block; to the style rules, that will make it display on its own line.

              Example:

              a#finalize_bank {display:block;}


              Chantel Botha

                January 14, 2013 at 2:15 pm

                Great. Worked!

                Viewing 6 reply threads

                The support post ‘Finalize button instead of text link?’ is closed to new replies.

                Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

                Event Espresso - Staging Server