|
Alvina Doremus
|
February 4, 2015 at 4:53 pm
Hi everybody,
I am not really happy with the design of the registration box and payment box: they are too large, the fields for the answers to the questions are too long and I would like to have a color for this box (instead of a white background and grey header). The overall look is visually not great.
Is there a method to change this look ?
WP:4.1
EE3
http://www.artyparty.com.au
Thanks in advance for your responses !
Alvina
|
|
Alvina Doremus
|
February 4, 2015 at 5:29 pm
Me again, I found the ThemeRoller which is great ! I was able to change the colors of the boxes. Now I just need to reduce the width of the boxes: I wish the length could be approximately half of the screen and centered on my page.
Anyone have any idea how I can do that ?
Thanks in advance !
|
|
Lorenzo Orlando Caum
|
February 4, 2015 at 6:08 pm
Hi there Alvina,
You can inspect any element on a page using a free tool like Chrome Developer Tools (available with Google Chrome) or Firebug (available as a web browser extension).
This will show you the CSS that is handling the styling including the file and line number. Then you can add new styling to your child theme’s stylesheet or through a plugin like Reaktiv CSS builder or My Custom CSS.
Try this CSS:
/*Styling for event listing page*/
.event_data.NULL.event-data-display.event-list-display.event-display-boxes.ui-widget {width:55%;margin:0 auto;}
/*Styling for single event page*/
#event_espresso_registration_form {width:55%;margin:0 auto;}
/*Styling for registration checkout page*/
.event-conf-block.event-display-boxes.ui-widget {width:55%;margin:0 auto;}
#espresso-payment_page-dv {width:55%;margin:0 auto;}
It should then look like this:
http://cl.ly/image/0A2H1a0Y2f2Y
—
Lorenzo
|
|
Alvina Doremus
|
February 4, 2015 at 6:23 pm
Hi Lorenzo,
Thank you very much for your response ! I have add the line you mentioned in my “Custom CSS” and it works great !! Thank you so much !
However, when I click to “Register” the following box (where you enter your personal details) then the confirmation box (which display your personal data) and eventually the “Payment overview boxes” are still too large.
Could you please kindly advise me which lines I should write in my Custom CSS to make them all the same ?
Thanks again for your help !
|
|
Lorenzo Orlando Caum
|
February 4, 2015 at 8:48 pm
Hi Alvina,
I’ve revised my prior post with additional CSS.
That should adjust the other pages.
—
Lorenzo
|
|
Alvina Doremus
|
February 4, 2015 at 9:50 pm
Thank you very much Lorenzo for your help. The overall look of my registration box now are great ! Thanks !
|
|
Dean
|
February 5, 2015 at 7:47 am
Hi,
Do you have any other queries regarding this topic or can we mark this as resolved?
|
