Dynamics 2013 is known pretty well by this point for having one of the worst template designers of pretty much any CRM system and people aren’t wrong, it gives little to no options, no easy way to modify things and really it is quite a burden doing anything with it. However there is a solution for those of you that are remotely proficient in HTML and CSS.

Although CRM itself offers no way of modifying the HTML and CSS of email templates, browsers do. This is thanks to the fact that CRM basically takes a copy of anything that is inside the editor and that is what the templates are created from.

Due to all popular browsers having an HTML editor built in this means that we can modify the HTML using just the browser itself or using it to pull out code to edit in our favourite programs before applying any updates.

I’ll briefly cover modifying HTML in Internet Explorer, Firefox and Chrome running on their latest versions. For those of you running Edge as your preferred browser simply follow the IE portion of this post as they use the same style and the steps should be almost exactly the same.

Modifying HTML using Internet Explorer

Although I find IE and Edge have the clunkiest and least beginner friendly developer tools built in they do still have the same functionality to this is still a viable route for those of you that use IE due to company policy or personal preference.

Opening Developer Tools

1. Open the email template you will be modifying in CRM so that you have the editor window open.
2. Press F12 on your keyboard or click on the cog icon at the top right of IE followed by selecting ‘F12 Developer Tools’ in the menu that opens. (Modifying templates requires pressing F12 due to a reduced interface but I thought this may be helpful to know regardless)
3. Providing you’ve not used it before you’ll likely be seeing something along the lines of the image below which isn’t too user friendly. I would suggest clicking the Unpin button (CTRL + P) found on the right of the dev tools (highlighted in red below) which will open the editor in a new window so it can be resized.
4. Now click the Select element button (CTRL + B) found on the top left of the dev tools and hover the cursor over the top line of the template editor until the template editor box turns green similar to the image below then click to select that element. This focuses the editor so that only the code in the box is focused making it easier to edit.
5. Providing the steps above were done correct your editor will have highlighted a chunk of code similar to below. Depending on your preference you can either edit individual sections of your template by right clicking elements underneath that chunk of code and selecting ‘Edit as HTML’ or you can edit the chunk of code highlighted when you selected the edit box in order to modify the entire template which is handy if you prefer modifying code in a different manner.

Modifying HTML using Chrome

Although I don’t often use chrome the process is very much the same as the above two browsers.

Opening Developer Tools

1. Open the email template you will be modifying in CRM so that you have the editor window open.
2. Press F12 on your keyboard or click on the hamburger icon at the top right of chrome followed by hovering over More Tools then selecting Developer tools (F12 for dev tools, CTRL + SHIFT + I for Inspector specifically)
3. Same as IE if you’ve not used this before I would suggest showing the editor in a different window for ease of use by clicking the elipsis button at the top right of the editor followed by (highlighted red below)
4. Now click the Inspect Element button found on the left of the editor and either hover over the top line of the template edit box till the box turns blue to select the entire edit box plus code or hover over the part of the email you want to modify until it shows it being selected then left click.
5. You can now modify the code using Firefox’s editor or right click on the code you want to modify and select Edit as HTML and simply modify it in whatever program you prefer before pasting it back in.

Modifying HTML using Firefox

Opening Developer Tools

1. Open the email template you will be modifying in CRM so that you have the editor window open.
2. Press F12 on your keyboard or click on the hamburger icon at the top right of Firefox followed by selecting ‘Developer’ then Inspector (F12 for dev tools, CTRL + SHIFT + C for Inspector specifically)
3. Same as IE if you’ve not used this before I would suggest showing the editor in a different window for ease of use by clicking the ‘Show in separate window’ button found on the right of the editor. (highlighted red below)
4. Now click the Inspect Element button found on the left of the editor and either hover over the top line of the template edit box till the box turns blue to select the entire edit box plus code or hover over the part of the email you want to modify until it shows it being selected then left click.
5. You can now modify the code using Firefox’s editor or right click on the code you want to modify and select Edit as HTML and simply modify it in whatever program you prefer before pasting it back in.