Bear Blog Announcement Bar

Do you have something to say? Of course you do, that’s why you have a blog.

But sometimes you might want to highlight something new or temporary, like your new newsletter, an option for your readers to give a small donation, or perhaps a webshop.

Say hello to 'Bear Bar' (okay, that's not the official name, but imagine how pawesome it would be to have such a Bear bloggers' watering hole to go to), the latest add-on for the Bearming theme.

I've temporarily added it to my blog as a demo. Here's how to implement it on your blog:

In your dashboard, go to 'Nav' and add whatever you want to announce using a div (a "section") with the class bar. Example:

<div class="bar">Check out this new <a href="/link-to-something/">thing</a>.</div>

Then add the following styles to your theme:

/* Announcement bar */
.bar {
  margin: 20px 0;
  padding: 15px;
  text-align: center;
  font-size: .9em;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.2);
  background: rgb(63,94,251);
  background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
  border: 2px solid var(--accent-color);
  border-radius: 10px;
}
.bar a {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-style: wavy;
  border: none;
}
.bar a:hover {
  background: none;
}

Done! Hope you find it useful.

Wishing you a wonderful weekend!