{"id":27042,"date":"2021-03-02T11:15:08","date_gmt":"2021-03-02T11:15:08","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=27042"},"modified":"2023-09-08T13:00:51","modified_gmt":"2023-09-08T07:30:51","slug":"how-to-use-color-picker-and-custom-theme-in-portal-designer-in-dynamics-365-powerapps-portals","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/03\/how-to-use-color-picker-and-custom-theme-in-portal-designer-in-dynamics-365-powerapps-portals\/","title":{"rendered":"How to use Color Picker and Custom Theme in Portal Designer In Dynamics 365 PowerApps Portals"},"content":{"rendered":"

The PowerApps Portal is a game-changer in Dynamics 365 CRM that allows capabilities to integrate the Power Apps Portal with Dynamics 365 environment. In addition, it allows customers to see their records like Customer Information, Invoices, etc.<\/p>\n

The major part of PowerApps Portal is the intuitive and user-friendly UI. Microsoft also enhances the Portals in such a way that users can configure the Pages, Web Templates, etc. on Portal using the Portal Designer. In the earlier days, in case we needed to change the UI then we had to make changes in \u201ctheme.css\u201d by opening that file and updating content in it, which was more inclined towards development.<\/p>\n

Now there is a new feature in the Portal Designer that will allow you to setup new themes for the portal and update the colors using the UI itself. It will allow you to use the color picker to set properties for the header, footer, etc.<\/p>\n

You can check this new feature using the below steps:<\/p>\n

1- Navigate to https:\/\/make.powerapps.com<\/a>
\n2- Select the environment where the portal is configured.
\n3- Select Apps and then Click on Portal App where Type is Portal. Once you select it, there is an EDIT option is More Commands. On click of it, you will be redirected to Portal Designer.
\n4- In Portal Designer, you need to click on the \u201cpencil\/brush\u201d icon that is called Theme.
\n5- It will show the Themes option where you have to \u201cEnable basic theme<\/strong>\u201d as shown in the below screen clip.<\/p>\n

\"use
\n6- In this step, we will explore the option to customize the new theme.<\/p>\n

There is an option under themes in Portal Designer to create New Theme or Save As the OOB Preset. The \u201c+ New theme\u201d creates the new theme by referring \u201cBlue\u201d OOB theme properties.<\/p>\n

\"Use<\/a><\/p>\n

\"use<\/a>
\n7- Once you click on the right side, the theme properties are editable to set the custom color in hex format. On click of highlighted option, it open the Color Picker.<\/p>\n

*Note: You can SaveAs the custom theme by clicking more option there is an option to Save As.<\/em><\/p>\n

\"Use<\/a><\/p>\n

When the color picker is open you need to select the color, or you can directly paste the hex code in the text box.<\/p>\n

If you have opened the color picker, select the required color and click again on the highlighted icon to close the color picker.<\/p>\n

8-Once you make the updates in properties, just click on Browse Websites and your updates would apply to the portal.<\/p>\n

\"Use<\/a>
\n9- When the new custom theme is created there is a new CSS file created called \u201cnew-theme-1.scss.\u201d
\n10- You can find the \u201cnew-theme-1.scss\u201d record with the attachment of the file as a note in Web Files table under the Portal Management app in Dynamics 365 CRM.<\/p>\n

The source code of the file looks like below:<\/p>\n

$primaryColor: #292f33;<\/p>\n

$headerColor: #fbbc05;<\/p>\n

$headerMenuColor: #ffffff;<\/p>\n

$headerMenuHoverColor: #292f33;<\/p>\n

$bodyBackground: #ffffff;<\/p>\n

$footerColor: #f4f4f4;<\/p>\n

$footerTextColor: #333333;<\/p>\n

11- We downloaded the \u201cnew-theme-1.scss\u201d file with the Notes attachment, change the header properties in code, and uploaded back in the same note in the \u201cCustom Theme\u201d web file by deleting the previous note and replacing it with the new one.
\n*Note: Take backup of the file before making any modifications in it.<\/p>\n

$primaryColor: #292f33;<\/p>\n

$headerColor: #EA4335;<\/p>\n

$headerMenuColor: #ffffff;<\/p>\n

$headerMenuHoverColor: #292f33;<\/p>\n

$bodyBackground: #ffffff;<\/p>\n

$footerColor: #f4f4f4;<\/p>\n

$footerTextColor: #333333;<\/p>\n

\"use<\/a>
\n12- Then on click the \u201cSync Configuration\u201d, it will start showing the updated custom theme.
\n\"use<\/a><\/p>\n

13- On click of the \u201cBrowse Website\u201d, the portal will be loaded with the updated code.<\/p>\n

\"Use<\/a><\/p>\n

*Note:<\/p>\n