Can I set a default colour and padding for buttons in emails?

(0) Share

Report

Posted on by SarahGrant

I'm looking for where I can set the default brand colour for my buttons in emails.

When you drag a button in, it's got preset styles. How can I edit those?

Would love to have the padding set so I don't have to change it for every button.

Thanks
Sarah

I have the same question (0)

All responses (6)

Answers (1)

Verified answer

Nya 29,060 on at

Like (0)

Report

Hi Sarah,

There is no OOTB way to set the default color.

Please refer to the following documentation to uniformly modify the Button's Background Color in the HMTL designer after designing the entire email

Use custom attributes to enable designer features in templates (Dynamics 365 Marketing) | Microsoft Docs

The CSS style cannot be set in the <head> because the button from drag-and-drop box is self-contained with a background color attribute.

You can also post your proposal in Ideas forum to drive it to be voted and improved.

Was this reply helpful? Yes No
KE Communication bh 105 on at

Like (0)

Report
Is there a way to make it work via the meta tags?

For example:

<meta type="xrm/designer/setting" name="button-color" value="#ffffff" datatype="color" label="Button color">

<meta type="xrm/designer/setting" name="button-textstyle" value="#000000" datatype="color" label="Text style">

<style>

[data-editorblocktype=Button]>a.buttonClass {

background:/* @button-color */ #ffffff /* @button-color */;

color: /* @button-textstyle */ #000000 /* @button-textstyle */ ;

}

</style>

Was this reply helpful? Yes No
Suggested answer

Nya 29,060 on at

Like (0)

Report

Hi KE Comm,

Unfortunately, the code you provided can only change the color around the button. For example, I changed a rather obvious color and here is the effect.

It is caused that when a button is created, the style will be created individually, which will override the above style.

So modify or delete the background-color for each button is required.

Was this reply helpful? Yes No
KE Communication bh 105 on at

Like (0)

Report

"So modify or delete the background-color for each button is required."

unfortunately, that is not very user-friendly...

Thanks for the information!

Was this reply helpful? Yes No
Suggested answer

icrheat 10 on at

Like (0)

Report

[quote user="KE Comm"]
"So modify or delete the background-color for each button is required."

unfortunately, that is not very user-friendly...

Thanks for the information!
[/quote]
Hi KE Comm,

I tried out your code with some modifications and it actually works for me (at least for modifying the color), the key was to remove the ">" and put the !important tag.

[data-editorblocktype=Button] a.buttonClass {

background-color: /* @grey */

            #C2c2c2

            /* @grey */

            !important;

color: #ffffff !important;

}

The only caveat is that you wouldn't be able to directly edit the button's color clicking on the button block and pulling up the designer panel, since it would be overridden by the code snippet above (but if you're using meta tags, this is a way to circumvent that in case a user needs to go in and update it).

Nya, I'm wondering if there's a conflict in the code you tested where perhaps the parent element also has the same class? I'm interested in why it's affecting the entire background for you.

Thank you!

David V.

Senior Implementation Consultant

Coffee + Dunn

Website | LinkedIn

Was this reply helpful? Yes No
KE Communication bh 105 on at

Like (0)

Report

thanks, but I am not looking for a workaround. I have one. The code I provided above is incomplete. It was just asuggestion of how maybe one should be able to achieve this"Button Override", including the values in the properties column.

I have a CSS code that works to override the button style. I have another problem.

This custom style is not represented in the properties column in the editor.

E. g. I force the button to be red and square as per corporate design, the properties tab however displays that the button is blue with rounded corners.

What I need is to enter red and square for example in an editor settings file and every time the user adds a button it will have the look of their corporate design and those values represented in the properties column. Which is exactly what the OP is asking for, I think.

Was this reply helpful? Yes No