This blog is part of an evolving series on Power Apps Portals, go here to view the Introductory blog with chapters.
Phone skins are kind of like CSS. 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.
CSS, or Cascading Style Sheets, has been around since the mid 90’s. It is a language that gives you, the web developer, the ability to separate content from how it is displayed on the web.
Phone skins are to your phone as CSS is to your web content. It’s the same stuff underneath but with a different cover.
To illustrate, 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.
An easy way to see the impact of style is to compare Notepad with MS Word.
In Notepad, you have zero styling capabilities to individual words. You cannot bold, underline, highlight, or color your content individually. You can 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!
CSS is the styling of web content (text, images, etc.). Without going deep into the woods, let’s just say it is a methodology to keep your web content free from stylistic boundaries. This allows you to display your web content in different ways to different devices or screen sizes or even different website users. Literally, at the changing of one line in your <head> element, you can change the look and feel of the entire website.
This significantly changes how you develop 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.
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:
CSS is wonderful, but wouldn’t it be nice if someone created a common set of CSS rules that work consistently with multiple browsers and device types so we don’t have it create it every single time? Enter Bootstrap. Bootstrap is a free CSS framework with an extensive base set of CSS rules that web developers can utilize, and 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 changed quite a bit again, and again the content is the same:
Using the Dynamics 365 Customer Self-Service Portal as an example, it comes with two default CSS stylesheets:
One points to a full Bootstrap stylesheet – bootstrap.min.css, and the other – theme.css – points to a complimentary stylesheet that 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; however, you do have the ability to override default Bootstrap styling inside the 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:
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 Create and manage web files before continuing.
After setting up yourself as a Contact in Dynamics 365 with Portal administrator privileges, log into the Portal website. As a Portal Administrator, you 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 we can begin editing your Portal CSS.
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.
With your Portal website already open and using Chrome web browser to illustrate, click SHIFT + CTRL + I; this will bring up the Developer Tools. From here you have several tabs across the top; click Elements. 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.
Portal website is on the left; Developer Tools Elements is on the right:
Let’s say you want to change the color and font-size of the page headings as you feel they are too large and need a different color. Right click on the page heading and select Inspect:
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.
Now that we know the styles for the <h1> element, we can begin making custom changes. Navigate to your working theme.css file (not the original) and enter this style. Remember, this is not the Bootstrap CSS file but a complimentary 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.
You will probably run into portal caching, meaning that your changes seemingly don’t show after refreshing the webpage. Follow these instructions.
For this particular scenario, you may still not see your changes. It has to do with competing styles – yours and Bootstraps. 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.
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 illustration 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 styling for Portal websites:
- 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.
Now that you have a general understanding on 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. Please connect with us if you’d like to learn more about Portals in Dynamics 365.
Dynamics 365 CE (CRM) How-To eGuide
41 pages of step-by-step instructions for 6 different key tasks in Dynamics 365 Customer Engagement (CRM). Includes interactions with PowerApps and Flow!Get the eGuide