Style your Power Pages, the easy way

Pieter VeenstraModern Workplace2 years ago4 Views

When you try out Power Pages, and you have created some pages, you might want to adjust the styling of the page. In this post the options.

Style your pages with a Theme

Once you have opened your Power Pages site, you can select the styling option on the left hand side to change the Theme used by your pages.

This way you can change a page that looks like this:

To a page that looks like this:

Style your Power Pages, the easy way Microsoft Office 365 image 105

The above change you can make with just a single click by srlecting one of the out of the box themes.

Updating Themes

These out of the box themes may be exactly what you want, however most of the time the colours that you want will not match your required colours.

So how can we change the theme within Power Pages?

A theme has a number of elements that can be configured.

Style your Power Pages, the easy way Microsoft Office 365 image 106

First of all you can configure the palette that you want to use. In the palette you would typically include the colours that have been defined in your organization’s branding guidelines. You can add your own colours to the Palette. This is where you can either use the colour picker or you could use the Hex code for a colour or you could use the RGBA code as we have been using within Power Apps Canvas Apps for quite a few years.

Style your Power Pages, the easy way Microsoft Office 365 image 107

You might thing that you can only add 3 colours to the existing palettes, but you can also change the already configured colours. Just click on the little coloured circles and that is it.

Background Colour

The next part on the settings is the Background colour of your page. Simply select the little square next to the Background setting and select a colour form your palette.

Style your Power Pages, the easy way Microsoft Office 365 image 108

And the page preview will show you immediately what you have done.

Style your Power Pages, the easy way Microsoft Office 365 image 109

Font settings in Power Pages

The next step is to configure your fonts. First of all to make your pages look good, you might want to keep the same font across your page. Varying the font size of weight is often fine, but using different fonts doesn’t always look good.

For each of the page parts you can configure the Font, Weight, Size and the colour.

Style your Power Pages, the easy way Microsoft Office 365 image 110

And for site the navigation you can also enable an on-hover and style

Style your Power Pages, the easy way Microsoft Office 365 image 111

So this could look like this when you hover over your navigation options.

Style your Power Pages, the easy way Microsoft Office 365 image 112

Buttons and Links

Buttons and links are next in the list of stylable objects.

Style your Power Pages, the easy way Microsoft Office 365 image 113

For the buttons there are two types of buttons that can be added to a page. Primary buttons can have a different style from the secondary buttons.

Links on page are fairly similar to buttons as they are just clickable objects that will guide the users to where they want to be.

Padding and margins

If you ever have done some html work you will know what margins and padding are.

A margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content.

Style your Power Pages, the easy way Microsoft Office 365 image 114

Notice that you can only set the top and bottom of a margin and only one value for the column padding.

That is all the options that we have got. So how do we now make sure that the elements added to the page pickup the changes that I’ve made.

Most of these styling options are simple. However if you add a button, you might have to set the style of the button first. That way you can get the styling of a secondary button being picked up.

Style your Power Pages, the easy way Microsoft Office 365 image 115

What’s next?

Well if you haven’t started with Power Pages, this is a good time. Login to Power Pages and get your first portal configured.

And if you start with Power Pages now you can try it out for 160(!) days since today. That gives you a bit longer than the 30 days that you had before.