|
Alanna Quigley
|
April 6, 2013 at 11:41 pm
I would like to add a custom button to the registration page. I am using a custom theme roller theme and cannot work out how to add a custom button. the URL is http://www.wineriesonfoot.com.au/register/?regevent_action=register&event_id=404.
I would also like to get rid of the square list icons that appear next to the radio buttons.
Using WP 3.5.1 and Event Espresso 3.1.30.7P – recently upgraded from an earlier version (purchased March 2012). Thanks in advance for any assistance provided.
|
|
Pascal Dreissen
|
April 7, 2013 at 2:59 pm
Hi,
add this to your template style.css:
.event_form_field li {
list-style-type: none !important;
margin-left: 0px !important;
}
The last (margin-left) will align the radiobuttons. with this piece of css:
.options-list-radio {
margin-top: 15px !important;
}
You can align it a bit better to the question above.
For the button you could add:
.btn_event_form_submit {
background: #000 !important;
}
Will make a black background for your submit button, i’m not sure what you need but with the above example you have a starting point
|
|
Jonathan Wilson
|
April 10, 2013 at 3:08 pm
Thanks for jumping in and helping, Pascal.
Alanna, were you able to accomplish this?
|
|
Alanna Quigley
|
April 13, 2013 at 9:41 pm
Thanks Pascal and Jonathon. The custom css for the registration form worked, but I am still stuck on the custom button. Using that code provided worked in terms of making the button black, but I want it to load a custom image instead. The form in question is http://www.wineriesonfoot.com.au/register/?regevent_action=register&event_id=470 but I want the button to look the same as the one on this page: http://www.wineriesonfoot.com.au/red-hill-ridge/
I just can’t work out what to put exactly in the css file.
Thank you.
|
|
Pascal Dreissen
|
April 14, 2013 at 9:29 am
You have to drop the submit text!
[code language=”css”]#event_form_field-470 {
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat;
width: 178px;
height: 65px;
border: none;
}[/code]
|
|
Josh
|
April 16, 2013 at 11:35 am
This reference might help too:
http://css-tricks.com/css-image-replacement/
|
|
Alanna Quigley
|
April 17, 2013 at 2:10 am
Unfortunately that didn’t do anything so I tried a variation:
[code]
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat;
width: 178px;
height: 65px;
border: none;
} [/code]
and that didn’t work either – just made the current submit button bigger – 178px x 65px
I am only a rookie with CSS so any other suggestions would be greatly appreciated. I am using themeroller to style the registration page – if that helps.
Regards,
Alanna
|
|
Dean
|
April 17, 2013 at 6:49 am
Try this
.event_form_submit {
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat;
width: 178px;
height: 65px;
}
.btn_event_form_submit {
text-indent:-9999px; /* hides the button text*/
background:transparent !important; /* hides the button */
border:none !important; /* hides the button */
width:100%; /* these make it big enough to still click */
height:100%;
}
|
|
Alanna Quigley
|
April 17, 2013 at 6:59 am
YAY!!! Thank you so much Dean!! and everyone else who helped me. I really appreciate it. Thanks heaps.
|
|
Alanna Quigley
|
April 17, 2013 at 7:08 am
aaarrghh. But on the next page form “Confirm Registration” the button are then invisible….
|
|
Chris Reynolds
|
April 17, 2013 at 11:46 am
.btn_event_form_submit#confirm2 {
/* add your code to undo what Dean did above, e.g.: */
text-indent: 0px;
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat;
width: 178px;
height: 65px;
}
|
|
Alanna Quigley
|
April 17, 2013 at 11:38 pm
thanks! I’m nearly there. Now the last bit has the text Confirm Registration showing – how would I get this to display the image (I will use the booknow_button.png for the moment). So the full code I have in style.css is
[code]
.event_form_submit, {
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat;
width: 178px;
height: 65px;
}
.btn_event_form_submit {
text-indent:-9999px; /* hides the button text*/
background:transparent !important; /* hides the button */
border:none !important; /* hides the button */
width:100%; /* these make it big enough to still click */
height:100%;
}
.btn_event_form_submit#confirm2, .btn_event_form_submit#confirm {
/* add your code to undo what Dean did above, e.g.: */
text-indent: 0px;
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat;
width: 178px;
height: 65px;
}
[/code]
When I had a comma after the second “.btn_event_form_submit {” the text and border and the button would show, but if I added “#confirm” and “#confirm2” then the text would disappear, and the button would too. I really tried to work this out myself from here, but just can’t get it I’m sorry.
Any further help would be appreciated. Thanks.
(I’m in Australia so the time difference is a bit of a pain!)
Alanna
|
|
Josh
|
April 18, 2013 at 11:26 am
Hi Alanna,
You’d still need to indent the text off the page for the confirmation page button, and I think you can get that fancy background image to appear by using the !important rule like this:
.btn_event_form_submit#confirm2, .btn_event_form_submit#confirm {
text-indent: -9999px;
background: url(http://www.wineriesonfoot.com.au/wp-content/uploads/2011/12/booknow_button.png)no-repeat!important;
width: 178px;
height: 65px;
}
If you run into other things that you’d like to customize on your website it might save you some time if you can pick up a few references on CSS and how to use a tool like Firebug. Here are a few links that I’ve found helpful.
http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
http://htmldog.com/guides/cssbeginner/
|
