Dynamics CRM/365 Themes – Finding Your Colour

Trying to create a Theme in Microsoft Dynamics CRM/365 can be a frustrating experience if you’re looking to align your system aesthetically with the branding of your Organisation. Microsoft gives us the ability to alter the colour of a variety of system elements. Eleven in total. The element most frequently modified is the main Navigation Bar Colour. Depending on the primary and secondary colours of your logo, Microsoft blue, or black, may be a bit of an eye sore when contrasted with your logo.

If you’ve attempted to customise a Theme, you will know there are no colour pickers available. You are required to input the hexadecimal value of the colour you want. How many people know the hexadecimal value of the colour they require? I would guess, not many. One solution is to google ‘colour picker.’ There are a vast number of sites that allow you to drag your colour picker around, and the hexadecimal value of the selected colour is returned. In fact, Google provides a colour picker built into their search engine.

screen-shot-2016-12-22-at-18-49-49-2

That’s all well and good, but often, I find, you can’t quite locate the exact required colour. Even if the colour is only slightly out, this can still affect the look and feel of your branded system.

Another option would be to use Adobe Photoshop and their eyedropper tool; however, not everyone has a subscription to Adobe Photoshop.

Solution

Put simply, Mozilla Firefox.

In a recent update (Firefox 31), Mozilla added a new feature called the Developer Toolbar to Firefox. Within the Developer Toolbar, you have the ability to use the eyedropper tool.

Before performing the below, navigate to a web page that holds the colour you require. If your image is local, upload it to an image hosting site and view the image using Firefox.

screen-shot-2016-12-22-at-18-59-29-2

screen-shot-2016-12-22-at-18-59-52-2

Once selected, you now have the ability to drag the magnified eyedropper over the web page, pixel by pixel. Just click on the desired pixel, and the hexadecimal value will copy automatically to the clipboard (the hexadecimal value is also displayed under the magnifying glass as you move around the web page).

screen-shot-2016-12-22-at-19-00-38-2

Now we can go back to our Theme in Dynamics CRM/365 and input the hexadecimal value. The HSO logo has a blue background and rather than contrast the logo against a darker background colour, I would like the Navigation Bar to sit flush with the HSO lettering. The outcome should display only the white HSO lettering against a blue background.

screen-shot-2016-12-22-at-19-46-40-2

Here’s the final result. Both the logo background and the Navigation Bar are identical in colour. Something that would be very hard to recreate manually.

screen-shot-2016-12-22-at-19-48-30-2

Alternative Eyedropper Access

For those that love a shortcut. You can access the Developer Toolbar using Shift + F2. The shortcut will launch the toolbar which will be visible at the bottom of the web page. Just type ‘eyedropper’ into the toolbar and hit enter to access the eyedropper tool.

screen-shot-2016-12-22-at-19-55-30-2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s