> For the complete documentation index, see [llms.txt](https://strangebutohwell.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://strangebutohwell.gitbook.io/knowledge/applications/gitbook/css-overrides.md).

# CSS Overrides

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.&#x20;

## **Cloudflare CSS App**

{% embed url="<https://www.cloudflare.com/apps/add-css>" %}
Cloudflare Add CSS App
{% endembed %}

### 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

From GitHub:  [vishaltelangre/**gitbook-overrides.css**](https://gist.github.com/vishaltelangre/30c170a6235cb979937522941b802805)

{% code title="gitbook-overrides.css" %}

```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 }
```

{% endcode %}

## What does !important mean in CSS?

{% embed url="<https://www.lifewire.com/what-does-important-mean-in-css-3466876>" %}

### &#x20;How !important Changes the Priority <a href="#mntl-sc-block_1-0-14" id="mntl-sc-block_1-0-14"></a>

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.