Static Banner / Announcement

[Rwarcards762]

Heyo, recently getting in to MKDocs-Material and the Announcement feature caught my eye. I was hoping there would be more documentation on how to take advantage of the element, but the docs are minimal in regards to this.

I know it supports arbitrary HTML, but I'm not sure in what method I could achieve my goal. I'd like to have a static banner across the site, and the announcement seems like the only manner this can be done -- unless there is a way to superimpose a banner somewhere else.

My issue is I would want to make it thinner, center text, change background/foreground colors, and also sticky to the top while scrolling (instead of disappearing.) I know centering and colors are likely easily achieved with HTML. Not sure on the rest (since those I would think involve the element itself.)

I'm pretty limited in familiarity with HTML/CSS so it all goes a bit over my head. Was looking for some guidance or solutions on this sort of idea. Thanks in advance!

[squidfunk]

Thanks for asking. If you would like to always show the bar, you could extend the header block and place your code above the include, as the bar that is rendered for the announce block as mentioned on the documentation will always disappear. Please see the documentation of overriding template blocks to learn how this works.

I'm afraid I can't provide a full solution to your problem, as I can't invest my time into customization for single users, but if you ask somebody with basic HTML and CSS know-how, he should be able to pull it off in short time.

[Rwarcards762]

Thanks for the quick reply! I'll look into it with that in mind.

If I do end up with a proper solution, I'll try and paste it here for others to reference in the future if they want a similar setup.

[Rwarcards762]

For anyone in the future looking to add a simple banner, here's the methodology that finally got me a solution!
Figuring out the CSS options needed to get everything to render properly was absolutely the most difficult part as someone with little-to-no CSS/HTML experience before this. Plenty of tries where the banner would get swallowed by the header.

Thanks again for pointing me in the right direction, @squidfunk!

In your HTML Overrides...

{% extends "base.html" %}

{% block header %}
<!-- Custom Banner -->
<div class="banner">
    <p style="color:COLOR_HERE; display:inline;">TEXT GOES HERE!</p>
</div>

<!-- Original Header -->
{% include "partials/header.html" %}
{% endblock %}

In a custom CSS file...

.banner {
    height: 12px;       /* Height of the banner */
    position: sticky;   /* Follows as you scroll */
    top: 0;             /* Absolute top of page */
    left: 0;
    width: 100%;
    z-index: 1;         /* Tells the renderer "this is important", otherwise Admonition and Code Blocks will render into it */
    text-align: center;
    background-color: COLOR_HERE;
}

.md-header {
    top: 12px;          /* This setting prevents the Material header from imposing into the space of the banner! */
}