ullNewsletter Dev Manual

Layout & Styles

There are two modes:

• Online editable layout (default)
• File based layout

Online Editable Layout

Go to "Newsletter Home -> Manage Newsletter Layout" and create or edit a layout.

Each newsletter layout consists of a html head field (for style definitions) and a html body field.

The rest of the html structure is automatically created by the module.

File Based Layout

This is convenient for developers using an IDE because it supports syntax highlighting, code completion and so on.

Enable the file based layout by opening "/apps/frontend/config/app.yml" and setting "ull_newsletter: use_file_based_layout:" to "true".

Then go to "Newsletter Home -> Manage Newsletter Layout" and create a layout and save. A template is now created in "apps/frontend/modules/ullNewsletter/templates/layout_xxx.html" wheras "xxx" stands for the name of your layout.

Style Tipps

Just use plain simple css statements. The css for a newsletter is always separated from the website css. So use simple selectors.

Example:

<style type="text/css">

  body {
    margin: 0;
    padding: 0;
    font-family: Arial,sans-serif;
    font-size: 13px;
    color: #333;
  }

  h1 {
    font-size: 15px;
    color: red;
  }
  
  a, a:visited {
    font-weight: bold;
    color: red;
  }

</style>

CSS Extraction

Background magic: When you save a newsletter layout the system automatically extracts the css and stores them in files.

Paths:

• /css/ull_newsletter_layout_xxx.css
  
  The plain css for editing with ckEditor
• /css/ull_newsletter_layout_xxx_prefixed.css
  
  A version where each selector is prefixed with the layout name mentioned above. With this trick, we are able to use the newsletter css within the website e.g. with content blocks (see below)

Note: for file based layouts you need to create a newletter for the css to be extracted.

ckEditor

Use the generated css in your ckEditor config.

/web/js/ckeditor_newsletter.js

  // Configure Stylesheets for edit area
  config.contentsCss = [ '/css/ull_newsletter_layout_xxx.css' ];

Content Elements

If you use content elements for inline editing add the widget options "css_class" and "stylesheet" to UllNewsLetterEditionColumnConfigCollection to use the correct css for the preview:

<?php

/**
 * Empty class to be overridden by customer's class in app/...
 * 
 *
 */
class UllNewsLetterEditionColumnConfigCollection extends BaseUllNewsletterEditionColumnConfigCollection
{
  
  /**
   * Applies model specific custom column configuration
   * 
   */
  protected function applyCustomSettings()
  {
    parent::applyCustomSettings();
    
    $this['body']
      ->setMetaWidgetClassName('ullMetaWidgetContentElements')
      ->setWidgetOption('element_types', array(
        'newsletter_preface' => __('Preface'),
        'newsletter_block'   => __('Content block'),
      ))
      ->setWidgetOption('css_class', 'newsletter_example_company')
      ->setWidgetOption('stylesheet', '/css/ull_newsletter_layout_example_company_prefixed.css')
    ;
           
  }
  
}

The syntax for the css_class option is: "newsletter_$LAYOUT_SLUG"
Example: The layout is called "Example Company", therefore the slug is "example_company" and the css_class "newsletter_example_company".

The correct path for the stylesheet option is  "/css/ull_newsletter_layout_$LAYOUT_SLUG_prefixed.css".
For our example: "/uploads/css/ull_newsletter_layout_example_company_prefixed.css"