web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Header is not displaye...
Power Pages
Unanswered

Header is not displayed properly

(0) ShareShare
ReportReport
Posted on by minhtri2000 21

I created several similar websites, with the same header and footer. 

I use the default themes template, and the header includes:
- the left side is the logo and the contact person
- the right side are pages/sub-pages and sign-in/register


Today i go to the dashboard of my sites, except for the first site, the header of other pages are not showing properly - see attached image.


I want the headers of these sites changed back to the original design (like the first site), how to do?


minhtri2000_0-1656906945586.png

 

Categories:
General topics
I have the same question (1)
  • ragavanrajan Profile Picture
    ragavanrajan 7,044 Most Valuable Professional on at

    Hi @minhtri2000 

     

    Looks like your image url is turned in to relative url. Can you post your header code here. You can get this in design studio > top right > edit code. 

     

    Make sure you are using absolute url for your images. 

     

    Hope it helps. 

     

    ------------

     

    If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

  • minhtri2000 Profile Picture
    minhtri2000 21 on at

    Thanks @ragavanrajan 


    You say "You can get this in design studio > top right > edit code.",  Do you mean the button "</>" (circled red in image attached)?
    When I click on that button, it's the Home page edit and the first line code is below:

    <div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 20px; background-color: var(--portalThemeColor3); background-image: url('/imgbgheader.png'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>

    minhtri2000_0-1656996540449.png

    My header - displaying properly - will look like the image below

    minhtri2000_1-1657005216198.png

     



     

     

    I wonder why all of my site are changed? Is the reasion related when have a change on the portal (dynamic 365)? 


    And if I want the a site back to the original default of Powerpages, how to do it? 

  • ragavanrajan Profile Picture
    ragavanrajan 7,044 Most Valuable Professional on at

    Hi @minhtri2000 

     

    You are in the right place. on the code you have. You can look for Img src tag. It must be a relative URL. I am not aware of the exact reason why your headers are corrupted. But to fix your issue. 

     

    Click on the header or img logo and press the edit code icon and paste in the following code 

     

     

    <div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px; background-color: var(--portalThemeColor1);">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-6 col-md-push-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Geometric-4.png" alt="" name="Geometric-4.png" style="width: 117%; height: 305.545px; max-width: 100%;"></div>
 <div class="col-md-6 col-md-pull-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <h1 style="text-align: left; color: var(--portalThemeColor7);">Create an engaging headline, welcome, or call to action</h1><button onclick="window.location.href='/'" type="button" value="/" class="button1">Add a call to action here</button>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 28px; background-color: var(--portalThemeColor3);"></div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px;">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <h2 style="text-align: center;">Introduction section</h2>
 <p style="text-align: center;">Create a short paragraph that shows your target audience a clear benefit to them if they continue past this point and offer direction about the next steps</p>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px;">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-4 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Circle-1.png" alt="" name="Circle-1.png" style="width: 108px; height: 108px; max-width: 100%; margin-left: auto; margin-right: auto;">
 <h3 style="text-align: center;">Featured Item 1</h3>
 <p style="text-align: center;">Create a short description or engaging message to motivate your audience to find out more about this item.</p>
 </div>
 <div class="col-md-4 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Circle-2.png" alt="" name="Circle-2.png" style="width: 108px; height: 108px; max-width: 100%; margin-left: auto; margin-right: auto;">
 <h3 style="text-align: center;">Featured Item 2</h3>
 <p style="text-align: center;">Create a short description or engaging message to motivate your audience to find out more about this item.</p>
 </div>
 <div class="col-md-4 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Circle-3.png" alt="" name="Circle-3.png" style="width: 108px; height: 108px; max-width: 100%; margin-left: auto; margin-right: auto;">
 <h3 style="text-align: center;">Featured Item 3</h3>
 <p style="text-align: center;">Create a short description or engaging message to motivate your audience to find out more about this item.</p>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 52px; background-color: var(--portalThemeColor6);"></div>
<div class="row sectionBlockLayout sectionPrimaryColor" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; height: 15px; min-height: 52px; background-color: var(--portalThemeColor5);">
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px; background-color: var(--portalThemeColor3);">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-6 col-md-push-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><video allowfullscreen="allowfullscreen" src="/Video1.mp4" controls="controls" autoplay="" muted="" style="max-width: 100%;"> </video></div>
 <div class="col-md-6 col-md-pull-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <h1 style="color: var(--portalThemeColor7);">Showcase a video</h1>
 <p style="text-align: left; color: var(--portalThemeColor7);">Videos are optional, but are often used to summarize the benefits of a product or service. Describe the video content and give viewers a clear reason to click. </p><button onclick="window.location.href='/'" type="button" value="/" class="button1">Add a call to action here</button>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 52px; background-color: var(--portalThemeColor1);"></div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px;">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Graph-1.png" alt="" name="Graph-1.png" style="width: 100%; height: auto; max-width: 100%;"></div>
 <div class="col-md-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <h2>Product or service one</h2>
 <p>Highlight specific benefits of a product or service and invite your site visitors to learn more about how it works and why your organization is the right one to meet their unique needs.</p>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px;">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-6 col-md-push-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Site-mockup-1.png" alt="" name="Site-mockup-1.png" style="width: 100%; height: auto; max-width: 100%;"></div>
 <div class="col-md-6 col-md-pull-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <h2>Product or service two</h2>
 <p>Highlight specific benefits of a product or service and invite your site visitors to learn more about how it works and why your organization is the right one to meet their unique needs.</p>
 <div><br></div>
 <p></p>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px; background-color: var(--portalThemeColor3);">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;"><img src="/Geometric-2.png" alt="" name="Geometric-2.png" style="width: 102.56%; height: 343px; max-width: 100%;"></div>
 <div class="col-md-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <h1 style="color: var(--portalThemeColor7);">Share a story</h1>
 <p style="color: var(--portalThemeColor7);">Main pages often include links to stories about how individual people or organizations benefit from interacting with your organization.</p><button onclick="window.location.href='/'" type="button" value="/" class="button1">Add a call to action here</button>
 </div>
 </div>
</div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 52px; background-color: var(--portalThemeColor2);"></div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 52px; background-color: var(--portalThemeColor5);"></div>
<div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; text-align: left; min-height: 50px; background-color: var(--portalThemeColor1);">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px;">
 <div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 120px;"></div>
 <h1 style="text-align: center; color: var(--portalThemeColor7);">Introduce another idea</h1>
 <p style="text-align: center; color: var(--portalThemeColor7);">This section can be used to offer supporting information or introduce a new idea. It’s best to keep it relevant to the contents of the page so it doesn’t feel out of place. Common topics include a summary of your organization’s mission, people,
 or an upcoming event with links to provide more information. </p>
 <div class="row sectionBlockLayout" style="padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 120px;"></div>
 </div>
 </div>
</div>

     

     

    You can find all img src tag and replace them with absolute URLs if you like. Ex: your https://yourportal.powerappsportals.com//image01.jpg 

    Hope it helps. 
    ------------

    If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

  • minhtri2000 Profile Picture
    minhtri2000 21 on at

    It's not only image.
    Thanks @ragavanrajan again. I think I explain not clearly so you don't understand. To reduce effort and time, I have created new sites, it's easy and faster.

  • ragavanrajan Profile Picture
    ragavanrajan 7,044 Most Valuable Professional on at

    No worries @minhtri2000. usually, due to a web template crash, this will occur. But can be any different reason.  You can use VSCode and Power Platform CLI to download the code to your local for backup. 

     

    https://docs.microsoft.com/en-us/power-pages/configure/cli-tutorial 

     


    Hope it helps. 
    ------------

    If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Fubar Profile Picture

Fubar 74 Super User 2025 Season 2

#2
Jerry-IN Profile Picture

Jerry-IN 55

#3
sannavajjala87 Profile Picture

sannavajjala87 31

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals
Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans