|
Evan Westerlund
|
October 14, 2015 at 2:17 am
Greetings,
Now that I am up and running with EE4, I thought to inquire about customizing the page view/layout of the Registration Check-out page. 3 main issues I would like to tackle:
1) Name & Description header line looks fine…but the details below it do not match the line above at all. The Quantity, Price and Total items are all crunched to the left. With everything crimped under Name & Description…. the QTY, PRICE & TOTAL on the header line become lone, lonely, loners out to the right with nothing underneath them. If I were a viewer, I might wonder about the site owners ability to choose plugins that work – especially if they are paid for.
2) As a viewer I look at the page and say…”ok..so what then?”… My response would be to the ENORMOUS GAP between the aforementioned name & description of the ticket I am buying…and the registration form itself. It requires me to THINK…which in essence, is not something I want to be doing too much of right now as I purchase…I just want to purchase…but if I cannot see on my screen, where I should register my name…my user experience plummets, and I have to think…and by the time I come around to the idea that “I” (the one buying a “ticket”) must do some hard work intuitively scrolling down a half page to see where to put in my registration info…well then you’ve lost me as a buyer because it triggers something inside of me, and I am not longer a captive buyer…I am a thinker about “how the heck do I get what I want on this site…can’t it be a better layout??”
There is a VERY LARGE gap between the Ticket Details and the actual Registration Form & Proceed to Payment button. …..I must get rid of that gap.
I have tested the Custom CSS code from the post below…with no result.
https://eventespresso.com/topic/change-css-for-registration-checkout-page/
3) Same as #2 applies to the Payment Options page, where there are enormous gaps between Name & Description and the VAT (*taxable items) line…yet another big gap between Method of Payment (invoice in this instance) and Important information regarding your payment box. And yet another large gap between that box and the Proceed to Final Registration button. …….
I need fixes on these, if you’ve got them…thanks. I am beginning to experience buyers remorse with this plugin for the work I need to do to make it view properly.
Thanks in advance!
//Evan
|
|
Tony
|
October 14, 2015 at 5:29 am
Hi Evan,
This is likely caused by your theme, can you link me to and event page so I can take a look please?
|
|
Evan Westerlund
|
October 14, 2015 at 5:34 am
Hi Tony,
Thanks for getting back. You can start here and go through the experience.
https://generact-negotiation.com/blog/events/generact-negotiation-program-fall-2015/
Looking forward to your thoughts…feel at a standstill with this.
//Evan
|
|
Tony
|
October 14, 2015 at 5:48 am
Yeah its cause by styles within your sites theme – http://take.ms/EpFwC
Styles.css is the css file from your theme.
To fix it we can simply overrider those styles for the EE table using something like this:
#ee-single-page-checkout-dv .item {
height: auto;
display: table-row;
}
We recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles such as these.
However to note that your theme may do this in other places to, you can either contact the theme author and request they styles sections more specifically (rathan using just ‘.item’ then may use something like ‘#page .item’ but it all depends what its being used for) or continue to override these as they come up.
|
|
Evan Westerlund
|
October 14, 2015 at 6:49 am
Hi Tony…good insights. I put in into Custom CSS, fixed “most of it”…so you’re now at hero status today. I would, however, also like to tackle the bottom half of the page & the big spaces between “Invoice” and the box “Important information about…” and finally the “Finalize” button on the bottom.
Is there a code for this also?
|
|
Tony
|
October 14, 2015 at 12:18 pm
You mean these gaps? – http://take.ms/jTNEy
They are actually intentional to break up the page, you can reduce them using:
label#ee-available-payment-method-inputs-invoice-lbl {
min-height: 50px!important;
}
and
div#spco-payment-method-info-invoice {
margin-bottom: 0px;
}
Does that help?
|
|
Evan Westerlund
|
October 14, 2015 at 12:56 pm
Yes…those gaps.
You’ve transcended to Super Hero status! Seriously. Thanks…I’m not a coder. You’ve made a big difference in me moving forward here with the web. My eyes & mind fasten on these things, thinking about my customers, and I can’t let go. Now I can let go a little…
Cheers!
|
|
Tony
|
October 14, 2015 at 1:15 pm
Super TonEE! 😉
I’m glad it worked for you, I’ll mark this thread resolved.
Please feel free to open up a new thread with any further questions/issues.
Have a great day.
|
