Hello,

when I use an external CSS file like global.CSS with which I do the normal formatting of my website with the Omega theme how do I change these CSS markup into in-line styles for your newsletter module?
And on top of that I only want the nodes' content and not the menus and footer and everything else from my website being used within my newsletter that I will paste into CiviCRM.

Many thanks and greetings from Germany

Gerhard

CommentFileSizeAuthor
#3 newsletter_settings.png33.9 KBlolcode
#3 newsletter_content_type.png30.55 KBlolcode
#3 newsletter_display_settings.png30.4 KBlolcode
#3 newsletter_result.png111.54 KBlolcode
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

nubeli’s picture

nubeli CreditAttribution: nubeli commented

Hi Gerhard,

You can probably include the global.css file in the newsletter_export.tpl.php template and then in a print statement include it with the output. But you'll still need to have a way of making it inline since email programs are terrible at rendering css properly. I came across this snippet http://pastebin.com/swXTzT19 recently on how email programs expect the final newsletter - a template that you can adapt.

You can read more about some ways to do it here: http://www.freeform.ca/en/blog/updated-recipe-building-newsletters-drupal-7

One way of making the css inline is to run it run your html output through a third-party program like http://premailer.dialect.ca/, http://inlinestyler.torchboxapps.com/

Or you can adapt the newsletter_export.tpl.php to call a script like https://github.com/tijsverkoyen/CssToInlineStyles so that it will convert them to inline while exporting.

Hopefully we'll get time to make this process more intuitive in the future, but it may still rely on a third-party script like CssToInlineStyles which would have to be uploaded to the libraries folder (in the future). For now you can't go wrong with using the third-party website.

Störtebeker’s picture

Störtebeker CreditAttribution: Störtebeker commented

Hello, due to the holiday season here in Germany I just got back to work... :)

First many thanks for your reply. Great info.
When you said: "include the global.css file in the newsletter_export.tpl.php template and then in a print statement include it with the output"

Unfortunately I don't know how to include it with the output in a print statement.

Can you do me the favor to give an example how that statement looks like and where it has to be inserted (in the php template?) Many thanks for your support, I really appreciate it. Greetings from Germany -Gerhard

lolcode’s picture

lolcode CreditAttribution: lolcode commented
FileSize
newsletter_result.png111.54 KB
newsletter_display_settings.png30.4 KB
newsletter_content_type.png30.55 KB
newsletter_settings.png33.9 KB

Using a CSS Inliner is quite well explained in the README file.

What we don't show is an example of making a custom template. Here is a full example:

Assume I create a content type called newsletter that has a title, body as usual. I also add an entity reference field that allows 5 links to the basic page type.

See these screenshots for the setup:
admin settings
content type
display settings

Then you can setup you newsletter-export.tpl.php template as below:

<?php
/**
 * @file newsletter_export.tpl.php
 * Template to output a node as html for newsletters
 *
 * Node type specific templates can be created by copying to: newsletter-export--nodetype.tpl.php
 * Be sure to clear your theme registry for the new template file to be found
 * 
 * - $raw_markup: The basic html markup for all fields you would get from the content portion of a node.
 * - $fields: An array of all fields belonging to the node including body
 * - $node: The entire node object
 */
?>

<html>
<head></head>
<body>
<h1 style="font-size: 16px; font-weight: bold; color: navy; margin-bottom: 10px;"><?php print $fields['title']; ?></h1>

<div style="font-size 10px;"><?php print $fields['body']['und'][0]['safe_value']; ?></div>
<hr/>
<?php foreach ($fields['field_news_latest_pages']['und'] as $delta => $news_item): ?>
    <?php $ent = $news_item['entity']; ?>
    <div style="font-size 10px; border-bottom: 1px dotted #808080;">
        <?php print $ent->body['und'][0]['safe_value']; ?>
    </div>
<?php endforeach; ?>
</body>
</html>

When you download this newsletter export the css is embedded around the fields exactly as specified in the template and you will not see the site header. The result looks like this with the embedded styles:
(You can of course embed any other header you want in the newsletter template.)

results

lolcode’s picture

lolcode CreditAttribution: lolcode commented
Component: Miscellaneous » Documentation
Status: Active » Closed (fixed)

Committed this documentation to the README file: Commit abe81c3

freeform.steph’s picture

freeform.steph CreditAttribution: freeform.steph commented
Issue summary: View changes

Here is another example, for those using Display Suite:

Since the module exports the html as generated by your theme's templates, the trick to making sure your DIsplay Suite layouts are respected is to make sure to include a template in your theme for each Display Suite layout needed for your mailing.

When using Display Suite's 2-column stacked layout (for example), you will see in your export that the classes are in place (such as 'group-right' and 'group-left') - what you'll want to do is replace these classes with their inline equivalent. There are a couple of ways you can achieve this:

Method 1: manually add the desired css to your template

1. copy 'sites/all/modules/contrib/ds/layouts/ds_2col_stacked/ds-2col-stacked.tpl.php' to 'sites/all/themes/YOUR_THEME/templates' --- Re-name the file 'ds-2col-stacked--node-newsletter-export.tpl.php' (so that it is used only by the export display)

2. anywhere you see a class you'll want to replace it with the css inline style equivalent, for example:

Change:

<<?php print $left_wrapper ?> class="group-left<?php print $left_classes; ?>">

To:

<<?php print $left_wrapper ?> style="float: left; width: 50%;">

Tip: to find out the css used, you can either open 'sites/all/modules/contrib/ds/layouts/ds_2col_stacked/ds-2col-stacked.css' or, if using the inline settings of the Newsletter Export module, while viewing your newsletter on the web, right-click on an element and select 'inspect element' to view the active css in Chrome, or use Firebug in Firefox.

Method 2: implement CssToInlineStyles, automated script for converting css to inline style (at some point this may get added as a feature of the Newsletter Export module.)

1. go to https://github.com/tijsverkoyen/CssToInlineStyles and download the zip to sites/all/theme/YOUR_THEME/script

2. unzip and rename the folder from 'CssToInlineStyles-master' to 'CssToInlineStyles' (such that the file needed is located at 'sites/all/themes/YOUR_THEME/script/CssToInlineStyles/CssToInlineStyles.php'

3. create a new file at 'sites/all/themes/YOUR_THEME/css/newsletter.css', in this file include any css that you would like applied to your export (copy anything you like from your theme's css file(s) or customize to your liking).

4. open 'sites/all/modules/contrib/ds/layouts/ds_2col_stacked/ds_2col_stacked.css' and copy and paste its contents into your new newsletter.css file, edit the css to remove the ">" symbols (at this time CssToInlineStyles does not appear to understand this command).

5. copy 'sites/all/modules/contrib/newsletter_export/newsletter-export.tpl.php' to your theme's templates directory

6. in 'newsletter-export.tpl.php', change:

print $raw_markup

To:

$mytheme = drupal_get_path('theme', 'YOUR_THEME');

require_once $mytheme. '/script/CssToInlineStyles/CssToInlineStyles.php';

use \TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;

// create instance
$cssToInlineStyles = new CssToInlineStyles();

$html = $raw_markup;
$css = file_get_contents($mytheme.'/css/newsletter.css');

$cssToInlineStyles->setHTML($html);
$cssToInlineStyles->setCSS($css);

// output
echo $cssToInlineStyles->convert();