This article is for accounts who are using the legacy* Code-Your-Own (CYO) template builder and goes over the different template style controls that you can set for your subaccounts.
Due to the nuances of HTML, it’s crucial that any person copying, adjusting, or writing HTML code is formidably experienced with HTML coding. We do not offer direct support for customer-created code.
What do template style controls do?
Template style controls allow you to control the look and design of the campaigns that your subaccounts create, ensuring that your brand is always represented as you see fit. The varying template style controls include selecting font types, font sizes, text alignment, text colors, and template colors.
When you edit or copy an existing legacy* CYO template in the Brand Manager, the style controls are set and locked within the campaigns that your subaccounts create from that template. Then when any template style controls are applied, all users, regardless of permission level, will see the controls enabled when editing.
There is no CYO equivalent for the drag and drop editor.
Syntax table for CYO templates
The following table is for users who have created a CYO template using the legacy* template builder. Some rules to remember:
- To lock styles and colors, you’ll want to insert the template tags
[% locked_styles %]and[% preferred_colors %]within a<body>tag. - Within those tags, up to 6 colors can be set to display in the editor, with the option of disabling other colors from being selected.
- Additionally, you can lock style toolbar controls for P, H1, H2, H3, H4, and Quote, as described in the table below.
| Style tool | Keyword | Toolbar visibility |
|---|---|---|
| Bold | bold | visible, disabled |
| Italic | italic | visible, disabled |
| Underline | underline | visible, disabled |
| Unordered list | ul | hidden |
| Ordered list | ol | hidden |
| Indent | indent | hidden |
| Outdent | outdent | hidden |
| Align left | align-left | visible, disabled |
| Align center | align-center | visible, disabled |
| Align right | align-right | visible, disabled |
| Align justify | align-justify | visible, disabled |
| Font family | font-family | visible, disabled |
| Font size | font-size | visible, disabled |
| Text color | color | visible, disabled |
| Text background color | highlight-color | visible, disabled |
| Line height | line-height | visible, disabled |
Locked styles and their tags
Locked styles are declared with the template tag [% locked_styles %] and should be placed within a body tag. The tag will have a name attribute that can be one of the following:
normalheader-1header-2header-3header-4quote
Between the opening [% locked_styles %] tag and closing [%/ locked_styles %] tag, add a comma-separated list of all the style controls that you want locked for that element type. For example, if you want to lock your subaccount users’ ability to change bold, italic, underline, unordered, and ordered lists of your H1 style, you would use the following:
[% locked_styles name="header-1" %] bold,italic,underline,ul,ol [%/ locked_styles %]
If all style controls listed above should be locked for an element type, all can be substituted for a comma-separated list as a shortcut:
[% locked_styles name="header-2" %] all [%/ locked_styles %]
Multiple [% locked_styles %] tags can exist (one per possible name attribute). If multiple [% locked_styles %] tags exist in a template for a single element type, the last tag’s rules are applied to that element type.
Locked colors and their tags
To declare a list of preferred colors, use the template tag [% preferred_colors %] and place it within a body tag. Between the opening and closing preferred colors tags, add a comma-separated list of CSS-friendly color strings like so:
[% preferred_colors %] #FFCC00,#ABC123,#0A0A0A,magenta [%/ preferred_colors %]
The comma-separated list should not contain more than 6 colors. If more than 6 are declared, the first 6 will take precedence.
If the list of preferred colors should be the only colors that are available to users, a locked attribute can be added to the tag. The locked attribute’s value can be either true or false, but if the attribute is absent, the value will default to false.
[% preferred_colors locked="true" %] #FFCC00,#ABC123,#0A0A0A,magenta [%/ preferred_colors %]
There should be only one preferred_colors tag per template. If there are multiple, the last-declared tag will take precedence.
* In April 2022, our legacy editor was replaced with a new drag and drop editor. Accounts that existed prior to this change still have access to the legacy editor through their previously saved templates and campaigns, however new, from-scratch campaigns can only be created in the new drag and drop editor. Accounts that were created after this change only have access to the new drag and drop editor. Please refer to our new editor FAQ article for more information.