Editing styles for the booking form

[Sue]

I’m a bit hazy on what I should either edit or add (to say, a custom style sheet) to style up my booking form.

I’d like to maybe add some buttony goodness, as well as make the fields and fonts a teensy bit bigger. I’d even like to make the asterisk for mandatory fields a bit…redder to make it stand out. Basically, I’d like to Bootstrap it up the wazoo (but I realise that this may not be possible or practical).

Do I edit the EO style sheet (which I assume would get overwritten in an update), or add a custom style sheet?

Also, it’s good to be back with the Pro version! Phew.

[Stephen Harris]

Hi Sue,

Basically, I’d like to Bootstrap it up the wazoo (but I realise that this may not be possible or practical).

On the contrary, EO & EO Pro are designed so that themes can modify the look relatively easily.I’d avoid editing the plug-in stylesheet directly, but there are a number of options. Let me list them here before recommending one…

1) Disabling plug-in styelsheets
You can disable the plug-in stylesheet (see Settings > Event Organiser > General) and then copy the contents of any required front-end stylesheets to your theme’s style.css (i.e. EO & EO Pro’s frontend stylesheets and fullcalendar.css).

You can get the theme to forcibly disable the plug-in’s front-end stylesheet via

 add_filter( 'option_eventorganiser_options', 'mytheme_disable_eventorganiser_css' );
 function mytheme_disable_eventorganiser_css( $options ){
    $options['disable_css'] = 1;
    return $options;
 }

(this is handy if you want to prevent an admin from accidentally enabling them again)

Pro: You have complete freedom to edit them. Your site makes up to three fewer HTTP requests (so loads faster)
Con: You have a much larger/unwieldy theme stylesheet

2) Replace the stylesheets
Stylesheets are registered with a particular location (source). You can de-register them, and then re-register them to a location in your theme.

add_action( 'init', 'mytheme_eo_pro_register_scripts', 100 );
function mytheme_eo_pro_register_scripts() {
    //de-register default Pro stylesheet
    wp_deregister_style( 'eo_pro_frontend' ); 
    //This assumes your replace stylesheet is in eo-pro.css in the root
    //of your theme.
    wp_register_style( 'eo_pro_frontend', get_template_directory_uri() . '/eo-pro.css' );
}

Pro: You can just replace the stylesheets you need to
Con: You are not reducing the number of HTTP requests (see above).

3) Add the styling to your theme’s style.css
Since plug-in stylesheets load later, they can take often take precedence. This means you might need to add !important to the stylesheet changes. But otherwise this is by far the simplest solution

Pro: Simple, ideal for a few/minor changes
Con: Requires the use of !important

Aside
Sometimes you just need to insert the appropriate HTML classes into the booking form (e.g. buttons / alerts / form elements) and your theme will automatically style them. There are some UI options for adding stylesheets, but theme’s can do it automatically too. Here’s a gist example of getting the booking form to look native to pretty much any bootstrap based theme: https://gist.github.com/stephenharris/ff5091917ff06de4ce06

[Stephen Harris]

For your case, it sounds like (2) or maybe (3) would be best. If it’s just the booking form, you don’t want to worry about ensuring that you’ve copied the calendar stylesheet across properly (for example).

(1) is really reserved for theme developers you want complete control over the stylesheets, because they’re designing a theme for Event Organiser. It’s a bit overkill if you just want to tweak stuff.

[Stephen Harris]

Theme developers: Resources for theme developers are in the process of being written up. In addition there are updates coming soon which will make it even easier for themes to be built for Event Organiser (this will also help developers who simply want to modify a generic theme).

[Sue]

Perfect (as usual)! That’s excellent, thank you Stephen.

I will be playing with this all weekend!

thanks again,

[Vladislav Gherciu]

Good info, I have a question though.

If I have a theme already and want to disable the EO stylesheets for [event_search] form, would simply de-registerning it without re-registering work?

add_action( 'init', 'mytheme_eo_pro_register_scripts', 100 );

function mytheme_eo_pro_register_scripts() {
    //de-register default Pro stylesheet
    wp_deregister_style( 'eo_pro_event_search' ); 
    //This assumes your replace stylesheet is in eo-pro.css in the root
    //of your theme.
    //wp_register_style( 'eo_pro_event_search', get_template_directory_uri() . '/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/listify/style.css' );
}

• This reply was modified 9 years, 11 months ago by  Vladislav Gherciu.
• This reply was modified 9 years, 11 months ago by  Vladislav Gherciu.

[Stephen Harris]

Yes but there isn’t a separate stylesheet for the event search short code. Some minimal styling is printed after the EO’s (base version) stysleet eo_front.

So the only way of disabling that is to deregister that stylesheet or via the disable stylesheets option (or overriding it in later stylesheet or in the theme’s style.css where you might need to use !important! as it will general load earlier).

[Author]

Posts