Adding Color To Your CRM Portal

Standard

A few months ago I did a four part series on setting up an Adxstudio demo portal. I am now setting up a CRM Portal (the new name for Adxstudio Portal now that Microsoft owns it) for a client. Being a decent-sized organisation they have brand guidelines and the CRM Portal needs to reflect them. So, how do you adjust the color palette of your portal site? This is how.

bootstrap.min.css

The look and feel of the CRM Portal is defined by the bootstrap.min.css file. If you browse CRM, you can find this file at Portals – Web Files.

image

However, there is nothing friendly about editing this file. It is big and, unless you are used to editing them, it will be a little overwhelming. Fortunately there are some sites out there which generate bootstrap,min.css files for you, without the headache of text editing.

Paintstrap

One option is paintstrap.com.

image

For Paintstrap, you go to, say, Adobe kuler (Paintstrap has a link), sign up and create your colour scheme using either their algorithms or the custom option.

image

Once done you save and click Share to get the identification number for Paintstrap. Then, you follow the wizard to generate the bootstrap.min.css file, seeing how it looks on their sample web site. You get a zip of three files but the bootstrap.min.css is the only one you need.

Lavish Bootstrap

This is is a little simpler to execute as you can either feed it an image, and it will automatically generate a color palette, or you can simply set the colors manually.

image

As you set the image or colors, the site itself reads in these values and adjusts so you can see the result before applying it to your CRM Portal site. When happy you generate the file which, if I understand the instructions from Microsoft correctly, you will need to rename to bootstrap.min.css.

The Hard Way

Then there is the hard way. As my client has very specific brand guidelines, the auto-generators do not cut it as they only affect the color of some elements of the portal but not all of them so I need to edit my css file directly. To get a copy of the file, open up the record in CRM and, in the Notes section of the record, you will see the file.

image

As with any other Note attachment in CRM, you can click on it and download it for editing. As it is a text file, any text editor will do.

All colors in the file are stored in hex notation with a ‘#’ at the front so a search on ‘#’ quickly gets you to the color definitions in the file (and there are hundreds of them). If you are unsure what color a hex code represents, use one of the tools above to guide you.

Given the sheer volume, of hex codes in the file, another approach would be to isolate the elements of your CRM Portal you wish to change, determine their color’s hex code (I use the GIMP image editor for this) and then do a find/replace throughout the css file to a more acceptable color.

Once finished, you save the file as bootstrap.min.css ready for uploading.

Loading the File Into the Portal

However, you have generated your bootstrap.min.css file, you need to load it into the portal. Following Microsoft’s instructions, you log into the CRM Portal as an administrator and, from the home page, select Add Child File.

image

You set the name to ‘bootstrap.min.css’, browse to the file and tick the Hidden from Sitemap tickbox, then hit Save. This will load your new file into the Web Files section for you. You will notice there are now two bootstrap.min.css files in there so, to avoid confusion, I usually deactivate the old one (the Portal Search view has the Created On field as a column if you are not sure which is which).

Once done you refresh the CRM Portal to see the new color scheme.

Conclusions

The documentation for CRM Portals, like Adxstudio Portals is still quite light on the ground so it is not always clear how to adjust things. Hopefully this article sheds some light on the relative ease you can adjust the color scheme for your CRM Portal. Ideally, one of the auto-generating tools is enough but, if not, you can dive into the css file and define every color you see in the portal.

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