Watch our crash course in using Skins in Symplify
____________________________________________________
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 send outs 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.
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 send outs 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 through Skins?
Logos
Content
Style
Layout
Scripts
Logos
Here you can upload your logo for header and footer. When you click at e.g. Header Logo, you can add the Image URL (or upload the image), set the Image Dimensions, add a Title to the image, add a Link URL and set an Alignment for the logo.
| top |
Content
The content configurations are suitable for header and footer information, such as how to get in contact with you, information about your business, unsubscribe etc.
Company info
Company info 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 URL and your Organization number.
Email 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 unsubscribe page set in the project settings)
The corresponding text in your emails*:
SMS Unsubscribe
By adding your SMS Unsubscribe text to your configuration you can easily add it to your SMS content.
The configuration parameters are:
Text - Edit your SMS opt out text with your custom keyword and inbox number
Link text - If SMS opt out is managed from a web page, add the link text…
Link URL - … and the URL to your web page.
Open in browser
This is the text for viewing the email in the browser.
The configuration parameters are:
Text - paragraph where you i.e. can describe the issue.
Link text - the linked text for opening the message in the browser (will automatically be linked to the Link URL)
Link URL - handlebar which creates the browser content (will automatically connect to your Link text). Note: no edit is recommended!
The corresponding text in your emails*:
Contact
The configuration parameters are:
Title - header, i.e. Contact us, Customer support, etc.
Text - paragraph with contact information.
Link text - link where you can guide your recipients to i.e. your website (will automatically be linked to the Link URL)
Link URL - the url to i.e. your website (will automatically connect to your Link text)
The corresponding text in your emails*:
The corresponding text in your dynamic web*:
About
The configuration parameters are:
Title - header, i.e. About us, your company name, etc.
Text - paragraph where you i.e. describe your business and purpose.
Link text - text where you can guide your recipients to i.e. your website (will automatically be linked to the Link URL)
Link URL - the url to i.e. your website (will automatically connect to your Link text)
The corresponding text in your emails*:
The corresponding text in your dynamic web*:
Content
Sometimes, you need to have a customized header / footer with text that is not about the company, contact data etc. For this, the Content Parameters give you possibility to add more text to your email or dynamic web through Skins.
*As you can see there is not all Text from Skins in the email. This is because the header template we use, has not handlebars for all content parameters in the code. Depending of the header and footer template you choose, you have the possibility to add more or less text to your header and footer. The parameters used in your chosen header and footer template (either for the email or the page boilerplate) have a border around the input field.
| top |
Style
In the Style section you can define the theme for your boilerplate and upload social media and other icons that you might want to have in your footer.
Theme
Customize your different templates according to your colors, fonts and social media icons. Please note: changes might not apply to all of your send outs.
The boilerplate has different sections: Body (in the example below blue), Header (grey), Content (white), Footer (purple).
The different sections include different type of configurations.
Body
Here you can edit your background color and add a stylesheet for your pages.
If you have minor CSS adjustments to your page boilerplates you can add these on Page CSS.
Content
Here you can edit the background color (the color behind your articles) and set the line height for the content section.
You can also edit the font, text size, color and other styling for your headlines, paragraphs, links and buttons.
Regarding fonts, our recommendation is that you use web safe fonts, e.g. fonts that have full support in all email clients (Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT). However, you can use other fonts as well but if so make sure you always include one fallback font. If you want to have your own font, that is not web safe, in your emails, talk to our support team or your account manager. Click here to read more about custom fonts.
Header
In the Theme header you can style the header section of your boilerplates. The header is the top section of your templates and where you normally place your logo.
You can set the background color, line height, width, edit the font, text size, color and other styling for your header text (if any).
Footer
In the Theme footer you can style the footer section of your boilerplates. The footer is the bottom section of your templates and where you normally place your informational content (read more above).
In our default email boilerplate you can include (social media) icons in your footer (read more below).
You can set the background color, line height, width, edit the font, text size, color and other styling for your footer text.
Tip: If you want to have the header and/or footer in the same width as the content section, you can change the 100% width to 640px (if you have a custom boilerplate, the value can be different):
Icons
You can add social media icons or other icons to your footer.
To manage the (social media) icons you can use these parameters:
Icon Margin Left/Right - the space in pixel on the left and right side of each icon
Icon Margin Top/Bottom - the space in pixel on the top and bottom of each icon
Table Width - the width of the table around the icon. Usually this value is the same as the width for the other footer blocks and does not need to be changes.
Copy all icons - in case you need to add the icons somewhere else, you can copy the handlebar for the icon block
Title - the title of your icon
Link URL - add the URL to your social media page
Icon URL - where Symplify 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.
You can select one of the examples from the dropdown and modify them.
| top |
Layout
You can choose on of our templates for your Email/Page Header and Footer.
If you are not satisfied with our selection, you can order a custom one. Just contact our support team or your account manager.
You can also adapt or add your own code (at your own risk).
Do not forget to backup the current settings before you start changing the code - you might need the backup later.
| top |
Scripts
Head elements/Scripts
Email boilerplates have fixes for certain email client quirks included, but you can add <link> elements e.g. when you use a custom font or other CSS. The content of the <head> elements will be put first.
Add internal style sheet in the CSS input field - but without <style type="text/css">, just add the classes.
Pages always have font-awesome 4, jquery 1.12+ and bootstrap 3 included by default. The content of this config parameter will be put last in the <head> 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.
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.
Remember to backup your current settings before you make changes in Config Data - you might need it.
| top |
Editing a boilerplate containing configuration parameters
Boilerplate 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.emailFooter}}}
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 > Skins or start over with a new block containing the default setup (and delete your old block).
Copy handlebar from Account settings > Skins
We recommend to add a third pair of {} around the handlebar after you pasted it in your boilerplate, especially if you use html code (<br/>, <strong></strong>,<font...) in your input field. Otherwise you will see the html code in your emails, dynamic web pages,...
After you've edited a block containing configurations you need to lock the block in order to view the content with configurations.