blog-symplify.png

© 2000-2019 Symplify

All rights reserved.

Privacy Policy | Anti-Spam Policy

GENERAL

Designing your Skins

Using Skins, account administrators can manage default content and styling for all your boilerplate from account settings.
Skins is mainly for basic styling, header and footer information but can also be customized for other elements in your boilerplate.

Skins will help you to quickly update i.e. the logo in all your sendouts at the same time. Any changes to your configuration will update your boilerplate, all your drafts, autosends and transactionals immediately.

The purpose of Skins is to make it easy for you to keep your boilerplate and your messages and pages up to date. And give the account administrators more control over the actual basic content.

Requirements

Skins is applicable on boilerplates corresponding to the skin configuration parameters. All Symplify default boilerplates are equipped with these parameters but customized boilerplates can also correspond to the settings. Contact our support if you are unsure.

For page templates you must use the page theme “Theme from Template Configuration” in order to use the styling configuration.

Only Symplify account administrators can edit the default settings.

Understanding the layers

Let's say you're creating an email draft. What you see when you open the email editor is based on your boilerplate combined with your skin settings saved on project and/or account level.  

It's a layer cake starting with the boilerplate as your base framework where all your block structures are being kept. The next layer is about the design and text content which will first fetch the information from what you have selected on the account layer in Skins and then check if you have saved any overrides on project level.

Output - Project A
Output - Project B
Skins - Project A
Skins - Project B
Skins - Account level
Boilerplate

When creating an output, like a email, you
choose a project and then a boilerplate – the skins settings are then applied to the output.

Skins can then be edited per project. These
settings will override the account settings.

Skin is the design of you output, like fonts,
color, size, logo and info text. It’a layered on
top of the boilerplate. Set the basic settings here.

The boilerplate is the generic structure of the output. Set up and arrange the blocks you want.

Edit skins
We recommend that you start focusing on setting up your Skin on account level and then continue to project level if wanted.

When you want to edit the Skin for a specific project you simply choose the project in the dropdown.


Project level is useful if you want to for example have different logos for different countries or brands, or default texts in different languages.

Note that projects without any specific Skin will use the settings on account level.

When you save your configuration, the settings are immediately rolled out to all of your corresponding templates, drafts, automatic sendouts and pages. 

Next to the Save button you find an Options menu.

From this menu you can:

  • Backup settings currently in use – this will provide you with a file containing the raw data for your latest saved Skin on the selected level (account or project).
    The raw data can be pasted at the bottom of the Skin configuration page to restore the backed up version.

  • Use default settings – this option will clear your customized Skin and instead use the Symplify default Skin.

  • Remove all settings – this option will leave all Skin configurations empty. (Only available on account settings level.) Or…

  • Remove Project overrides – this option will clear all project specific Skin configurations and use the settings on account level. (Only available on project level.)

Affected content and styling

So, what type of content and styling can be managed throug Skins?

Basics

The basic settings are only included as default in the boilerplates for the Print channel but can of course also be included in all other channels as well.
Here you add your home page and your organization number.

Informational content

The content configurations are suitable for footer information, such as how to get in contact with you and information about your business.

Unsubscribe

Your email disclaimer text that should describe why your recipients are receiving your emails.

The Skin parameters are:

  • Text – Informational text i.e. about why your recipients are receiving your emails

  • Link text – Unsubscribe link text (will automatically be linked to the Link URL)

  • Link URL – The URL or Carma handlebar that will take your recipients to your unsubscribe page (will automatically connect to your Link text).
    By using {{message.unsubscribeUrl}} the settings on your projects will be used, e.g. you don’t need to update your template configurations on project level to continue using your project unsubscribe settings.

The corresponding text in your emails:

Theme

Customize your different templates according to your colors, fonts, logos and social media icons.
You can also upload external stylesheets. Please note: changes might not apply to all of your sendouts.

 

The right image shows the different sections of a template.

Blue – header section
Pink – body section
Yellow – content section
Green – footer section

The different sections include different type of configurations. Read more on each section below.

Body

Here you can edit your background color and add a stylesheet for your pages.

If you have minor CSS adjustements to your page templates you can add these on Page CSS.

Social media

You can add default social media icons och links to your footer. Choose one of the presets from the dropdown and use them as they are or modify them.
To manage the social media icons you can use these parameters:

  • Title – the title of your icon

  • Link URL – add the URL to your social media page

  • Icon URL – where Carma finds the image, upload you logo by clicking the cloud icon. You can preview your current image by clicking the eye icon.

  • Icon dimensions – If you want to set the width or height for your icons you need to write the wanted pixels in the boxes. Otherwise, leave them empty.

Head elements/Scripts

The contents of this config parameter will be put last in the page element. You can include any elements (i.e meta, script, link, style), but be sure to check that the included libraries are compatible with existing libraries. Pages always have font-awesome 4, jquery 1.12+ and bootstrap 3 included by default.

Config Data

Here you can view and edit the raw data for your configurations.
If you have a saved backup of a previous configuration that you want to use instead of your current, you can paste the raw data here and hit save.

You can also customize your own parameters and add to the configuration.

Editing a template containing configuration parameters

Template blocks containing configurations are not editable by default. And, if set up properly, you shouldn’t need to edit the configurated content at all when i.e. sending an email.

You can however unlock the block to add other content. To unlock a block, you hover it and click on the magnifier glass in the upper left.

And then uncheck “Lock this block” in the inspector.

When unlocking the configuration handlebar for the section will be revealed, i.e.:

{{{config.data.templates.pageFooter}}}

Heads up! Any changes to a handlebar may disable the connection to its configuration content.

You can delete handlebars you don’t want to include in i.e. your footer section. Or of course move them within the block. If you have deleted a handlebar and want to replace it. You can copy the handlebar from Account settings > Template configuration or start over with a new block containing the default setup (and delete your old block).

Copy handlebar from Account settings > Template configuration

After you’ve edited a block containing configurations you need to lock the block in order to view the content with configurations.