<scripttype=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Advanced Customisation","headline":"Advanced Customisation","description":"Learn how to build Congo manually.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-09T00:00:00\u002b00:00","datePublished":"2020-08-09T00:00:00\u002b00:00","dateModified":"2020-08-09T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/advanced-customisation\/","wordCount":"293","keywords":["advanced","css","docs"]}</script>
<p>There are a couple of ways you can make style changes to Congo.</p>
<p>If you just need to add or override some simple styles, you can do so by creating a <code>custom.css</code> file in your project’s <code>static/css/</code> folder. This file will be loaded automatically after the theme’s default styles.</p>
<p>Alternatively, if you’d like to make a major change, you can take advantage of Tailwind CSS’s JIT compiler and rebuild the entire theme CSS from scratch.</p>
</code></pre></div><p>Once installed, you can edit the <code>themes/congo/tailwind.config.js</code> to change the styles that are applied throughout the theme. You can also adjust specific styles in <code>themes/congo/assets/css/main.css</code>.</p>
<p>To allow for easy theme colour changes, Congo defines a <code>primary</code> and <code>secondary</code> colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the <code>tailwind.config.js</code> file accordingly.</p>
<p>For example, to change to a green colour scheme, you could apply these changes:</p>
</code></pre></div><p>For a full list of colours available, and their corresponding configuration values, see the official <ahref=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind docs</a>.</p>
<p>After editing the configuration, you need to rebuild the theme’s stylesheets.</p>
<divclass=highlight><pretabindex=0class=chroma><codeclass=language-bashdata-lang=bash>npm run build
</code></pre></div><p>This will automatically output a minified CSS file to <code>/themes/congo/static/css/main.css</code>.</p>
<p>To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.</p>
<divclass=highlight><pretabindex=0class=chroma><codeclass=language-bashdata-lang=bash>npm run dev
</code></pre></div><p>Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using <code>hugo server</code> to preview your site during development. Remember to perform a full build before publishing your website.</p>
