nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Code for the legend on the landing page under components

Mark Morrell

Hi,

I am trying again to add the legend to the page under the status of our components, I originally added the code into the page for the legend but am no longer able to find that code anywhere as I removed it

I am not a developer in any shape or form and we are working to just have a neat informative page, this would be useful to have this legend on the status for our employees.

The legend I mean is the icons and text for

Operational

Degraded Service

Partial Outage

Major Outage

Maintenance

TIA

Mark

Accepted answers

Nick Coates

Hi @Mark Morrell

Welcome to the Atlassian Community.

I've checked the source code and have extracted it for you. I've tested the code in my test page and works (although you may need to play around with the CSS to tweak it).

1. Insert this code into the CSS customization

2. Insert this code into the HTML footer customization

Hope this helps

Thanks,
Nick

All comments

Mark Morrell

Hi, For reference , you may have seen this added to other pages at the bottom of their components like here - https://status.ucdavis.edu/, it's frustrating as I added it but never documented my changes..

Nick Coates

Hi @Mark Morrell

Welcome to the Atlassian Community.

I've checked the source code and have extracted it for you. I've tested the code in my test page and works (although you may need to play around with the CSS to tweak it).

1. Insert this code into the CSS customization

2. Insert this code into the HTML footer customization

Hope this helps

Thanks,
Nick

Mark Morrell

Thankyou @Nick Coates I appreciate you taking the time to look at the code, the code has been added as suggested although it displays at the bottom of the page and not under the components section and above Past incidents, I have played around and still unable to position correctly. - thankyou

Diego Zamora_459j7c

Nick, the links do not work anymore... can you please share the new links? i'm specifically looking for the one related to CSS

Laurent_mxxb7u

@Jesse Klein @Egor - can you help here please - we're also looking for the CSS to add the legend as shown above but it is missing in the github repository

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

statuspage