Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Overview

“Portal Styler for Jira Service Desk” enables administrators to style the existing customer portals easily by modifying the CSS and adding arbitrary Javascript.

Info

To configure this App in a way to modify any other CSS, you do need to have a deeper understanding in CSS.

To configure this App in a way to add Javascript, you do need to have a deeper understanding in Javascript..

Use Case Example CSS

This is just an example, you can modify the CSS in any way you like

...

With “Portal Styler for Jira Service Desk” you can modify and extend the customer portals CSS upon load of the request type.

The Customer Portal standard style

...

The Customer Portal changed style

...

Let us see how we can achieve this…

Installing the App from the Marketplace

In Jira go to Manage Apps, search for “Portal Styler” and install “Portal Styler for JSD”.

Make sure to request a evaluation license.

Configuring the App

You can edit your custom css in the Manage Apps Screen

...

Urgent Note

Info

Based on Browser Caching you might need to do a full Browser Reload after applying configuration changes.

Alternate Option, disable and reenable the APP once.

Styling the Portal with CSS - Details

By default, if not configured differently, the app highlights the mandatory field with a red asterisk, as known from Jira.

...

Code Block
/*initial css will be overriden if configured by user*/
.vp-request-form .field-container{
max-width:100%;
min-width:100%;
width:100%;
}

.cp-request-form .field-container{
max-width:100%;
min-width:100%;
width:100%;
}

.vp-request-form .description{
float:left !important;
padding-left:0px!important;
}

.cp-request-form .description{
float:left !important;
padding-left:0px!important;
}

.accxiaEnhanced label::after{
    content: " *";
    font-size: 16pt; 
    color: red; 
}
.accxiaEnhanced label{
    font-size: larger; 
}
/*.accxiaEnhanced input{background-color: #a3c0ea !important;}*/
/*.accxiaEnhanced textarea{background-color: #a3c0ea !important;}*/
.vp-optional {display:none;}

.accxiaEnhanced label[for='reporter']::after{
    content: none;
}

Use Case Example Javascript

This example is taken from here to show how easy to deliver this demand with CSS Portal Styler

https://community.atlassian.com/t5/Jira-Service-Desk-questions/Service-Desk-Portal-custom-links/qaq-p/1408622

Hello is it possible to create a custom link in the customer portal instead of going to an issue type for creation is would go to a Confluence Confiform?

...

The Solution

Just add the custom javascript as shown below, fo demo purposes we simply redirecting the original Link to Google.

...