|
JonathAN GRECH
|
May 8, 2013 at 10:15 am
On the Registation PageI want to change the register button to something more noticeable and change the word Register to Next or Book Now.
Also on the Calendar widget above where you can put a title I want to put Click on a Date to Book but at the moment its not very noticeable, please explain what I can do in a way I might understand as I am very new to these this.
Ragrds Jonathan
|
|
JonathAN GRECH
|
May 8, 2013 at 10:15 am
my register button I want to become like your submit button
|
|
Dean
|
May 9, 2013 at 5:14 am
Hi,
To change the look of the button, you can either use the ThemeRoller designs in the Template Settings or you would need to use CSS to modify its style.
The text above the widget can be easily added by adding a Text Widget above the calendar widget and adding text there.
If you are not referring to the sidebar widget but the actual main calendar, then you can just add text to the page where the calendar shortcode is.
Hope that helps!
|
|
JonathAN GRECH
|
May 9, 2013 at 8:55 am
There is no button at the moment just a word register which when you press it adds to cart
I also want to change ‘REGISTER’ to ‘BOOK NOW’
|
|
Josh
|
May 9, 2013 at 11:27 am
Hi Jonathan,
It sounds like you’re using an add to cart link, is that the case? If so, you can change the text from the default “register” to “book now” by adding the anchor parameter like this:
[ESPRESSO_CART_LINK event_id="123" anchor="Book now"]
If you’d like to make the link look more like a button, this can be done by adding some styles (CSS) to your WordPress theme. Please see this video tutorial for some tips:
https://eventespresso.com/wiki/using-css3-to-style-links/
|
|
JonathAN GRECH
|
May 22, 2013 at 2:15 pm
I did this with my custom CCS and it didnt work
a.ee_view_cart {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e699c), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e699c, #65a9d7);
background: -moz-linear-gradient(top, #3e699c, #65a9d7);
background: -ms-linear-gradient(top, #3e699c, #65a9d7);
background: -o-linear-gradient(top, #3e699c, #65a9d7);
padding: 5.5px 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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: 20px;
font-family: ‘Lucida Grande’, Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
a.ee_view_cart:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
a.ee_view_cart:active {
border-top-color: #1b435e;
background: #1b435e;
}
|
|
Josh
|
May 22, 2013 at 2:53 pm
Where is this not working? Can you post a link to the page so we know where to look?
Also, did you try clearing your browser’s cache -and- where did you place the custom CSS? Order can matter (style rules that go after will override).
|
|
JonathAN GRECH
|
May 22, 2013 at 3:31 pm
http://maltabluelagoon.com/event-registration/?regevent_action=register&event_id=324
I have the following code before it .espresso_calendar_widget a.fc-event-skin div {
background: url(‘../espresso-calendar/css/images/tick-circle-frame.png’) no-repeat 6px -24px; !important }
.espresso_calendar_widget {
width: 100%;
width: 250px;
}
<code>.event_espresso_form_wrapper p.section-title {display: none;}
</code>
<code>function myee_filter_gettext( $translated, $original, $domain ) {
$strings = array(
‘Register’ => ‘Buy Tickets’,
// Add some more strings here
);
if ( isset( $strings[$original] ) ) {
$translations = &get_translations_for_domain( $domain );
$translated = $translations->translate( $strings[$original] );
}
return $translated;
}
add_filter( ‘gettext’, ‘myee_filter_gettext’, 10, 3 );
</code>
<code>$cart_link = event_espresso_cart_link($params);
}
$display_cart_link = do_shortcode(‘[EE_META type=”event_meta” name=”display_cart_link”]’);
if ($display_reg_form == ‘Y’) {
?>
<p id="register_link-” class=”register-link-footer”>
<a class="a_register_link" id="a_register_link-” href=”” title=””><?php _e(”, ‘event_espresso’); ?></a>
<p id="register_link-” class=”register-link-footer”>
<a class="a_register_link" id="a_register_link-” href=”” title=””><?php _e(”, ‘event_espresso’); ?></a>
</code>
|
|
JonathAN GRECH
|
May 22, 2013 at 3:36 pm
okay i’ve just realized the problem. I now have another problem that the button is off half on one line and have on another.
|
|
Josh
|
May 22, 2013 at 3:39 pm
Hi Jonathan,
It looks like you’re mixing CSS with PHP. In either case, PHP should be added to a file that ends with .php, and CSS should be added to a file that ends with .css.
It might be better to install a plugin like Jetpack or my custom CSS plugin and place your custom CSS with the built in editors that these plugins give you.
|
|
JonathAN GRECH
|
May 22, 2013 at 3:41 pm
i did use my custom css
|
|
JonathAN GRECH
|
May 22, 2013 at 3:44 pm
This is the code i have in my custom css now
.espresso_calendar_widget a.fc-event-skin div {
background: url(‘../espresso-calendar/css/images/tick-circle-frame.png’) no-repeat 6px -24px; !important }
.espresso_calendar_widget {
width: 100%;
width: 250px;
}
<code>.event_espresso_form_wrapper p.section-title {display: none;}
</code>
a.ee_view_cart {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e699c), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e699c, #65a9d7);
background: -moz-linear-gradient(top, #3e699c, #65a9d7);
background: -ms-linear-gradient(top, #3e699c, #65a9d7);
background: -o-linear-gradient(top, #3e699c, #65a9d7);
padding: 5.5px 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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: 20px;
font-family: ‘Lucida Grande’, Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
a.ee_view_cart:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
a.ee_view_cart:active {
border-top-color: #1b435e;
background: #1b435e;
}
but the button is spanning over 2 lines
http://maltabluelagoon.com/event-registration/?regevent_action=register&event_id=319
|
|
Josh
|
May 22, 2013 at 6:45 pm
This button?
Normally if something spans two lines it’s from a width getting set to narrow. So if you have a button that’s wrapping two lines, you can check the containing div and see if there is a pixel width set and either increase the width or set it to width:auto.
|
