Updating Dynamics 365 Portal Theme/Layout using CSS

Updating the style and look of your portal has never been easier. As the portal makes use of the Bootstrap framework we can make use of this and use existing bootstrap theme generators for a quick refresh to your portal.

After you have experimented with the generator you will be able to download the custom bootstrap file, there may be more files in the download however we are only interested in the bootstrap.min.css file.

The quickest and easiest way to login and browse to the home page,and then from menu on the right you want to select New > Child file

Upload your bootstrap file and ensure the partial url is the exact name as the file (i.e. with the correct extension) and that you have selected “Hidden form Sitemap” as this ensures the file will not be accessed individually.

and that’s all that is required!

In this case the changes were not reflected immediately as the original style was already cached. A restart of the portal and a clearing of the cache usually prompts the browser to obtain a fresh version of the site.

If you need to make changes to the CSS file, all you need to do is upload the updated CSS file in the same way and the portal will overwrite the existing file.

We can see that the logo in the top left is too big for the navigation bar, in this case i would like to update the navigation bar to house the logo more suitably. I add a custom CSS to make the change. This is uploaded in the exact same way.

This will be the file that i make any layout changes as i would like it to stay separate from the boot strap style sheet.

After a restart of the portal , the navigation bar is updated to a larger size to accommodate the logo.

A more advanced way to theme the 365 portal is to integration liquid templates, but that is for another post.

Enjoy!

 

Leave a Reply

Your email address will not be published.