Bearming Add-ons

A collection of optional add-ons for the Bearming theme for Bear blog, giving you more ways to personalize your blog.

The page is regularly updated with new nifty add-ons (last updated 2 days, 19 hours ago). Do you have any requests? Contact me and I’ll see what I can do (no promises, though).

Theme Add-ons Palettes

/* Highlight active navigation tab */
.home nav .nav-home a,
.blog nav .nav-blog a,
.page nav .nav-page a {
  background: var(--light-color);
}

To use the highlighted tab, it works best if you only have Home, Blog, and a Page in your navigation. Example code:

<span class="nav-home">[Home](/)</span> <span class="nav-blog">[Blog](/blog/)</span> <span class="nav-page">[Contact](/contact/)</span>

Rounded image corners

/* Rounded corners for images */
img {
  border-radius: 10px;
}

Headings tweak

/* Make heading sections more distinctive */
main h2, h3, h4, h5, h6 {
  margin: 30px 0 -5px;
}

Upvote button

/* Upvote button */
.upvote-button svg {
  display: none; 
}
.upvote-button {
  font-family: var(--font-secondary);
}
.upvote-count { 
  font-size: .8em;
}
.upvote-button:hover {
  cursor: pointer;
}
.upvote-button::before {
  content: "☆";
  color: var(--text-color);
  font-size: 1.5em;
}
.upvote-button[disabled] {
  cursor: default;
}
.upvote-button[disabled]::before {
  content: "★";
  color: var(--text-color);
  font-size: 1.5em;
}
.upvote-button.upvoted {
  color: var(--text-color) !important;
}

Guestbook styles

/* Guestbook via guestbooks.meadowing.club */
#guestbooks___guestbook-messages-container blockquote {
  margin: -5px 0 40px;
  padding: 20px 30px;
  font-style: normal;
}
#guestbooks___guestbook-messages-header::before {
  content: '💬';
  margin-right: 7px;
}

Image caption

/* Style for <figcaption>Image description</figcaption> */
figcaption {
  display: table;
  width: auto; 
  margin: -5px auto 25px;
  padding: 5px 12px;
  color: var(--text-color);
  opacity: 0.9;
  font-family: var(--font-secondary);
  font-size: .8em;
  text-align: center;
  background: var(--accent-color);
  border-radius: 5px;
}

Table styles

/* Styles for tables */
table {
  text-align: left;
  font-family: var(--font-secondary);
  color: var(--background-color);
  background-color: var(--link-color);
}
thead th,
tfoot th,
tfoot td {
  padding: 3px 0 3px 7px;
}
td {
  padding: 7px 0 7px 8px;
  font-size: 1.1em;
  font-family: monospace;
  color: var(--text-color);
}
tbody tr:nth-child(odd) {
  background-color: var(--accent-color);
}
tbody tr:nth-child(even) {
  background-color: var(--background-color);
}

Avatar title

/* Title with avatar */
.title h1 {
  display: flex;
  margin: 0 0 5px;
  align-items: center;
}
.title h1::before {
  margin: 0 15px 3px 0;
  content: "";
  background: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/robert-1724674809.jpeg") no-repeat;
  background-size: 40px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

Post excerpts

To use the post excerpts add-on below (see example on my home page), add the 'meta_description' attribute in your posts and use the description syntax for your embedded posts list (see the Bear documentation for more information).

/* Show post excerpts */
ul.embedded.blog-posts li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
ul.embedded.blog-posts li time {
  float: left;
  margin: 15px 0 0;
  text-transform: none;
}
ul.embedded.blog-posts li a {
  overflow: visible;
  white-space: normal;
  font-size: 1.2em;
  font-weight: bold;
}

Testimonials feature

To use the post testimonials add-on below (see example on the Bearming Testimonials) page, use blockquote for the text, bold for the name, and wrap it in a div with the class 'testimonials'. Example:

<div class="testimonials">

> The awesome text from someone.
**Some Name**

</div>

/* Testimonials */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
  margin: 30px 0;
  font-family: var(--font-secondary);
  font-size: .9em;
}
.testimonials blockquote {
  width: 310px;
  margin: 0;
  border-radius: 10px;
  background: var(--accent-color);
  border: 2px solid var(--link-color);
}
.testimonials p {
 display: flex;
 flex-direction: column;
 margin: 0;
}
.testimonials p::before {
  position: relative;
  margin: 0 0 -15px;
  content: "\275E";
  text-align: right;
  color: var(--link-color);
  font-size: 3em;
}
.testimonials strong {
  margin: 15px 0 20px;
  font-style: normal;
}
.testimonials strong::before {
  content: "—";
  margin-right: 8px;
}

Image gallery

To use the post gallery add-on styles below, see the page Image Gallery for Bear Blog for example and instructions.

/* Gallery */
.gallery ul  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 12px;
  padding: 20px 0;
  list-style: none;
}
.gallery li {
  position: relative;
  flex-basis: calc(50% - 20px);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Image logo

Logo Replace the ’width’ and ’height’ values with the size of the image that you are using for your blog:

/* Replace logo text with image */
.title h1 {
  width: 300px; 
  height: 100px;
  background: url("https://link-to-your-logo.jpg");
  text-indent: -9999px;
}

Search

To use the search add-on styles below (example), first read this Step-by-Step Guide: Implementing Search in Bear Blog by Yordi.

/* Search */
.blog input {
  width: 200px;
  margin: -15px 0;
  padding: 6px 12px;
  font-family: var(--font-secondary);
  font-size: .8em;
  color: var(--text-color);
  background: var(--accent-color);
  border: 1px solid var(--link-color);
  border-radius: 18px;
}
.blog ::placeholder {
  color: var(--link-color);
  opacity: inherit;
}

Statuslog

Integrate the Statuslog feature from omg.lol seamlessly with the styles of the Bearming theme. Simply add the statuslog script to the Bear footer directive and add the styles below to your theme (see it in action in my footer).

/* Statuslog */
.statuslol {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 10px 0 30px;
  padding: 20px;
  font-family: var(--font-secondary);
  font-size: 1.1em;
  color: var(--text-color);
  background: var(--accent-color);
  border: 1px solid var(--link-color);
  border-radius: 10px;
}
.statuslol_emoji_container {
  min-width: 94px;
  flex: 0;
  font-size: 2.5em;
}
.statuslol_content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  margin: -12px 0 0;
  text-align: left;
  overflow-wrap: break-word;
}
.statuslol_time {
  font-size: .9em;
  font-weight: bold;
}

Robert Birming