UM custom email template css not applying

  • Resolved lolitsjohnnyboy

    (@lolitsjohnnyboy)


    6 years, 3 months ago

    Hi developers,

    I’ve a huge problem with UM and the email templates in the plugin. Because I’ve already an email template which works great I’ve tried to include it to UM which worked great in the first view. But now I’ve tried out some other email clients and notices that my external email css isn’t loading correctly for some clients. I’ve testet these clients with WooCommerce email sending and there all works fine but not in UM. Can you please help me?

    <?php
/**
 * Update email head
 */
add_filter( 'um_email_template_html_formatting', 'my_email_template_html', 10, 99 );
function my_email_template_html( $slug, $args ) {
	ob_start(); ?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?> style="height: 100%;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>"/>
        <title><?php echo get_bloginfo( 'name', 'display' ); ?></title>
        <style type="text/css"><?php require get_home_path() . 'wp-content/themes/DiviChild/woocommerce/emails/style.css'; ?></style>
    </head>
	<?php $head = ob_get_clean();

	return $head;
}

/**
 * Update email body
 */
add_filter( 'um_email_template_body_attrs', 'my_body_template', 10, 2 );
function my_body_template( $slug, $args ) {
	return 'style="margin: 0; height: 100%;" marginwidth="0" topmargin="0" marginheight="0" offset="0"';
}

    This is the part where I set the body style and include my style.css in the head. The problem is that in some email clients the included css in UM has no effect. I did the same in WooCommerce and there’s all working expected.

    Is there something wrong with my implementation / include for the css in UM?

Viewing 1 replies (of 1 total)
  • Thread Starter lolitsjohnnyboy

    (@lolitsjohnnyboy)

    This is the solution: The problem is that you can’t add css in the head. You need to append it directly to the html. At this point you’ve a problem when you want to include an external css file. In PHP you can do this:

    /**
 * Apply css to UM email message from template
 */
add_filter( 'um_email_send_message_content', 'apply_style_to_email', 10, 99);
function apply_style_to_email($message, $slug, $args ) {

    //Get Emogrifier class
	include_once get_home_path() . 'wp-content/themes/DiviChild/ultimate-member/libraries/class-emogrifier.php';

	ob_start();
	include_once get_home_path() . 'wp-content/themes/DiviChild/woocommerce/emails/email-styles.php';
	$css = apply_filters( 'woocommerce_email_styles', ob_get_clean() );

	// apply CSS styles inline for picky email clients.
	try {
		$emogrifier = new Emogrifier( $message, $css );
		$message    = $emogrifier->emogrify();
	} catch ( Exception $e ) {
		$logger = wc_get_logger();
		$logger->error( $e->getMessage(), array( 'source' => 'emogrifier' ) );
	}

	return $message;
}

    You can use a library to apply the css to the message before sending it. Just google for the library and include it like I did it.

Viewing 1 replies (of 1 total)
  • The topic ‘UM custom email template css not applying’ is closed to new replies.