Modifying CSS in Dynamics 365 Portals: A Technical Guide

Introduction: Dynamics 365 Portals provide a flexible platform for creating self-service websites and portals. While the out-of-the-box templates and themes are customizable, you may want to make specific visual changes to align the portal with your organization's branding and design guidelines. In this technical blog post, we will explore how to modify CSS (Cascading Style Sheets) in Dynamics 365 Portals to achieve the desired visual customization.

Prerequisites: Before proceeding with the CSS modifications, ensure the following prerequisites are met:

1. A Dynamics 365 environment with a provisioned Dynamics 365 Portal.

2. Appropriate permissions to access and configure the Dynamics 365 environment and the portal.

Steps to Modify CSS in Dynamics 365 Portals: Follow these steps to modify CSS in your Dynamics 365 Portal:

Step 1: Identify the CSS Class or Selector:

1. Open the Dynamics 365 Portal in a web browser.

2. Use the browser's developer tools (usually accessible through right-clicking and selecting "Inspect" or "Inspect Element") to inspect the desired element or area on the portal that you want to modify.

3. Identify the CSS class or selector associated with the element. This information will be used to target the specific element for customization.

Step 2: Access the Portal's Custom CSS File:

1. Log in to the Dynamics 365 environment and navigate to Portals > Web Files.

2. Locate the Web File called "custom.css" or a similar name. This file is the main CSS file used for customizations.

3. Download the "custom.css" file to your local machine.

Step 3: Make CSS Modifications:

1. Open the downloaded "custom.css" file using a text editor or a specialized CSS editor.

2. Add or modify the CSS rules to achieve the desired visual changes. Use the CSS class or selector identified in Step 1 to target the specific elements. Example: .my-custom-class { color: #ff0000; font-size: 18px; }

3. Save the changes to the "custom.css" file.

Step 4: Upload the Modified CSS File:

1. Return to the Dynamics 365 Portal and navigate to Portals > Web Files.

2. Find the "custom.css" file and select it.

3. Choose the "Replace" or "Upload" option (depending on the portal configuration) to upload the modified "custom.css" file from your local machine.

4. Confirm the upload and overwrite the existing file.

Step 5: Publish and Verify Changes:

1. Publish the Dynamics 365 Portal to make the CSS modifications live.

2. Refresh the portal in the browser to verify that the desired visual changes have been applied.

Conclusion: Modifying CSS in Dynamics 365 Portals enables you to customize the portal's appearance to align with your organization's branding and design requirements. By following the steps outlined in this blog post, you can easily identify CSS elements, make modifications, and upload the customized CSS file to achieve the desired visual effects. Remember to test your changes thoroughly and ensure they do not conflict with other customizations or future portal updates.