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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://strangebutohwell.gitbook.io/knowledge/applications/gitbook/css-overrides.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.