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:
-
Removed margins from
h1
-h6
tags.
-
Removed margins and padding from
p
tags.
Default color is SciPost dark blue (#002b49) and the text is justified.
-
img
tags span the entire height/width of the line when space is available.
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>
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.
Direction |
Type |
Sizes |
{% for d,direction in directions.items %}
{% for t,type in types.items %}
{% if forloop.counter == 1 %}{{ direction }} | {% endif %}
{{ type }} |
{% for s in sizes %}
{% include "mailing_lists/_spacing_box_guide.html" %}
{% endfor %}
|
{% endfor %}
{% endfor %}