Support

June 12, 2015 at 3:31 pm

Hi John,

A thorough review of your code reveals that it will result in changing the phrasing, wording, or verbiage of some of the text that appears on Event Espresso pages. Most of the changes have to do with changing phrases to say “classes” where they would normally say “events” and “registration” where it normally says “tickets”.

Will changing the wording of some phrases that appear the registration pages cause problems for people trying to sign up for classes? Absolutely not. The changes you made will only help clarify things for your intended use case of Event Espresso because you’re not using Event Espresso to sell tickets to events, you’re using it to sell registrations for classes. I’d say it was a job well done, nice work John.

It may help to reach out to some of the folks that register for your classes and ask them if they’ve had any trouble with registering.

June 12, 2015 at 4:03 pm

Hi John,

Is this the button that you’d love to see raised to a more obvious position?

https://www.evernote.com/shard/s4/sh/366fb654-d6d1-4933-b79e-a6200306aacd/ce0c7709e397833b9cd9be3540568f6b

I want to make sure we’re talking about the same thing here. While I can advise not to raise it because studies show submit buttons should appear after a form, it may help to align them to the left side. Another thing you can do is use a bit of custom CSS to make the button bigger and more colorful. It will be easier to see that way.

Here is some example CSS that I can share with you that you’re welcome to test out and tweak to fit to your needs. It can be added to your custom stylesheet and it will align the recaptcha and next step button to the left and change the color of the button:

.spco-whats-next-buttons {
text-align: left;
}

#espresso-recaptcha-dv {
float: left;
}

.spco-whats-next-buttons input {
color: red;
border-width: 2px;
border-color: red;
padding: 1em;
background: #fff;
}

June 13, 2015 at 7:18 am

Hi John,

You can make the button more round, and apply the same button styles to the Register Now button by modifying the last CSS rule I shared with you. Here’s the modification:

.spco-whats-next-buttons input,
.ticket-selector-submit-btn {
color: red;
border-width: 2px;
border-color: red;
padding: 1em;
background: #fff;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
cursor: pointer;
}

June 13, 2015 at 9:18 am

Hi John,

Re:

One very curious thing happened when transitioning from the rectangle button to the rounded button. With the rectangle, the pointer cursor never changed into a hand cursor when hovering over it, while it does change when hovering over the the rounded corner button. Isn’t that odd?

It’s not due to the corners being rounded. The reason that the cursor changes to a hand pointer now is because I added cursor: pointer; to the CSS styles I shared with you.

June 13, 2015 at 10:26 am

It’s CSS code, but not super simple. Here’s our button code, you’re more than welcome to re-use and adapt it:

  background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE));
  background: -moz-linear-gradient(24% 21% 270deg,#3DB8FE, #3DB8FE, #25A2F1 50%);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
  box-shadow: 0 1px 1px rgba(0,0,0,.4);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  border: 1px solid #25A2F1;

To change the above from blue to red, you swap in the hex code (#123456) values for variations of red. Along with that, you’ll need to make sure the button text color is set to white instead of red (otherwise you’ll end up with red text on a red background and that’s not readable).

Here’s a link to a handy tool that you can use to work out the variations of red and get the corresponding hex codes:

http://www.0to255.com/

June 15, 2015 at 8:19 am

Hi John,

You missed a few changes and left the backticks, which is preventing the code from working. I made some notes on a screenshot of your code with some suggestions on how to fix:

https://www.evernote.com/shard/s4/sh/1280888c-45dc-45d2-8ac6-f98ee8545d8a/748b008f867ca6ba0030264d4415a136

June 16, 2015 at 12:23 pm

Hi John,

I spot an error in your code:

color: fff;

is missing the #, it needs to read like this:

color: #fff;

That will make it so the text is white.

You can make the corners of the button less round (like here on ee.com) by changing your code where it says:

-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;

you change it to this:

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

June 18, 2015 at 10:08 am

It’s possible. One thing to keep in mind is we made the CSS for our theme. You’re more than welcome to borrow our CSS and use it on your theme, but it really needs to be tested to make sure it works for all browsers.

Looking over your CSS I can spot another problem that you should fix: You have the background still set to #fffff (or white). That really should be changed to blue. If you look at our css, it has this style rule:

background-color: #29aac0;

where your’s has this:

background: #ffffff;

So the reason you’re seeing a different button color on some browsers is because webkit browsers like Safari and Chrome will pick up the background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE)); rule, but IE will ignore it.

June 18, 2015 at 11:34 am

You can. Since background is the CSS shorthand for all background values it will work for setting a background color value, but background-color will only set the background color value.

https://developer.mozilla.org/en-US/docs/Web/CSS/background

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color