Defining button styles in your templates

Summary

Just like default font styles, button styles can be managed by the style manager, and those styles can be applied to buttons throughout your campaign.

Whilst new button styles can't be added or removed within the style manager itself, you can do this by going into your style sheet code and manually adding or removing your button styles.

Finding your button styles

Find your button styles by going to UtilitiesEdit Source and locating the last style block in your campaign. It should have the ee-styles attribute, just like the below.

<style ee-styles="" ee-render="inline">
/* Auto-generated style block.  Only edit if you know what you are doing! */
.base-styles { color: rgb(56, 75, 106);
...
</style>

Towards the bottom of this style sheet, you should see your button styles. Your default button style will look a little like this:

.button-td.Default.definition { color: rgb(255, 255, 255); ... }

It will be followed by five further styles which define how your button will look. All of these are required, and if you edit one of these, you'll need to also edit the rest of them or you may get unpredictable results.

We recommend not editing these styles directly but to use the button style manager itself.

Add a new button style

To add a new button style, copy the whole of the first (default) rule only, as above (the rule that starts with .button-td.Default.definition). Then paste this at the bottom of this <style> block.

Next you'll need to rename 'Default' to give it your own name, such as:

.button-td.MyNewButton.definition { color: rgb(255, 255, 255); ... }

Now return to Edit design mode, click in some text (or select a button), select Styles picker, and then click Manage my styles at the bottom of it.

Your new button will appear towards the bottom of the list, and will be titled 'MyNewButton' (or whatever you've named your new button). Click on it and edit it as you wish, and click Apply when you're happy.

Important

If you try and apply your new style before you edit the style in the style manager, the style won't work. In fact, your button may lose all styles completely. This is because the additional five styles (as mentioned above) are only generated once you have edited your new button's styles within the style manager first.

Removing a button style

If you wish to remove a button style, you should remove the definition, in the same way as outlined above. For example, if you wish to remove the button we created in the steps above, then find this line:

.button-td.MyNewButton.definition { color: rgb(255, 255, 255); ... }

Remove it completely from the <style> block in Edit source. You'll also need to remove the following five rules that also define this button style.

Alternatively, you can simply go into the style manager itself, edit any style, and click Apply.  The rest of the button's rules will now be automatically removed.

Note that you can't undo this operation, and any buttons that have this style applied will have all button styles removed - they won't automatically revert to the default button.

Editing button styles within the source editor

You can directly edit your button styles within the source editor itself, but this isn't recommended. If you do wish to do this, then please note the following:

  • The .definition class is only used in the style manager to generate the following five rules which actually style the button. If you edit this rule, you need to edit the other five rules accordingly.
  • Adding extra styles may be removed if someone goes into the style manager and edits any given style. If you do wish to do this, please create your own style block and add your styles separately.
Have more questions? Submit a request

Comments

Powered by Zendesk