Blocks & Themes

So far, we have been talking about building blocks. However, in order for a block to be available for use in building a template, it needs to be added to a theme – a styled collection of blocks that will be available in the template editor.

A theme defines basic style elements for its blocks. In the block editor, you can preview how your block will look in different themes by selecting ‘Preview’ in the Themes tab

• To add your block to a theme, click on the slider on the right to set it to 'Active'

Blocks can also be added to a theme:

• From the blocks page — add one block to multiple themes
• From the themes page — add multiple blocks to one theme

A DML block can have different styling depending on the theme

dys-attributes

Attributes can be set through the user interface in the Standard tab or with DML in Advanced tab

• Define default styles for dys-body, dys-title, dys-text, and dys-a (links)
• Use dys-palette to create a color palette of up to 12 colors for your theme.
• These can be selected in the email editor for elements using the editable-styles attribute.

dys-font

Using <dys-font> allows you to add custom fonts to your theme

• Eg. <dys-font href='https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap' name='Nunito Sans' />

When using web fonts, be sure to define a web-safe fallback font defined for users who aren’t able to view web fonts

• Eg. font-family='Nunito Sans, Arial, sans-serif'

dys-style

CSS defined inside <dys-style> will automatically be rendered into the head tag of the template.

• You can define inline styling with <dys-style inline>
• Styles will be inlined on the outermost HTML element of a DML abstraction. You may need to look at the exported HTML to find the correct HTML element to target.

You can add CSS classes to most DML elements with the attribute css-class=”class-name”

Putting it All Together

Your Theme DML:

<dys-font href='https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap' 
  name='Nunito Sans' />
<dys-attributes>
  <dys-body background-color='#FFFFFF' max-width='600px' />
  <dys-title color='#785589' font-family='Nunito Sans, Arial, sans-serif' 
  font-size='36px' line-height='46px' />
  <dys-text color='#121212' font-size='16px' line-height='18px'/>
  <dys-a color='#458FFD' text-decoration='none' />
  <dys-palette colors='#458FFD,#1B6ACC,#00BDB1,#008A92,#785589,#634771'/>
</dys-attributes>
<dys-style>
  .button a{
    background-color: #00BDB1 !important;
  }
</dys-style>
<dys-style inline>
  .highlight-text {
    background-color: #458FFD !important;
    color: #FFFFFF !important;
  }
</dys-style>

Your Block DML:

<dys-block>
  <dys-row>
    <dys-column>
      <dys-title>
        Changing Themes
      </dys-title>
      <dys-text>
        The same <span class='highlight-text'>DML block</span> will look different 
        in different themes. Check out our 
        <a href='https://docs.dyspatch.io/blocks_and_themes/styling_with_themes/'>
        Knowledge Base</a> for more information!
      </dys-text>
      <dys-button align='left' css-class='button' href='https://example.com/'> 
        Click Me
      </dys-button>
    </dys-column>
  </dys-row>
</dys-block>