How to Edit CSS for Power Apps Portals in Dynamics 365
CSS allows you to control the appearance of your Portal web pages efficiently.
Below, I start by explaining what CSS really is, and what it does for Dynamics 365 Portals. If you already have a handle on the basics, you may want to skip to the How to Edit Portal CSS Files section.
- What Is CSS?
- What Is CSS Good For?
- Bootstrap for Power Apps Portals
- How to Edit Portal CSS Files
- Troubleshooting: Why Don’t My Portal CSS Changes Appear?
- Common Items to Change in D365 Portal Styling
Note: Portals in Dynamics 365 Sales are now officially called “Power Pages“. They were previously called “Power Apps Portals”, but are often still referred to as “Dynamics 365 Portals.”
What Is CSS?
CSS, or Cascading Style Sheets, is the styling of web content (text, images, etc.). Without going deep into the woods, let’s just say it is a methodology to give you, the web developer, the ability to separate your content from the way it’s displayed on the web.
CSS is kind of like phone skins. Phone skins give you the ability to dress up or style your phone. There are unlimited choices with colors, textures, designs, thickness, and so on. Literally, you could have a different skin for every day of the week. However, the phone is the same phone.
Similarly, when you change the CSS, it’s like giving your Portal web page a new skin, but with the same content underneath.
For instance, a while ago I created a website where the CSS styles changed on each day of the week – just to provide a little variety for the users.
CSS allows you to display your web content in different ways to different devices or screen sizes or even different website users. Literally, by changing one line in your <head> element, you can change the look and feel of the entire website.
What Is CSS Good For?
The power of CSS significantly changes how you develop Portal websites. You keep the styling at the header or stylesheet level, and just write your content at the HTML level.
One of the main benefits of this methodology is change management. If you need to change the default font size on your website, you can make that change in one location rather than every single page of your website.
An easy way to see the impact of style is to compare Notepad with MS Word.
In Notepad, you have zero styling capabilities. You cannot bold, underline, highlight, or color your content individually. You can only indent and create new lines. The simplicity of this application is why I love Notepad and use it every day in my work.
Here is an example of Notepad:
MS Word, on the other hand, is a powerful application that provides numerous formatting options. Here I increased the font size, used an underline, colored some text, italicized text, and lined out some text. But it is the same content!
Here is some sample HTML with no CSS styling, only HTML elements:
Here is the web-browser display of the basic HTML:
We can add a small handful of CSS HTML and class styles to our content in the <head> section:
And we can see a dramatic visual difference in how it is displayed on the web:
Now, CSS is wonderful, but wouldn’t it be nice if someone created a common set of CSS rules that worked consistently with multiple browsers and device types so we wouldn’t have to write all the code every single time? Enter Bootstrap.
Bootstrap for Power Apps Portals
Bootstrap is a free CSS framework with an extensive base set of CSS rules that Portal web developers can utilize. It significantly cuts down CSS development time and effort, especially when considering mobile devices.
I commented out my initial set of CSS rules, added a Bootstrap reference in the <head> element, and added a few Bootstrap-specific class identifiers:
As you can see, the website appearance changed quite a bit again, though the content is still the same:
For example, the Dynamics 365 Customer Self-Service Portal comes with two default CSS stylesheets:
One points to a full Bootstrap stylesheet — bootstrap.min.css. The other points to a complementary stylesheet — theme.css. That complementary stylesheet is a Dynamics 365 Portal-specific rendition to work in conjunction with how Microsoft displays its Web Pages, Entity Lists, Entity Forms, Web Forms, etc. This is the recommended file to edit if CSS changes are desired for your Portal website.
(It is not recommended to edit the default Bootstrap CSS file itself. The best method is to override the default Bootstrap style rules by editing your theme.css file.)
Depending on the level of customizations you intend to implement for your Portal website, you may consider using a web development tool to house all of your changes. I use Visual Studio to partially replicate any Portal website I develop. This allows me to quickly find needed items, create necessary backups, tap into IntelliSense, and document all changes.
Example of using Visual Studio to support Portal website development:
How to Edit Portal CSS Files
I prefer to use the front-side editing component for file management with Dynamics 365 Portals because I see a somewhat typical website folder architecture. Be sure to read Microsoft’s Create and manage web files before continuing.
- Log into the Portal website as an Administrator. If you don’t already have Administrator access, set yourself up as a Contact in Dynamics 365 with Portal administrator privileges. As a Portal Administrator, you’ll have editing capabilities.
- On the homepage, mouse over the top navigation header text. You will see an Edit popover appear:
Click Edit and an editing window will appear:
- Click the photo icon and a Portal server window will appear:
- Download the theme.css file to your local computer and create a backup copy of the original just in case things go south.
- Now, most likely you will need to see what styling is already in place in order to make the desired changes. You can do this through Developer Tools in your browser. Open your Portal website with your browser. I’ll be using Chrome to illustrate.
- Click SHIFT + CTRL + I; this will bring up the Developer Tools. From here you have several tabs across the top.
- Click the Elements tab. This provides an HTML view of your Portal website. Minimize the Developer Tools or dock it so you can view both the Portal website and the Developer Tools at the same time. The Portal website is on the left; Developer Tools Elements is on the right:
- Right click on the element you want to change in the Portal website and select Inspect:. Let’s say you want to change the color and font size of the page headings because you feel they are too large and need a different color.
You should be directed to that element on the Elements tab in the Developer Tools, and the line should now have a blue background:
To the right you should see a Styles tab and a Computed tab. For this illustration, we will only focus on the Styles tab.Here you can view all the styles applied to the selected element. We want to focus on any classes, ids, or root-element styling for the page heading element.
- For this example, we don’t have to work with the page-heading class on the containing <div> element as it only affects padding. We only need to change the <h1> element.
- Navigate to your working theme.css file (not the original) and enter this style. Remember, this is not the Bootstrap CSS file but a complementary CSS file.
- Navigate to the Portal server and upload your change. You may need to delete the original to prevent duplicate files – another good reason to create a backup.
Troubleshooting: Why Don’t My Portal CSS Changes Appear?
You will probably run into portal caching, meaning that your changes don’t show after refreshing the webpage. You may need to clear the server-side cache. To do so, sign in as an administrator, navigate to /_services/about, and then choose “Clear Cache.”
You may also want to review the detailed cache instructions from Microsoft.
For this particular scenario, you may still not see your changes. It has to do with competing styles — yours and Bootstrap’s. The specificity needs to be increased. Go ahead and change the style by adding !important to the end of the font size style. You may need to repeat this process for all styles of root elements and Bootstrap classes that you wish to override.
Save, upload, clear Portal cache, and refresh the webpage.
Before
After
Common Items to Change in D365 Portal Styling
Even though Dynamics 365 Portals comes with its own CSS styling, you have the ability to make it your own — to change the “skin” of your website.
The example above demonstrated a simple scenario in which to add custom CSS to your Portal website. You can do so much more if desired.
Here is a list of the more common items to change in Portal website CSS:
- Font family
- Font size
- Heading size (like the example above)
- Header background color
- Footer background color
- Button background color
- Top navigation height
- Margins and padding for certain elements
Don’t forget @media styles for mobile devices. If any of your styling should be changed for different devices, ensure you add styles to each appropriate @media rule in the stylesheet. If you plan to tap into Web Page content or use Web Templates, it is highly likely you may need to add your own custom CSS and apply Bootstrap styles to the new HTML elements.
Next Steps
Now that you have a general understanding of how to modify your Portal CSS, you can plan your strategy, verify with the stakeholders, backup the original work, utilize some sort of version control for your work, and have fun.
Learn more about Power Apps Portals in Dynamics 365:
Please connect with us if you’d like help to better leverage Portals in your business.
Calculated Fields and Rollup Fields in Dynamics 365 CRM Solutions
In this recorded webinar, we'll cover how to create Rollup Fields and Calculated Fields to help you you automatically determine values based on other fields and records in the system.
January 30
9:00 am – 9:30 am PST
Author
