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
Service Desk Portal custom links
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.
...