Create your own custom-themed FREE INTRANET DESIGN IN A MINUTE! Try it Yourself!
Do it Yourself Intranet Design
Logo
Phone
  • About
  • Solutions
    SOP & Policies ManagerDocument Management SystemKnowledge Management SystemEmployee Onboarding SolutionPerformance ManagementProject ManagementProcess MiningIntranet for Small Businesses
  • Services
    IntranetSharePoint
    UIUX Services
    SharePoint Design Services
    Power Platform
    Power PagesPower AutomatePower AppsPower BI (MS Fabric)
    Copilot StudioAI AgentsMicrosoft Teams Apps
  • Templates
  • LookBook
    Modern SharePoint WebpartsBirthday Reminder WebpartWeather Webpart
  • Case studies
    SharePoint Services
    Microsoft Teams
    Microsoft 365
    Microsoft Power Platform
    Power Apps
    Power Automate
    Power Pages
    Azure Functions
  • Blog
    SharePoint Services
    Microsoft Teams
    Microsoft 365
    Microsoft Power Platform
    Power Apps
    Power Automate
    Power Pages
    Azure Functions
    Copilot
    Design
    Power BI (MS Fabric)
    Artificial Intelligence(AI)
    Microsoft Viva
  • Partners
  • Careers
Schedule a call
Schedule a demo
Blog
/
Modernize Microsoft Power Pages with OOTB Styles and Custom Styles: A Step-by-Step Guide
Published Date - 
Subalakshmi
Subalakshmi
November 15, 2023

Modernize Microsoft Power Pages with OOTB Styles and Custom Styles: A Step-by-Step Guide

Modernize Microsoft Power Pages with OOTB Styles and Custom Styles
Power Pages

Microsoft Power Pages is a low-code/no-code website builder that allows you to create and manage websites without writing any code. It comes with a variety of pre-built themes and templates, but you can also apply your custom styling to create a unique look and feel for your website.

There are two ways to apply custom styling in Power Pages

1. Use the Styling workspace: The Styling workspace in Power Pages allows you to make custom CSS changes to individual elements on your pages. You can change the font, color, size, and other properties of any element on your page.

2. Upload a CSS file: You can create a CSS file in your favourite code editor and then upload it to Power Pages. Once you have uploaded the CSS file, it will be applied to all pages on your website.

Way - 1: To use the Styling Workspace

1. Begin by accessing Power Pages and choosing the specific site where you intend to apply custom CSS.

2. Click on the Edit button to enter the site's editing mode.

edit

3. Within the left-hand panel, locate and select the Styling option.

styling

4. Now pick the element on your page that you wish to style.

5. In the Properties pane, make the desired CSS adjustments. You can customize the element in various aspects, such as.

  • Theme: Change the theme by selecting the desired theme and clicking Save.
save
  • Fonts: Modify font-related attributes, including font family, font weight, font size, and font color for different headings.
Font
  • Button: Tailor button properties, such as style, button radius, background color, and more.
Primary button links
  • Hyperlink: Adjust link properties, such as the presence of an underline, font style, link text color, hover color, and more.
Links

6. After achieving the desired styling, save the changes.

Styling

7. To apply the updated CSS and view the alterations, select Sync.

Way - 2: To upload a CSS file

1. Start by navigating to Power Pages and selecting the specific site where you wish to apply custom CSS.

2. Click on the Edit button to enter the site's editing mode.

3. In the left-hand panel, locate and choose the Styling option.

Styling

4. Within the More options menu, click on Manage CSS.

Themes

5. In the Custom CSS section, select Upload, and then proceed to pick the CSS file that you want to upload.

Here is an example of how to apply custom styling to a button in Power Pages

1. Begin by creating a new page and adding the Button component to it.

Pages
choose a component

2. To apply custom styling, go to the page you've created and select Edit. This will open Visual Studio Code for editing.

edit in visual code
Edit in visual code

3. Assign a custom class name, such as 'customstyleBtn', to the button element.

customstyleBtn

4. Navigate to the 'web-files' section and locate your 'CustomStyle.css' file.

5. Add your custom CSS rules to style the button according to your preferences.

custom CSS

6. Once you've made your CSS modifications, save the file by pressing 'Ctrl+S' (or the equivalent shortcut for your system). Then, return to your Power Pages site and click on Sync.

sync-code

7. To preview the changes on your site, click Preview and select the Desktop option.

Preview and select desktop option

8. You'll see the final result, showcasing the custom styling applied to the button.

final-output

Conclusion

You can use CSS to style any element on your Power Pages page, including buttons, text, images, and layouts. By using custom CSS, you can create a unique and professional look and feel for your website.

Ready to give your Power Pages website a personalized touch? Start applying custom styling today and unlock endless design possibilities. Get creative and make your website stand out! If you have any questions or need assistance, feel free to reach out. Your unique web design journey begins here.

Basic Template5
Basic Template4
Basic Template3
Basic Template2
Basic Template1
OOTB Template
Consumer Electronics Template
Healthcare Template 2
Real-Estate Template 1
Real-Estate Template 4
Transport Template 1
Environment sustainability Template 1
Environment sustainability Template 4
Digital Media Template 3
Digital Media Template 4
Digital Media Template 2
No items found.

faqS

No items found.
Call-icon

Contact us

How can we help you?
Urgent? Book a time

Thank you!

We will get back to you in one business day.
If this is urgent, Please schedule a time
Oops! Something went wrong while submitting the form.

Subscribe to our Newsletter

Linked-In
Subscribe
Back to all blogs
Related blog
transform-your-business-with-power-pages
Power Pages

Transform Your Business with Power Pages: Versatile Use Cases Across Industries

July 19, 2024

In today's fast-paced digital landscape, businesses need robust, efficient, and user-friendly platforms to stay competitive.

Venkatesh Maran
Venkatesh Maran
Power-Pages-Login-with-Azure-AD
Power Pages

Streamlining Authentication with Azure AD Integration on Power Pages

July 15, 2024

In today's digital landscape, seamless authentication processes are paramount for ensuring user convenience and security.

Subalakshmi
Subalakshmi
how-to-sync-sharepoint-list-with-power-pages-table
Power Pages
SharePoint Services
Microsoft Power Platform

Step-by-Step Guide: Syncing SharePoint List to Power Pages Table

March 1, 2024

In the modern era of data management and analysis, seamless integration between platforms is paramount. SharePoint, a widely used collaboration tool,

Subalakshmi
Subalakshmi
k
Phone
Phone number
+91 98841 89463
+1 737 289 0434
Mail
E-mail
sales@sharepointdesigns.com
Business-Hours
Business-Hours
24/7
Clutch: Microsoft ECM Company 2023Clutch: Microsoft ECM Company 2023

SharePoint Designs is a leading provider of Microsoft ecosystem services – covering apps, intranets, and other digital gateways. We offer out-of-the-box SharePoint development, implementation, migration, and maintenance solutions to build or increase business resilience, operational excellence, and employee productivity. Some of our SharePoint services are Microsoft SharePoint configuration, Microsoft Teams set-up, advanced document management, and streamlined external sharing.

SharePoint Designs’ expertise unlocks the value of Microsoft Power Apps and Power Automate. We help quickly develop and deploy desktop/mobile applications and multi-layered automated workflows. SharePoint Designs also delivers cost-effective Copilot studio services to bridge conversational gaps between employers and customers.

Our suite proficiency makes it effortless to design, manage, and monitor custom-built AI-driven chatbots that are catered to specific organizational use cases. SharePoint Designs is backed by a track record of friction-free integration and smooth deployment for multiple clients across the world. Our flexible pricing plans can meet the unpredictable demands of your business. We also provide 24/7 customer support at global and regional levels.

LookbookModern SharePoint WebpartsBirthday Reminder WebpartWeather Webpartaboutcareers
Privacy PolicyTerms of use
Contact us
Solution
Document ManagementKnowledge ManagementEmployee OnboardingPerformance ManagementProject ManagementIntranet for Small Businesses
servicesIntranetsharePointSharePoint Design Servicesmicrosoft teams AppsPower PagesPower PlatformPower AppsPower automatePower BI (MS Fabric)Copilot StudioAI Agents
case studies
SharePoint Services
Microsoft Teams
Microsoft 365
Microsoft Power Platform
Power Apps
Power Automate
Power Pages
Azure Functions
blogsharePoint ServicesMicrosoft teamsMicrosoft 365Microsoft Power PlatformPower Appspower automatepower pagesazure functions
Lookbook
Modern SharePoint WebpartsBirthday Reminder WebpartWeather Webpart
About
Solution
Document ManagementKnowledge ManagementEmployee OnboardingPerformance ManagementProject ManagementIntranet for Small Businesses
services
IntranetSharePointSharePoint Design ServicesMicrosoft Teams AppsPower PagePower PlatformPower AppsPower AutomateCopilot StudioAI AgentsPower BI (MS Fabric)
case studies
Power Pages
Azure Functions
Power Automate
Power Apps
SharePoint Services
Microsoft Teams
Microsoft 365
Microsoft Power Platform
blog
Copilot
Design
Power BI (MS Fabric)
Artificial Intelligence(AI)
Microsoft Viva
Azure Functions
Power Pages
Power Automate
Power Apps
Microsoft Teams
SharePoint Services
Microsoft 365
Microsoft Power Platform
careers
Link 1Link 2Link 3
CareersPrivacy PolicyTerms of use
CONTACT US
SharePoint Designs © 2025 All Rights Reserved.
facebook-logoLinkedIn-logotwitter-logo
Ask Alfred