{% extends 'scipost/base.html' %} {% load static %} {% block breadcrumb %} {% endblock %} {% block pagetitle %} : Newsletter Help {% endblock pagetitle %} {% block content %}

Newsletter Help

Description

The Newsletter content is written in HTML. You can use all the HTML tags proper for writing articles, i.e. most tags that are not embedding external content like scripts or iframes. You may style the content using CSS inline styles and classes.

Media

You can upload images to be embedded in the newsletter. You may upload images through the form at the bottom of the Newsletter edit page, after which you may insert the embedding code by clicking on the image thumbnail. At the present moment, we recommend that the images are hosted on our server instead of linking to external resources.

Styling

Changes

The default browser CSS is overridden in a few places. A short list of the changes is below:

Classes

The styling may be changed via adding CSS classes. These are placed inside an element like <div class="class1 class2 [...]">[...]</div>.

Components

Here are some pre-built components that you can use in your newsletter.

News Item
        <div class="item">
          <h2 class="header">
            My Title Here
          </h2>
          
          <div class="content">
            <img class="float-right p-3" src="/static/scipost/images/logo_scipost_RGB_HTML_groot.png" 
            alt="scipost logo" width="180" height="55" />

            <p>
            Commodo consectetur ullamco occaecat quis excepteur minim nostrud quis. 
            Pariatur ut est non quis adipisicing elit mollit sunt sunt aute qui laborum labore. Anim proident reprehenderit amet. 
            Ea dolor aliqua ad irure adipisicing irure quis eiusmod sint id anim duis adipisicing. 
            Lorem ut laboris aliqua ex commodo adipisicing esse exercitation tempor ad esse elit. 
            Pariatur ea ea est enim nisi incididunt tempor eiusmod voluptate consequat cillum culpa.
            </p>
          </div>
        </div>
      

My Title Here

scipost logo

Commodo consectetur ullamco occaecat quis excepteur minim nostrud quis. Pariatur ut est non quis adipisicing elit mollit sunt sunt aute qui laborum labore. Anim proident reprehenderit amet. Ea dolor aliqua ad irure adipisicing irure quis eiusmod sint id anim duis adipisicing. Lorem ut laboris aliqua ex commodo adipisicing esse exercitation tempor ad esse elit. Pariatur ea ea est enim nisi incididunt tempor eiusmod voluptate consequat cillum culpa.

Colors

Color classes are built in two parts separated by a hyphen. The first part is the attribute whose color is changed, and the second part is name of the color. The attribute is either bg for background color or text for text color. The available colors are:

Name Class Color
Orange {attr}-orange #f6a11a
Light Blue {attr}-light-blue #c3d7ee
Blue {attr}-blue #6884c2
Dark Blue {attr}-dark-blue #002b49
Black {attr}-black #f0f0f0
Light Gray {attr}-light-gray #f0f0f0
White {attr}-white #ffffff

Therefore, for a box of orange text and dark-blue background you could write <div class="bg-dark-blue text-orange">This is a box</div> This is a box

Images

There are a few alignment classes for images. These are float-left and float-right for floating the image to the left or right, and float-center for centering the image.

Class Alignment
Float left float-left
Float right float-right
Center float-center

Text alignment

By default the text is justified. You can change the alignment by adding the class text-left, text-right, or text-center.

Alignment Class Display
Justified (default) text-justify
Ad est excepteur aliquip. Est fugiat laboris consequat Lorem reprehenderit consectetur.
Left text-left
Ad est excepteur aliquip. Est fugiat laboris consequat Lorem reprehenderit consectetur.
Right text-right
Ad est excepteur aliquip. Est fugiat laboris consequat Lorem reprehenderit consectetur.
Center text-center
Ad est excepteur aliquip. Est fugiat laboris consequat Lorem reprehenderit consectetur.

Font size

The font size can be changed by adding the class fs-1 to fs-6, where 1 is the smallest and 6 is the largest. The default font size is fs-3 (1rem).

Size Class Display
0.5rem fs-1 This is my changed font size
0.75rem fs-2 This is my changed font size
1rem fs-3 This is my changed font size
1.25rem fs-4 This is my changed font size
1.5rem fs-5 This is my changed font size
2rem fs-6 This is my changed font size

Spacing

The spacing classes are built in two parts separated by a hyphen. The first part is the attribute whose spacing is changed, and the second part is the size of the spacing. The attribute is either m for margin or p for padding, and is optionally followed by the direction of the spacing: t for top or b for bottom, r for right or l for left, and x or y for both horizontal or vertical. The available sizes are numbers from 0 to 4, where 0 is no spacing and 4 is the largest spacing (1.5rem). Therefore mt-3 would be a margin of size 2 at the top, px-3 would be a padding of size 3 in the horizontal direction, and m-0 would be no margin at all.

{% for d,direction in directions.items %} {% for t,type in types.items %} {% if forloop.counter == 1 %}{% endif %} {% endfor %} {% endfor %}
Direction Type Sizes
{{ direction }}{{ type }}
{% for s in sizes %} {% include "mailing_lists/_spacing_box_guide.html" %} {% endfor %}
{% endblock content %} {% block headsup %} {% endblock headsup %}