Creating button styles in EasyEditor

Summary

Please note: This information also applies to EasyEditor for landing pages.

Button styles are saved CSS rules that you can apply to buttons from the EasyEditor user interface.

By creating button styles in your templates, you make sure that your users are using a consistent style in their designs. Using a consistent style helps your contacts to recognise you and reinforces your brand or company image.

To create and save new button styles, you must add CSS to the source code of your template.

Please note: After you've created a new button style, we recommend that you use the style manager to edit that button style instead of editing it in the source code.

If you want to stop your users from editing your styles, you can lock them.

Finding the CSS rules for your button styles

Go to UtilitiesEdit Source and find the last internal stylesheet that has an ee-styles attribute. The button style rules are at the bottom of this stylesheet.

<style ee-styles="" ee-render="inline">
</style>

Editing the default button style

The .button-td.Default.definition rule is the 'Default style' in the 'Styles' dropdown and it is applied by default to all new button building blocks.

EasyEditor_default_button_style.png

Your default-button-style rule looks like this:

.button-td.Default.definition {}

If you edit the .button-td.Default.definition rule, you must make sure that the following five rules below it have the same values for any properties that they each have in common with the .button-td.Default.definition rule. Otherwise, any properties in the .button-td.Default.definition rule are ignored when you apply the 'Default style' in the style manager.

.button-container {}
.button-container .button-wrapper {}
.button-container .button-td {}
.button-container .button-td .button-a, .button-container .ee_editable.button-a {}
.button-container .button-td .button-a a, .button-container .ee_editable.button-a a {}

Automatic updates to these five rules

To automatically create or update the five rules below a button style definition rule, edit only the button style definition rule, then edit that style in the style manager. 

Creating and saving a button style

  1. Copy the entire default button style rule and paste this rule at the bottom of the internal stylesheet that has the ee-styles attribute
  2. Name your button style by changing Default to your chosen name:

    .button-td.MyNewButtonStyle.definition {/* make sure you copy all of the properties from the default button style rule and change them to what you want */}
  1. Click Edit design, and click a button
  2. In the 'Styles' dropdown, click Manage my styles
  3. Your new button is displayed at the bottom of this list

Before applying a new button style

Before you apply your new button style, you need to edit it in the style manager. Otherwise, the button style won't work.

EasyEditor_custom_button_style.png

Removing a button style

To remove a button style, delete the button style definition rule and the five rules below it from the internal stylesheet that has the ee-styles attribute.

Important

You can't undo this action. Any buttons that had this style applied to them will not automatically have the default style applied to them.

Have more questions? Submit a request

Comments