I'm really quite pleased with the Simplenews module together with Mime Mail and CSS compressor modules, they get the job done nicely.

However I'm having problems when I'm trying to customize certain elements by adding inline styles - they simply get removed. It seems the CSS compressor is stripping all the existing inline styles and replacing them with what is set in mail.css.

I'm using the following template files to custom my newsletter (content type) layout:
simplenews-newsletter-body.tpl.php
simplenews-newsletter-footer.tpl.php

I place all of the styles in mail.css, however for some elements there is the need to put some custom inline styles directly in the template files mentioned above.

Can anyone else confirm this or am I missing something?

Comments

sgabe’s picture

I can confirm this issue.

simplenews-newsletter-body.tpl.php

<h2 style="color: red;"><?php print $title; ?></h2>
<?php print $body; ?>

mail.css

h2 { font-size:8px; }

in the test newsletter the styles are merged just fine

<h2 style="color:red;font-size:8px;">Lorem ipsum (700996) - 1</h2>

but in the newsletter sent by cron the style is replaced by the definition in mail.css

<h2 style="font-size:8px;">Lorem ipsum (700996) - 1</h2>

I'll dig deeper into this.

@-Mania-: Will you help me test if I come up with something?

sgabe’s picture

@-Mania-: Please make sure that Simplenews uses the modified template files. I could reproduce this, when Simplenews couldn't load my custom newsletter template files. I think that is the case in your issue too, so it's not a MimeMail problem after all.

-Mania-’s picture

Thanks sgabe. How exactly do you make sure Simplenews is using the modified template files? It should pick them up when being in the themes folder?

sgabe’s picture

Simple put something like this in the template file:

<h1>Made by my default theme</h1>
<h2 style="color: red;"><?php print $title; ?></h2>
<?php print $body; ?>

You'll have to see it in the message.

-Mania-’s picture

Version: 6.x-1.0-alpha1 » 6.x-1.0-alpha2

Sorry it took a while to respond. I'm running into the issue you described at #1 over and over again. I am sending test newsletters. All the inline styles get replaced if the mail.css has styles for that element.

I.e. having this in mail.css

h2 { color:red; }

Then adding this into simplenews-newsletter-body.tpl.php

<h2 style="color:blue;">I want this heading to be blue instead of default red</h2>

Will result in

<h2 style="color:red;">I want this heading to be blue instead of default red</h2>

Any further advice appreciated. I don't know how you managed to get it working correctly! :D

sgabe’s picture

Title: Custom inline style properties overwritten when using CSS Compressor » Custom inline style properties overridden when using CSS Compressor
Version: 7.x-1.x-dev » 6.x-1.0-alpha2
Status: Reviewed & tested by the community » Active

Followed your lead in #5 and retested this. Issue confirmed as valid. I missed the bug in my first test...

To reproduce:

  1. Enable the CSS Compressor.
  2. Declare a style rule in mail.css.
  3. Define the same property with a different value for the same selector as inline style.
  4. Send a test message.

The inline property's value will be overwritten with the one defined in mail.css. I couldn't reproduce this at first because I used different properties. In that case the CSS Compressor concatenates the properties just fine.

I am changing the title to a more accurate one.

sgabe’s picture

Title: Custom inline styles removed when using CSS compressor » Custom inline style properties overwritten when using CSS Compressor
Version: 6.x-1.0-alpha2 » 7.x-1.x-dev
Status: Active » Needs review
StatusFileSize
new935 bytes

CSS Compressor creates arrays from the style attributes, than uses array_merge() to merge the existing style information with the new one. According to the behavior of the function:

If the input arrays have the same string keys, then the later value for that key will overwrite the previous one.

I think we can simply commute the two arrays, so the old one will overwrite the new one and we can preserve the existing inline values. I am attaching a patch and changing the version, since patches should be made against HEAD.

@-Mania-: Try the attached patch and report back, please.

-Mania-’s picture

It works! You just made me very happy. :)

I actually have a couple of other CSS problems/suggestions but I'll open up separate issues for those.

sgabe’s picture

Please, set the issue status to RTBC, if it works.

-Mania-’s picture

Status: Needs review » Reviewed & tested by the community
sgabe’s picture

Title: Custom inline style properties overridden when using CSS Compressor » Custom inline style properties overwritten when using CSS Compressor
Version: 6.x-1.0-alpha2 » 7.x-1.x-dev
Status: Active » Fixed

Committed to HEAD.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

sgabe’s picture

Status: Closed (fixed) » Active

I am afraid we have to revert this commit and find another workaround because this approach ignores the CSS style precedence, see #882960: CSS Mail Style Sheet Overrides for more information.

smk-ka’s picture

sgabe’s picture

Well, I didn't test #796510: Update CSS Compressor for this issue, but I can imagine that it solves this issue too. Did you try it?

sgabe’s picture

I did a quick test and it's not working.

smk-ka’s picture

Yeah, sorry, I missed that issue where the emogrifier update is buried. I've answered this issue's question in the other #796510: without inventing a completely new system, emogrifier doesn't keep inline style properties and always overwrites them. A 'completely new system' could look like retrieving the XPath to all elements with style attribute (before starting to process the CSS styles!) and dynamically adding them to the list of selectors. Since they're full path expressions from the root to the element, they would have the heighest weight and therefore be applied last (after sorting).

smk-ka’s picture

StatusFileSize
new3.32 KB

Voilà, here's a patch that does what I said. For now, it's a patch against the original emogrifier, i.e. if you decide to apply/port it to mime_compress you have to restore the merge order of style attributes first!

sgabe’s picture

smk-ka: Please, would you make a patch against current HEAD?

smk-ka’s picture

Thank god it's friday!

sgabe’s picture

Status: Active » Needs review

Changing status, since we have a patch that needs testing.

sgabe’s picture

Version: 7.x-1.x-dev » 6.x-1.x-dev

@smk-ka: Sorry that it took me so long to review your patch. I just tested it, applies fine and seems to work fine.

sgabe’s picture

Status: Needs review » Fixed

Committed, thanks!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.