You’re offline. This is a read only version of the page.
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?
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.
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.
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
Share
Report
All responses (
Answers (
<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.
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>
My header - displaying properly - will look like the image below
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?
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.
#1
Fubar
69
Super User 2025 Season 1
#2
oliver.rodrigues
49
Most Valuable Professional
#3
Jon Unzueta
43
