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.
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.
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.
One option is paintstrap.com.
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.
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.
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.
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.
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.
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.
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.