Adding a notification banner to your Help Center v2

Hi Brett Bowser yes this option is enabled. I'm not 100% sure what it does though to be honest!

Hi all,

Another question from me - I simply cannot get the text colour to change at all. The original code is below:

/* change the background color by editing "background"  */
/* change the text color by editing "color"  */
.ns-box {
    position: relative;
    background: rgba(0,128,0);
    padding: 10px 20px 20px 20px;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    color: rgba(250,251,255,0.95);
    font-size: 85%;
  border-bottom: 1px solid #DDD;

When I amend 'color: rgba(250,251,255,0.95);' and save the style.css, nothing happens to the colour. All I want is white text!!

I can amend the background colour no problem, it's just the text colour which is causing me issue.

RE: my other issues, I am fairly content with how I have got things configured currently - I really appreciate everybody's kind help.

Stuart Buddrige can you post an example of the CSS that you used?

Mine looked something like this 

a[href*="/hc/en-us/articles/44166706125-Order-Taker-Order-Payment"] {
    display:none;
}

Depending on your other styles you may try !important after none.

display: none !important;

Hi David Crichlow could you give me an idea of where your section of code may be in the .CSS? My file is over 6.5k lines and I can't find anything similar to your code at first glance.

Thanks"

Stuart Buddrige I'm not sure I fully understand the question, but I manually added the CSS style close to the top of the CSS file.

David Crichlow I added the below code to my Sandbox instance and I could still view the article (I tried refreshing, using an Incognito window and using a different machine):

a[href*="/hc/en-us/articles/9613354347924-Service-Outage-"] {
    display:none;
}

I also tried:

a[href*="/hc/en-us/articles/9613354347924-Service-Outage-"] {
    display:none !important;
}

Stuart Buddrige my solution doesn't stop you from viewing the article if you have the direct link. It just removes it from the list in the category or section pages. On further thought, a user could still search for the article and find it, so this wouldn't fully solve your problem

I see David Crichlow - thank you for coming back to me. And that's exactly what I'm looking for - currently I have the articles published to a section on the site there is no navigable way to - but if you search for them, you can access them. This is what I'd like to disable,

Any ideas anybody else? Thanks in advance.

Newbie here: Forgive my ignorance, but does adding this banner require modifying code on our Zendesk site? On the GitHub page, you refer to opening the “HTML Tab in Zendesk”; how does one actually open the HTML tab? Is it simply using the “View Source” command (in Safari) to view the web page's underlying code and then modifying it?

I want similar, but in a pop up window format rather than a banner. Is this also possible by modifying codes provided here?

Hello, I am trying to add a banner on my Help centre. So I copy pasted html header on top of the code in the dedicate section. Where should I copy paste the css and js? I tried copy-pasting on top of the code and nothing is coming out in the preview.

Thanks in advance!

Hi, is this still relevant/functional today? I see that the video that was attached to this post was removed. I'm looking to add a notification banner to inform my customers of any outages.

hi, this is still relevant. 

@... - thanks for the response and Hector Jimenez - just let me know if you have any follow-up questions but the instructions should be pretty straightforward.

This is an incredibly helpful and relevant article! I just implemented it for my company. Thank you, ModeratorWes for creating such a useful guide!

I would like to suggest one change because I am from the software development side and not a Zendesk Admin: label/article/alert are HTML/JS keywords while also being Zendesk terms. Luckily, someone in the comments referenced creating a Zendesk article - including screenshots - and everything clicked.

Would someone please consider updating the README with the below?

Article Labels

•  Create or edit one of your articles

To create an article in Zendesk, click Add then Article

In this new window, place the word alert here:

Now, whatever you write in the Title and Body of the article will appear in your alertbox. For example, this:

yields this:

*** this link covers how to create articles in greater detail: https://support.zendesk.com/hc/en-us/articles/4408839258778-Creating-and-editing-articles-in-the-knowledge-base

Of note:

- In this example, only the Title appears because I switched this Boolean value from true to false. If you leave this value as true, then the contents of your Title and Body will display:

- As noted in other comments and FAQs, the Label(s) you apply to your article should coincide with the const label value in your .js file. For example, I left mine as this so that the screenshot above of the Labels value allowed my Title to appear.:

- You can update this line with the Domain Name that is relevant to your company's Zendesk page:

For example, if your company's Zendesk url is something like https://support.sandwich.zendesk.com/hc/en-us then the url value would be https://support.sandwich.zendesk.com/api/v2/help_center/${locale}/articles.json?label_names=${label}`

Is there anyway where we can create schedule for these banners like planned system outage or maintenance?

Hi Vamshi! We don't have a native way to do that, but you could utilize the Github integration for Guide and then use a trigger in Github to schedule your updates. 

how do you make the banner centered and all items next to it has a line break to go below?

With Guide Templating V2, you'll need to import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript . So 

So you need to add something like this to your document_head.hbs

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Anyone has a smart way to display this across all brands and languages?