📓
Knowledge
  • Knowledge Base
  • Applications
    • Gitbook
      • CSS Overrides
    • PiHole
      • Automated Whitelist Script
      • Block Lists
      • Config Files
      • DNS over HTTPS
      • Local DNS
    • SSH
      • SCP
      • SSH Keys
        • ssh-add
        • ssh-agent
        • ssh-keygen
      • SSH on Windows
      • SSH on macOS
    • Youtube-DL
      • Youtube-DL Config File
      • Youtube-DL .netrc File
  • Linux
    • Administration
      • dmesg
      • Unattended Upgrades
      • cron
        • cron.d Directory
        • Listing cron jobs
      • sudo
        • BUG: setrlimit(RLIMIT_CORE) Error
        • Add Sudo Privileges to User
      • System Restart Required
    • Applications
      • Apache
      • ddclient
        • Installing Latest (ddclient)
        • Cloudflare DNS (ddclient)
        • Commands (ddclient)
      • PHP
      • NGINX
        • Configuration Files Structure
    • Commands
      • ln -s : Symbolic Links
      • rsync
    • File System
      • File Management
        • Extended Attributes
        • find (command)
        • rsync (command)
        • tar (command)
      • File Sharing
        • AFP
        • SAMBA
        • NFS
      • Volume Management
      • ZFS on Linux
        • Reference Guides
        • Installing ZFS on Debian
        • Migrating ZFS Pools
        • sharenfs - Native ZFS NFS shares
    • Hardware
    • Networking
      • Disable IPv6
    • New System Setup
      • Debian Setup Guides
      • Disable CloudInit (Ubuntu)
      • Recommended packages
    • Package Management
      • apt Commands
      • apt Logs & History
      • Getting info about Packages
      • dpkg
      • dpkg-query
    • Performance & Diagnostics
      • Memory Usage
      • SMART Drive Tools
      • System Information
    • Remote Desktop
    • SystemD
      • Delay Docker until after ZFS init
      • Documentation for SystemD
      • Show Service's Connections
    • Users & Groups
      • Adding New Users
  • Shells
    • Change Default Shell
      • macOS
    • Get Shell Information
    • Screen
    • Terminal Emulators
      • iTerm2
    • zsh
      • macOS Config
  • macOS
    • Hostname - macOS
    • Homebrew
      • Formulae (packages)
        • speedtest-cli
  • BASH
    • Check if File / Directory Exists
  • Docker
    • Docker Networking
    • Install Docker
      • Enable Memory Swappiness - Linux
    • Docker Compose
      • Environmental Variables for Compose
    • Docker Networking
    • Docker Commands
      • docker attach
  • Python
    • Virtual Environments
  • Web Services
    • DNS Records
      • DNS SPF Record
      • WHOIS - Lookup
    • Domain Parking
    • IANA Registered Ports & Services
Powered by GitBook
On this page
  • Cloudflare CSS App
  • Description from Cloudflare:
  • CSS Code
  • What does !important mean in CSS?
  • How !important Changes the Priority
  1. Applications
  2. Gitbook

CSS Overrides

Use Cloudflare to override CSS on Gitbook

PreviousGitbookNextPiHole

Last updated 4 years ago

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.

From GitHub:

vishaltelangre/gitbook-overrides.css
Cloudflare Apps
Cloudflare Add CSS App
When Should You Use !important in CSS?ThoughtCo
Logo
Logo