How to override theme.css now?

[nzbart]

It appears that the documentation is out of date. The current instructions say to override theme.css, but it appears that theme.css disappeared in 6c00c53d5f471ffbb24705671b971433ced65ebd.

The out-of-date documentation says:

Overide Existing CSS Or JS Create the matching file in your static folder, hugo will use yours instead of the theme’s one. Example : create a theme.css and place it into static/css/ to fully overide docdock’s theme.css

What's the recommended way of overriding themes now?

[jonathonlacher]

For the original theme, I was able to override the CSS by placing it at: static/theme-original/style.css

[nzbart]

I believe that the docs still need to be updated.

The solution that I used, which avoids copying the entire theme into my own codebase, was to load my own JavaScript and CSS files that I then use to tweak the styles.

I used a custom header partial layouts/partials/custom-head.html to load the files:

<link rel="stylesheet" href="/css/custom.css">
<script src="/js/custom.js"></script>

Then overrode the style I wanted to change in static/css/custom.css (in this case, to avoid altering the casing of titles):

h2 {
    text-transform: none;
}

And executed some additional JavaScript from static/js/custom.js (note that jQuery is already loaded by the theme):

function tweakPage() {
    // make some changes here
}

$(tweakPage)

[vjeantet]

Hello, this was documented here http://localhost:1313/content-organisation/customize-style/#inject-your-html

Maybe it needs more information ?

[nzbart]

Hi @vjeantet

The documentation here still refers to theme.css, which I believe was deleted in 6c00c53d5f471ffbb24705671b971433ced65ebd: https://docdock.netlify.com/content-organisation/customize-style/#inject-your-html

Maybe the docs on your local machine (as indicated by localhost) are more up-to-date?

[rjmanzer]

This new code: pygmentsCodeFences = true pygmentsStyle = "monokailight" Breaks the left navigation when using the docdock theme. Removing these two lines allows the left navigation to work again.