PowerApps Portals - Branding in simple steps

Almost every single Dynamics 365 Portal project I work include portal branding. Sometimes, the project entails a complete overhaul of the portal's look and feel. Other times portals just need a little touch up or adjustment to enhance its presentation in multiple different devices.

Luckily, Dynamics 365 Portals is build using the bootstrap front-end framework. Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components. Portals v9.x uses boostrap 3.3.6 - https://getbootstrap.com/docs/3.3/.

Below is a sequence of steps, I follow when applying initial branding to a portal project.

• Access the target portal, as a Portal admin user.
• Click to "Edit" a page.

• Access the File Manager window, by using the Image selector icon.

• Click Browse Server.

• Once the File Manager is open, right-click the bootstrap.min.css and theme.css individually and select "view". This will cause the style sheet files to be downloaded to your machine.

• Back these files up before proceeding.

Applying a new css style

Once the original files are backed up, we will look into applying a new set of stylesheets.

Usually there are two scenarios when it comes to bringing a fresh look to portals. In the first scenario, your customer provides you the bootstrap files they would like to be used. In this case, you can repeat the steps above to access the file manager and remove the original css files and finally, upload the new files.

The second scenario is a bit more complex. A lot of times your customers will ask you to look at their corporate site and replicate the current color schema, and webpage component placement. This situation can be a bit overwhelming if you don't have webdesign/css skills.

Below, is the approach I usually take to get a site very close to what customers would like to see.

The first task here is to assess the current customer site. If using chrome, you access the development tools window and search for the bootstrap keyword. If found, you can download the customer's bootstrap css file and upload it to the portal, using original instructions above.

If a bootstrap css reference can't be found, I would look for "inspiration" elsewhere. I personally use Bootswatch (https://bootswatch.com/3/) is full of samples and basic level css files. You can find one that is most "visually" compatible your project/customers requirements and use the sample as a starting point.

Based on my experience, bootswatch will cover about 85% of a portal branding task. The other adjustments and customization should be done in the style.css file.