Style newsletter with CSS classes

Avatar

By Lesley Sim

updated about 1 month ago
We've added some simple classes to style your newsletter using core Gutenberg blocks.

Important: These styling changes only affect your newsletter HTML. They will not show up on your website or blog. To style your site, you will have to make changes to your site's theme.

Adjust thickness of separator

To adjust the thickness of the Separator block, select the desired separator block and add custom css class “thickness-[pixel]” to the Advanced panel.

For example, if you want your separator to be 5 pixels thick, add "thickness-5". If you want your separator to be 10 pixels thick, add "thickness-10".


Logo image size on mobile

To control image size on mobile manually, you can give a class to the image you want. E.g. “my-mobile-image” and add it to the selected image’s custom CSS class.



Then in custom CSS (Go to Newsletters > Settings > Custom CSS) you can use something like:

@media only screen and (max-width:650px) {
     #template_inner img.my-mobile-image {
          max-width: 100px !important;
     }
}


Keep image width

You can give the class ngl-keep-width to any image you want to keep its size even on mobile and not stretch to full-screen width.

This is a better approach than trying to set a custom class and width for each image separately.

Steps to use this feature are:

  1. Edit image block
  2. Add ngl-keep-width as a class inside Advanced CSS class name


Custom Links Styling

You can style individual links on a newsletter by adding custom CSS classes.

Steps to set custom link styling.

Step 1

Edit the link as HTML, add a custom CSS class to the <p> tag or the <a href> tag.

Step 2

Save the Newsletter post.

Step 3

Navigate to the custom CSS page, and add styling using the custom CSS class you have added to the link.

Result in Email


Add your own fonts

You can now add custom fonts to your email template by adding the following code into the custom css. Be sure to add fallbacks though, as most email clients only recognise basic fonts (e.g. the ones we include in the theme editor).

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body,
body td,
* {
     font-family: 'Roboto', sans-serif;
}

Web fonts aren’t 100% compatible across all email clients.

Generally, the following email clients have good support for web fonts:

  • iOS Mail
  • Apple Mail
  • Android (default mail client, not Gmail app)
  • Outlook 2000
  • Outlook.com app
  • Thunderbird

Learn more about using CSS classes in Newsletter Glue here.


Remove top padding from blocks

If you want to remove the 10px padding from the top of your newsletter. For example, if you have a container or image header that should be flush at the top. Here's how you can do it:

Select your block, then give it a class name. In this screenshot example, the class name is "my-mobile-image".

Then, head to Settings > Custom CSS and add this code:

table.my-mobile-image td { padding-top: 0 !important;
}

Replace "my-mobile-image" with whatever class name you have given to your block.


Change mobile header size in post embed block

To manually change the mobile header size in the post embed block, please use this code:

@media only screen and (max-width: 642px) {
.ngl-article-mobile .ngl-article-title a span {
font-size: 14px !important;
}
}

Change 14px to your preferred size.

Did this answer your question?