Skip to main content

Overview​

In the API demos on this site, you'll see some features which are not included in the default Docusaurus styling including the operation method sidebar badges. To add these to your site you can use one of the two options outlined below.

The method labels are pure CSS and as a result there are few, if any, limits on how you style / present these on your site.

Method Badge Styles​

These are the styles implemented on this very demo site.

https://docusaurus-openapi.tryingpan.dev/customization/styling#method-badge-styles
Demo Styles
.api-method > .menu__link,
.schema > .menu__link {
  align-items: center;
  justify-content: start;
}

.api-method > .menu__link::before,
.schema > .menu__link::before {
  width: 55px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 1px solid;
  margin-right: var(--ifm-spacing-horizontal);
  text-align: center;
  flex-shrink: 0;
  border-color: transparent;
  color: white;
}

.get > .menu__link::before {
  content: "get";
  background-color: var(--ifm-color-primary);
}

.post > .menu__link::before {
  content: "post";
  background-color: var(--openapi-code-green);
}

.delete > .menu__link::before {
  content: "del";
  background-color: var(--openapi-code-red);
}

.put > .menu__link::before {
  content: "put";
  background-color: var(--openapi-code-blue);
}

.patch > .menu__link::before {
  content: "patch";
  background-color: var(--openapi-code-orange);
}

.head > .menu__link::before {
  content: "head";
  background-color: var(--ifm-color-secondary-darkest);
}

.event > .menu__link::before {
  content: "event";
  background-color: var(--ifm-color-secondary-darkest);
}

.schema > .menu__link::before {
  content: "schema";
  background-color: var(--ifm-color-secondary-darkest);
}