Style your Power Pages, the easy way
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:
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.
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.
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.
And the page preview will show you immediately what you have done.
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.
And for site the navigation you can also enable an on-hover and style
So this could look like this when you hover over your navigation options.
Buttons and Links
Buttons and links are next in the list of stylable objects.
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.
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.
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.
Continue Reading Pieter Veenstra’s Article on their blog
Style your Power Pages, the easy way
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. 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.
Blog Syndicated with Pieter Veenstra’s Permission
More About This Author
Array
Modern Workplace26 March 2024Receive the available storage within your SharePoint Online tenant- Modern Workplace20 March 2024Options for Documenting Your Power Apps: Comments, Code, and Controls
- Modern Workplace18 March 20242 ways to duplicate SharePoint Lists to support your Power Apps
- Modern Workplace14 March 2024Update a Hyperlink Column in SharePoint with Power Automate
