Support

Home Forums Event Espresso Premium Custom Styles to email message and invoice

Custom Styles to email message and invoice

Posted: May 24, 2014 at 11:16 am


Sue Adams

May 24, 2014 at 11:16 am

What .css style sheet controls the look and feel of the email messages and invoices and where can I find them? I’m trying to change the look of a few things on the printed invoice (ie., Registration Details field labels are centered and I’d prefer to set them as left or right aligned, etc.,)


Lorenzo Orlando Caum

  • Support Staff

May 24, 2014 at 3:35 pm

Hello,

What version of Event Espresso are you using?


Lorenzo


Sue Adams

May 25, 2014 at 3:38 am

I am using version 4.2.4.reg Personal License


Lorenzo Orlando Caum

  • Support Staff

May 25, 2014 at 10:28 am

Thanks for that information. The CSS files for the messenger templates are part of the core but you can relocate them to another location and then use a filter to have Event Espresso check that new location.

For example, here is an example on how to use the wp-content/uploads folder:

http://developer.eventespresso.com/hooks/fhee__ee_email_messenger__get_inline_css_template__css_url/


Lorenzo


Sue Adams

May 27, 2014 at 11:19 am

Do I add the function ee_inline_css_swap to the file called “EE_Email_messenger.class.php” (in it’s original location)? Or do I replace the function called “public function get_inline_css_template” in that same file. Do I need to relocate the EE_Email_messenger.class.php file to the uploads folder?
The instructions aren’t clear on any of this. Thanks!


Sue Adams

May 27, 2014 at 11:26 am

I’m pretty much a newbie with this. I can figure things out to a certain point, but not sure on some things. Also, after moving the 3 css files to the uploads directory. Do I need the change any of the text within the new function to make it all work? If you could help with more detailed instructions, I’d appreciate it. Thanks!


Sue Adams

May 28, 2014 at 10:54 pm

Thought it a bit strange that no one has responded to the last two posts in this thread.


Sue Adams

May 28, 2014 at 10:56 pm

” but you can relocate them to another location and then use a filter to have Event Espresso check that new location.” I assume I relocate them to the uploads folder, but do I leave the others in their original location? How do I use a filter? These are things I’m not familiar with. Thank you.


Dean

May 29, 2014 at 3:07 am

Hi Sue,

Sorry about the delay in getting back to you.

If you look at the code here: http://developer.eventespresso.com/hooks/fhee__ee_email_messenger__get_inline_css_template__css_url/

What you would need to do is add that code to your themes functions.php (note it will get removed when your theme updates, so either copy the final code somewhere safe so you can replace it or consider using a Child Theme http://codex.wordpress.org/Child_Themes).

There is a typo in the supplied code, so here is the correct version

<?php
//assuming you have the files located in wp-content/uploads/
function ee_inline_css_swap( $url, $type ) {
	$upload_dir = wp_upload_dir();
      switch ( $type ) {
		case 'preview' :
			$url =  $upload_dir['baseurl'] . '/email-messenger-inline-preview-css.template.css';
			break;

		case 'wpeditor' :
			$url =  $upload_dir['baseurl'] . '/email-messenger-inline-wpeditor-css.template.css';
			break;

		default :
			$url =  $upload_dir['baseurl'] . '/email-messenger-inline-css.template.css';
			break;
	}

	return $url; 
}
add_filter( 'FHEE__EE_Email_Messenger__get_inline_css_template__css_url', 'ee_inline_css_swap', 10, 2 );

The 3 CSS files will go into the uploads directory (and yes you copy them, leaving the originals where they are).

Those files that need to be copied are:

Final email: /wp-content/plugins/event-espresso-core-reg/core/libraries/messages/messenger/assets/email/email-messenger-inline-css.template.css
Preview email: /wp-content/plugins/event-espresso-core-reg/core/libraries/messages/messenger/assets/email/email-messenger-inline-preview-css.template.css
Editor: /wp-content/plugins/event-espresso-core-reg/core/libraries/messages/messenger/assets/email/email-messenger-inline-wpeditor-css.template.css

Then you can simply edit those files in your uploads directory to make changes to the email styles.

I hope that makes some sense, if not please let me know.

The support post ‘Custom Styles to email message and invoice’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso