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.
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
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.
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?
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.
The content configurations are suitable for footer information, such as how to get in contact with you and information about your business.
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.
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.
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.
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.:
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.