Styling customization

Adding a style override file

By default the EDQ components will inherit the styling of your chosen Power Pages theme, but should you wish to override any of the EDQ styles you can add an additional file to your Power Pages website as a Web File. We have a provided a sample file for you to use and customize as needed:

Download edq_style_overrides.json

This file contains all the the possible CSS property name and value pairs, but the file you upload to Power Pages only needs to contain the properties you want to override.

Once you have edited the file to contain the required properties and their overridden values, the process to add the file is as follows:

1. Select Websites from the left hand menu of the main Power Apps interface.

2. Click the pencil icon beside the website you want to configure and Power Page Design Studio will open in a new tab.

3. Select Power Pages Management from the left-hand navigation:

   

4. In the new tab that appears select Web Files from the left menu.

5. Click the + New button in the top menu.

6. Complete the New Web File form as follows:

   • Name = EDQ Style Overrides
   • Website = Choose relevant site
   • Parent Page = Home
   • Partial Url = edq_style_overrides.json (must be named exactly as specified)
   • Publishing State = Published

   

7. Click the Save button in the top menu and the File Content field will become available.

8. Click the Choose file button and select the edq_style_overrides.json file that you previously edited and saved.

9. Once the file has uploaded, click the Save & Close button in the top menu.

10. Now preview your website to check the style overrides have been applied.

Editing an existing style override file

Rather than uploading an edited file to the existing Web File you can use the Open in VSCode button in the top menu to edit the file directly in an online version of Visual Studio Code.