Navigate

Documentation GeneratorCSS Classes

LucyBot supports adding CSS to the page (see Including Assets for more info).

Your CSS will be included after all third-party and LucyBot CSS, so you can override any style you see on the page.

The easiest way to do this is to use your browser's console to inspect page elements (CMD + Shift + C in Chrome), but we provide some helper classes below for common customizations.

Want to customize something that isn't listed here? Let us know!

UIs

If you want to specify a style that only applies to a certain UI, you can use classes applied to the <body> tag:

body.ui-documentation {
  background-color: blue;
}
body.ui-console {
  background-color: red;
}
body.ui-markdown {
  background-color: green;
}

The title at the top of every page has the .breadcrumbs class:

.breadcrumbs {
  font-size: 42px;
}

For example, you can hide the first part of the title on mobile:

@media (min-width: 768px) {
  .breadcrumbs span:first-child,
  .breadcrumbs .fa-chevron-right {
    display: none;
  }
}

Side Menu

The left-hand navigation has the .side-menu class:

.side-menu {
  box-shadow: none;
}

Markdown Content

Markdown content in the documentation UI can be selected with the .docs-contents class:

.docs-contents pre {
  border: 1px solid #ccc;
}

HTTP method colors

HTTP operation titles will have GET/POST/DELETE with an appropriate background color. You can change these by selecting span[data-method]:

span[data-method="delete"] {
  background-color: red;
}

Fixed-position Navbar and Menu

A common modification is to fix the navbar and side menu so they are always visible, even when the user scrolls down the page.

To achieve this, add the class navbar-fixed-top to your <nav> in navbar.html (see Navbar and Footer).

You'll also need to add padding to the body per the Bootstrap docs:

body {
  padding-top: 70px; /* adjust based on the size of your navbar */
}

To keep the side menu in fixed position, add the following CSS (we use @media queries to restrict to desktop since the side menu UI is different on mobile):

@media (min-width: 768px) {
  .side-menu {
    position: fixed;
    top: 70px; /* adjust based on the size of your navbar */
    bottom: 0px;
    left: 0px;
    width: 33.33%;
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .side-menu {
    width: 25%;
  }
}