Styling for Power Pages

Presented by: Ulrikke Akerbaek (https://ulrikke.akerbak.com/)

In this session, we looked at the new styling options available and upcoming for Power Pages.

Styling elements

Plenty of new styling elements such as overlay and rounded corners, richer stock images, hover animation …etc, have been announced

Drag and drop: Makes it much easier to move controls around the page.

Style data list: Brining the styling features to the data element (such as grids), similar to what SharePoint and Lists styling offers.

Branding in the design studio

Usually the branding journey, whether you come from SharePoint background or Power Pages is similar to this flow:

First, go to make.powerpages.microsoft.com

Check the templates, to see if there is anything close enough already available in the templates gallery.

Next, let’s switch to the edit mode.

Edit the header, give a site name, and logo. You can also edit code in VS code for the header.

Now, let;s navigate to the styling workspace. This area contains loads of pre-defined templates. From which you can pick and edit.

In order to update the Site FavIcon, you will need to go to the Power Pages Management, which is no more than a Power Apps.

From this, you will need to create a web file, and call it favicon.ico.

The font will need to be added as a web file first.

After which, you can create a content snippets, which will than be added at the end of the header section.

Once the content snippet has been aded, you can go back to the styling template and click update css (from the … button at the bottom right)

Full blog post about today’s session available @ https://ulrikke.akerbak.com/2023/10/04/mppc23-how-to-style-power-pages-my-session-as-a-blog-post/