To add quicklinks to the announcement banner in Jira

Jira quicklinks in the announcement banner

Share

Jira is designed to be clear in itself. You have a menu bar with some fixed links. However, these are either given by the system or are added directly by plugins. However, if you always work on the same project, create countless tickets for the same project or work with tools outside of Jira (e.g. Hubspot or Confluence). Or maybe you want to give your users direct access to internal support. In that case, you can add quicklinks like buttons, images or other text elements directly below the Jira menu.

This works via the system settings and the menu item User Interface and Announcement Banner.

Jira quicklinks in the announcement banner

What is the announcement banner and how does it work?

As the name suggests, you can use the announcement banner primarily to, well, make announcements to all Jira users. What you end up announcing is up to you, of course. However, we at XALT, or some of our customers, use the banner mainly to announce important news internally. These are for example system changes, updates or new plugins. 

In addition, we use the announcement banner at our partners to provide quicklinks as a button, which greatly simplifies or accelerates the ticket creation for a specific Jira project.

Jira quicklinks in the announcement banner

How does the announcement banner work?

The announcement banner is based on HTML and CSS and can be designed with basic knowledge and customized at any time. Just go to the system settings, search for User Interface in the menu on the left side and click on Announcement Banner.

Here you have the possibility to design the banner according to your wishes. Jira also offers you the option of displaying the banner only for logged-in users or publicly, i.e. for everyone.

Pro tip: Simply create multiple templates and code snippets to customize the content or design at any time.

To add a quicklink as a button

The Jira interface already provides some great HTML elements or classes that you can use afterwards. To find out which classes are suitable as buttons, simply open the developer tools (F12) of your browser and inspect the element you want to insert into the banner. In our case, a standard Jira button, uses the classes.

Jira quicklinks in the announcement banner
.aui-button.aui-button-primary, .aui-button.aui-button-primary:visited

You will then use this class during the creation of the quicklink.

Pro tip: Create your own classes and use custom CSS to style all elements according to your wishes (or branding)).

Jira quicklinks in the announcement banner

For example, to create this button, you can use the following code:

<a id="create_issue" class="aui-button aui-button-primary aui-style create-issue" style="margin: 10px; display: block; position: relative; width: 200px; text-align: center;" title="Request Permission" href="[Insert your link here]">Example Button

In order to use the Quicklink to create a ticket for a project, you have to find out the ID of the Jira issue type you want to create. To do so, simply go to the Issue Type overview in the Admin Settings and navigate to the issue type you want to address directly. Hover over the "Edit" button and check the URL displayed in the lower left area of your browser. Make a note of the ID.

Project and Issue ID

Afterwards you only need the project ID. You can find it in the project overview in the admin area. Navigate to the Actions column in the overview, click on the 3 dots and place your cursor over "Edit" again. Afterwards you proceed similarly as with the Issue-ID.

Jira quicklinks in the announcement banner

The link should then look like this: 

https://example.domain.de/secure/CreateIssue.jspa?issuetype=12345&pid=12345

Once you're done creating your button, click "Set banner" and the interface will automatically update. Are you happy with the result and the quicklink does what it should? Perfect!

Add more elements to the announcement banner

Of course you can use the function for other things and add elements of your choice. 

Add text elements - headings, paragraphs and more

To add simple text sections with headings, it's best to use the standard HTML tags, <h1>, <h2>, <h3>,<p> or for simple links then <a>. 

This is how you create the following design: 

Add Quicklinks
<style>
#announcement-banner {
background-color: #c5dff0;
}
#announcement-banner h1, #announcement-banner p{
color: #262626!important;
text-align: center;
}
p {
font-size: 18px;
}
</style>

<h1 style="margin: 10px; display: block;">This is how you create cool announcements</h1>

<p style="margin:10px;">You can add anything you want to the Announcement Banner by using HTML and CSS.<br>For example, a button that lets you create a ticket for an important project.</p>
Announcement Banner Jira

Adding images and wallpapers

To be able to add background images to your banner, the image used must be located on a server that you can access. This can be your content management system (CMS), website or even your company website.Cloud be. The only important thing is that your Jira can access it. Upload the image and note the URL. In our case, we use an image of our WordPress instance.

<style>
#announcement-banner {
background-color: #c5dff0;
background-image:url('https://www.deinedomain.de/hintergrundbild.png');
background-position: center center;
background-size: cover;
padding: 120px 0px;
}

#announcement-banner h1{
font-size:35px;
color: #fff!important;
text-align: center;
margin: 10px; 
display: block;
}
</style>

<h1>This is how you add background images</h1>

Pro Tip: With the additional CSS code   you can also put an overlay over the background image to make the text more visible.

However, when using a background image, make sure that it doesn't take up too much space and that the banner is behind the other UI elements after scrolling.

What you can also do as a Jira admin is to save several code snippets as templates in a text file. Then you can change the announcement banner or the quicklink in Jira at any time, depending on your needs.

Summary - Announcement banners and quicklinks for Jira

So you see, customizing the announcement banner and adding quicklinks is quite easy and can be adapted to your needs. About CSS you can still give them a cool style. 

You need support with the configuration of your Jira instances or want to know what power is still in Jira dormant? Our Atlassian consultants will be happy to help you. Just send us a message with your questions ???? .

This might also interest you

Mario Schaefer 2023-08-22
0

Jira vs Jira Service Management vs Jira Work Management

In today's fast-paced digital world, effective project management is the cornerstone of successful business operations.

Atlassian
Mario Schaefer 2023-07-06
0

A comparison of popular container orchestration tools.

Table Of ContentsshowOverview: Container orchestration toolsExplanation of common toolsKubernetesWhy is Kubernetes so popular?Use casesComparison with

As a DevOps
Daniela Jesz 2023-07-04
0

TeamXALT Summer Event 2023

In a fast-paced business world, interpersonal relationships in the workplace are critical to a positive and productive work environment.

XALT News
Shopping cart

B/S/H

BSH Hausger├Ąte GmbH is the largest manufacturer of household appliances in Europe and one of the world's leading companies in this sector.

Projects & Solutions