Portal Appearance
Portal Appearance
Overview
Each customer portal appearance is configurable. You can customize:
Logo
Banner
Footer
The Header color will be inherited from Jira.
![](../../__attachments/3254386940/image-20230426-215915.png?inst-v=0ec633b7-7887-4011-80be-da1f370f2441)
Setting Up
Navigate to HelpDesk Settings → Customer Area → Portals → portal → Appearance
![](../../__attachments/3254386940/image-20230426-215932.png?inst-v=0ec633b7-7887-4011-80be-da1f370f2441)
1. Set Up Logo
To set up a logo specify the link to the logo file in the Logo section. You can also add a link to the Portal main page to the logo.
Example
<a href="https://YOUR_JIRA_NAME/secure/hdportal!default.jspa"><img alt="ALT TEXT" src="FILE_PATH"></a>
To show your default Jira logo, copy the file path from System → Look and Feel → Logo (from the context menu).
![](../../__attachments/3254386940/image-20230426-220059.png?inst-v=0ec633b7-7887-4011-80be-da1f370f2441)
2. Set Up Banner
To set up a Banner put the relevant html-code in the Banner section.
Example
<style>
.banner-img {
position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://images.pexels.com/photos/3631430/pexels-photo-3631430.jpeg");
height: 200px;
}
.caption {
position: absolute;
left: 0;
top: 43%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #000000;
color: #fff;
padding: 10px 105px;
font-size: 25px;
letter-spacing: 10px;
}
</style>
<div class="banner-img">
<div class="caption">
<span class="border">SUPPORT FOR EVERYONE</span>
</div>
</div>
3. Set Up Footer
To set up a footer put the relevant html-code in the Footer section. You can also add a link to some resources if required.
Example
<style>
.footer {
background-color: black;
}
</style>
<div class="footer">
<p class="portal-descr" style="text-align: center;"><span style="text-align: center; color: rgb(255,255,255);">Powered by HelpDesk for JIRA</span></p>
</div>