Designing your Dynamics 365 Portal with CSS and Bootstrap

minutes reading time

Designing your Dynamics 365 Portal with CSS and Bootstrap

Dynamics 365 Portal has many out of the box features built in, two of those is CSS and Bootstrap which enable power users to configure the design of your Portal to meet your brand guidelines. Many of you will already be familiar with these tools but for those who aren’t, we’ll provide an overview of how they work and how they integrate with Portals.

CSS3

CSS Stands for “Cascading Style Sheet.” Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page’s HTML. (https://techterms.com/definition/css)

To understand more about CSS you can try the W3Schools tutorial.

Power users can add styling directly inside their web page when clicking on the source code option in the editor, then adding the following inside the element tag:

  1. “style=”yourstyle

Alternatively, you can use:

  1. “class=”yourclass

For this class to display your options, you will need to first define its properties. You can do this by clicking on the Edit button and then navigating to the options tab. You’ll window will present a box for Javascript and CSS. Any changes you make here will only affect this specific page.

If you want to make a global change and have your classes work across your entire portal, you will need to create a .css file and upload it to the Portal file system.

To do this, on your page find a location where you can make content changes, you should see a button that says something similar to ‘Edit Page Copy’

Next, click on the image icon in your toolbar and a new window will pop up. Click browse server and on this new window, click on the upload icon and select your CSS file and upload. Your changes should now take effect. We highly recommend you create your stylesheet files to best practice, to prevent design conflicts with the existing default CSS and to deliver a consistent user experience.

Bootstrap

Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. (Source)

Bootstrap is installed with portals by default, so you’ll immediately be able to use its features. You can quickly build layouts, create buttons, icons and more in your portal, without having to manually code it each time. Here’s an example of a Portal page grid layout:

You can make layout changes to templates using the Bootstrap Grid system. To do this, navigate to your Dynamics 365 CRM and go to Portals > Web Templates and selecting your template from the table.

You can find out more information about how Bootstrap works from the developer documentation.

Summary

CSS and Bootstrap are fundamental to Dynamics 365 Portal design architecture. It enables power users to quickly build complex layouts and implement designs that meet your organisations brand guidelines. You have full control of the scope of your design changes, whether that is on a single element, a specific page or you want to make a global change to the template.

When making changes to your existing Portal, we recommend that you test this on a redundant page or a development Portal to ensure that your users continue to have a consistent experience. In addition, if a mistake is made or something unexpected happens, your live portal will continue uninterrupted.

August 23, 2018
Dan Norris - Communications Manager ServerSys

Daniel Norris

Daniel Norris is the communications manager for The Portal Company. His role is to bring you the latest updates, tips, news and guides on Dynamics 365.

If you have any questions, please get in touch with us at [email protected]

Daniel Norris - Linkedin profile