Skip to content

Tech Tinker Lab

Journal for tech tinkering experiments

  • Home
  • Basics
    • Coding
  • Game Development
    • Unity
    • Blender
  • Web Development
    • WordPress
    • Shopify
    • Low/No Code
      • Microsoft Power Pages
  • Automation
    • Testing Automation
      • Unit Testing
      • End to End Testing
        • Nightwatch
  • Productivity
    • GSuite
      • GSheets
  • Toggle search form
styling with power pages

Styling with Power Pages

Posted on June 25, 2022June 25, 2022 By techtinkerer No Comments on Styling with Power Pages

In this tutorial you will learn how to do styling with Power Pages. Power Pages allows you to set themes along with customized color palates. This way you can style your website according to your liking. You can choose from template themes and customize them from A to Z.

Prerequisites

Before you get onto this articles, we recommend that you go through the previous articles if you haven’t already done the same.

  1. Getting started with Power Pages
  2. Building pages with Power Pages

Getting Started – Styling with Power Pages

This is how the styling section looks like

styling with power pages

As you can see the main panel has a lot of ready made themes that you can choose. Once you select a theme, the sub panel shows up which can be used to tweak the styling.

In the sub panel

Color Palette

When you tweak the color palette the color on the website will change in real time.

styling with power pages

Background

With this you can control the background color of the website. The background colors can be selected from any color in the color palette. To choose a unique color as per your liking, you will have to 1st add it to the color palette using the + sign.

styling with power pages

Fonts

styling with power pages

In this section of the sub panel, you can control the font type, weights, size and color.

Buttons & Links

Your website can have buttons that can link to other pages. There are 2 types of buttons: Primary & secondary. You can tweak the background color, text color as well as the colors on hover of the buttons. You can also style how the links will look like in this section.

Margins and Spacing

Here you can set the top and bottom margins. You can also change the padding between the columns to control the clutter on the website. The margins and spacing can be set in terms of px, em, %.

Conclusion – Styling with Power Pages

In the previous article we spoke about how to build pages using Power Pages. In this article, we took 1 step further by learning how to customize how the website looks as per our tastes.

No/Low Code, Power Pages, Web Development

Post navigation

Previous Post: Nightwatch Shadow DOM
Next Post: Power Pages Form

Related Posts

microsoft-power-pages Microsoft Power Pages – Basic Concepts No/Low Code
power pages Get Started – Power Pages No/Low Code
wordpress plugins Best WordPress Plugins – 2022 Web Development
power pages form Power Pages Form No/Low Code
power pages tutorial Power Pages Tutorial – Building Pages No/Low Code

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • January 2023
  • September 2022
  • June 2022
  • May 2022

Categories

  • Basics
  • Blender
  • Coding
  • End to End Testing
  • Game Development
  • GSheets
  • GSuite
  • Nightwatch
  • No/Low Code
  • Power Pages
  • Productivity
  • Testing Automation
  • Unit Testing
  • Web Development
  • Wordpress
  • How to get Indian Mutual Fund Portfolio in Google Sheets in 2023?
  • Learn Blender from scratch with Imphenzia
  • Power Pages Form
  • Styling with Power Pages
  • Nightwatch Shadow DOM

Copyright © 2023 Tech Tinker Lab.

Powered by PressBook Masonry Blogs