CSS Overrides

Use Cloudflare to override CSS on Gitbook

Last updated 4 years ago

CSS Overrides

Use Cloudflare to override CSS on Gitbook

If you are using Cloudflare to point a CNAME DNS record to your Gitbook, you can use the Cloudflare CSS App to inject custom CSS code into the header of the page in order to edit the appearance of Gitbook. For example, removing the 'Powered by Gitbook' branding.

Cloudflare CSS App

Description from Cloudflare:

Sometimes the styling and theming options available for an app just don’t fit your needs. If you know CSS, or you have a snippet, the Add CSS app has got you covered. Add CSS allows you insert CSS into the <head> of your website, making it easy to make small style adjustments to any other app you install with Cloudflare Apps.

CSS Code

gitbook-overrides.css

[class*="-footer-"], [class*="-navPagesLinks-"], [class*="-pageFooterColumns-"] { display: none !important }

[class*="-body-"], [class*="-bodyContent-"], [class*="-wholePageSticky-"], [class*="-whiteCard-"] { 
  color: #aaa !important; 
  background: #001 !important;
  border-color: #1e1e1f !important;
  box-shadow: unset !important;
}

[class*="list-"] { color: #aaa !important }

[class*="--header-"] {
  box-shadow: 0 3px 8px 0 rgba(0, 8, 14, 0.1) !important;
  border-bottom: 1px solid #031d33 !important;
  background-color: #151515 !important;
}

[class*="--header-"] [class*="--iconBackground-"] { background: unset !important }
[class*="--header-"] [class*="--logoDisplayNameContainer-"] { color: #aaa !important }

[class*="--headerLeftColumn-"]:after, [class*="--headerInnerWrapper-"]:after, [class*="--searchInputWrapper-"]:before { 
  background: transparent !important;
  border-color: transparent !important;
}

[class*="--searchInput-"] { background-color: #1f1f1f !important }
[class*="--sheetOpened-"] { background-color: #111 !important }
[class*="--sheetHeader-"] { border-bottom-color: #1d1f21 !important }
[class*="--inputWrapper-"] { background: #232323 !important }
[class*="--inputInner-"] { color: #fff !important }

@media screen and (min-width: 1024px) {
  [class*="-contentNavigation-"] {
    width: unset !important;
    padding-left: unset !important;
  }
}

[class*="-contentNavigation-"], [class*="-sidebarMain-"] { background-color: #000f1f !important; }
[class*="-contentNavigation-"] { border-right: 1px solid #092033 !important; }
[class*="-sidebarMain-"] [class*="-pageItemWithChildrenNested-"] { border-left-color: #032f52 !important; }
[class*="-sidebarMain-"] [class*="-navButtonOpened-"] {
  background-color: #000810 !important;
  border-color: #032f52 !important;
}
[class*="-sidebarMain-"] [class*="-pageDocumentChildren-"]::before { background: #032f52 !important }
[class*="-sidebarMain-"] [class*="-navButtonClickable-"]:hover { background-color: #002040 !important }

[class*="-pageHeader-"] { border-bottom-color: #1d1f21 !important }
[class*="-pageTitle-"] { color: #e2e2e2 !important }
[class*="blockHeading"] { color: #a2a0a0 !important }
[class*="blockHeading1WithMargin"]::before { background-color: #1d1f21 !important }

[class*="code-"] { 
  background-color: #11203a !important; 
  color: #fff !important;
  font-size: 14px !important;
}

[class*="tableRow-"] { 
  background: rgb(4, 18, 23) !important;
  color: #ccc;
  border-bottom-color: rgb(24, 38, 55) !important;
}
[class*="tableRow-"]:first-child {
  background: rgb(34, 48, 83) !important;
}

[class*="blockHint-"] { background-color: #222 !important }

What does !important mean in CSS?

How !important Changes the Priority

The !important directive affects the way in which your CSS cascades while following the rules you feel are most crucial and should be applied. A rule that has this directive is always applied no matter where that rule appears in the CSS document. Use !important for testing or, in some cases, when you absolutely must override an inline style that is part of a theme or template framework.

PreviousGitbook NextPiHole