Connexion
Power Pages: How to use custom CSS ?
The new power pages styling is really nice and easy to use but i have tried every option and I could not figure out how to change the font Colour of the label of a field on my form and the magic way to do this is using a custom CSS and F12.
So follow the below steps to achieve this:
- Login to make.powerpages.com , Select your environment and then Select your site from Active sites and click Edit
2. In the left navigation -> Navigate to Styling.
3. You can customise your Theme by adding colours to the colour and modifying in the theme and everything gets reflected as you change the colours which is very nice and very handy as you can see how things looks like.
4. Now to add a custom CSS file , Click the 3 horizontal dots on your selected them and click Manage CSS.
5. Navigate down and click Upload Custom CSS.
6. Upload your custom CSS and then Click Edit Code this opens the file in Visual studio Code, you can edit your CSS file there easily and once you save and click Sync Configuration.
7. Now comes the tricky part where you will need to have the discovery yourself which is trying to figure out the class name that you need to override. So to do so you need to use the preview on your portal so you can browse and then click F12 which opens your developer tools.
8. Using the developer tools you can navigate to the html component using the Ctrl+Shift+C , in my example I was trying to change the colour of the field label on the form, so i have picked the class name which is field_label
9. In Visual studio code , edit the class field_label, save and sync configuration and your changes will be reflected automatically
I will add here some of the class names I have used:
| Modify the field label style | .field_label {} |
| Modify styling of submit button | .btn_submit {} |
References:
https://learn.microsoft.com/en-us/power-pages/configure/manage-css?WT.mc_id=DX-MVP-5004221
https://learn.microsoft.com/en-us/power-apps/maker/portals/edit-css?WT.mc_id=DX-MVP-5004221
