2021-08-16 07:33:06 +00:00
<!doctype html> < html lang = en-au > < head >
< meta charset = utf-8 >
< meta http-equiv = content-language content = "en-AU" >
< meta name = viewport content = "width=device-width,initial-scale=1" >
< meta http-equiv = x-ua-compatible content = "ie=edge" >
< title > Advanced Customisation · Congo< / title >
< meta name = title content = "Advanced Customisation · Congo" >
< meta name = description content = "Learn how to build Congo manually." >
2021-08-19 02:53:58 +00:00
< link rel = canonical href = https://jpanther.github.io/congo/docs/advanced-customisation/ >
2021-08-26 00:19:03 +00:00
< link type = text/css rel = stylesheet href = /congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity = "sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==" >
2021-11-17 22:49:39 +00:00
< link type = text/css rel = stylesheet href = /congo/css/compiled/main.min.4076b9cf114dd23cca017f3365e2205a4c9a4b2c0ef4193ccd08883f76e554aa40f674a8f6e77a1b2895be0975ba8e019b0c59996c2eea32e4970ca4d5221653.css integrity = "sha512-QHa5zxFN0jzKAX8zZeIgWkyaSywO9Bk8zQiIP3blVKpA9nSo9ud6GyiVvgl1uo4BmwxZmWwu6jLklwyk1SIWUw==" >
2021-11-04 00:06:52 +00:00
< script > function loadPreferredAppearance ( ) { localStorage . preferredAppearance === "dark" || ! ( "preferredAppearance" in localStorage ) && window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? document . documentElement . classList . add ( "dark" ) : document . documentElement . classList . remove ( "dark" ) } function setPreferredAppearance ( a ) { a == "default" ? localStorage . removeItem ( "preferredAppearance" ) : localStorage . preferredAppearance = a , loadPreferredAppearance ( ) } loadPreferredAppearance ( ) , window . matchMedia ( "(prefers-color-scheme: dark)" ) . addListener ( loadPreferredAppearance ) < / script >
2021-08-26 00:19:03 +00:00
< link rel = apple-touch-icon sizes = 180x180 href = /congo/apple-touch-icon.png >
< link rel = icon type = image/png sizes = 32x32 href = /congo/favicon-32x32.png >
< link rel = icon type = image/png sizes = 16x16 href = /congo/favicon-16x16.png >
< link rel = manifest href = /congo/site.webmanifest >
2021-08-16 07:33:06 +00:00
< meta property = "og:title" content = "Advanced Customisation" >
< meta property = "og:description" content = "Learn how to build Congo manually." >
< meta property = "og:type" content = "article" >
2021-08-19 02:53:58 +00:00
< meta property = "og:url" content = "https://jpanther.github.io/congo/docs/advanced-customisation/" > < meta property = "article:section" content = "docs" >
2021-08-16 07:33:06 +00:00
< meta property = "article:published_time" content = "2020-08-09T00:00:00+00:00" >
< meta property = "article:modified_time" content = "2020-08-09T00:00:00+00:00" >
< meta name = twitter:card content = "summary" >
< meta name = twitter:title content = "Advanced Customisation" >
< meta name = twitter:description content = "Learn how to build Congo manually." >
2021-10-20 03:57:06 +00:00
< script type = 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" : "470" , "keywords" : [ "advanced" , "css" , "docs" ] } < / script >
2021-11-17 22:49:39 +00:00
< meta name = generator content = "Hugo 0.89.3" >
2021-08-16 07:33:06 +00:00
< meta name = author content = "Congo" >
< link href = https://twitter.com/ rel = me >
< link href = https://facebook.com/ rel = me >
< link href = https://linkedin.com/ rel = me >
< link href = https://youtube.com/ rel = me >
< / head >
2021-09-29 00:56:46 +00:00
< body class = "flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl" > < header class = "flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-800 dark:text-neutral" >
2021-08-16 07:33:06 +00:00
< div >
2021-08-26 00:19:03 +00:00
< a class = "hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel = me href = /congo/ > Congo< / a >
2021-08-16 07:33:06 +00:00
< / div >
< nav >
< ul class = "flex flex-col list-none sm:flex-row" >
2021-08-22 07:24:36 +00:00
< li class = "mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0" >
2021-08-26 00:19:03 +00:00
< a class = "hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href = /congo/docs/ title = Documentation > Docs< / a >
2021-08-16 07:33:06 +00:00
< / li >
2021-08-22 07:24:36 +00:00
< li class = "mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0" >
2021-08-26 00:19:03 +00:00
< a class = "hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href = /congo/samples/ title = "Content Samples" > Samples< / a >
< / li >
< li class = "mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0" >
< a class = "hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href = /congo/users/ title = Users > Users< / a >
2021-08-16 07:33:06 +00:00
< / li >
2021-08-22 07:24:36 +00:00
< li class = "mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0" >
< a class = "hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href = https://github.com/jpanther/congo title > GitHub< / a >
2021-08-16 07:33:06 +00:00
< / li >
< / ul >
< / nav >
< / header >
< main class = flex-grow >
< article class = max-w-prose >
< header >
2021-08-22 07:24:36 +00:00
< ol class = "text-sm text-neutral-400 dark:text-neutral-500" >
2021-08-18 08:05:12 +00:00
< li class = "inline hidden" >
2021-08-26 00:19:03 +00:00
< a class = "hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href = /congo/ > Welcome to Congo! :tada:< / a > < span class = "px-1 text-primary-500" > /< / span >
2021-08-18 08:05:12 +00:00
< / li >
< li class = inline >
2021-08-26 00:19:03 +00:00
< a class = "hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href = /congo/docs/ > Documentation< / a > < span class = "px-1 text-primary-500" > /< / span >
2021-08-18 08:05:12 +00:00
< / li >
< li class = "inline hidden" >
2021-08-26 00:19:03 +00:00
< a class = "hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href = /congo/docs/advanced-customisation/ > Advanced Customisation< / a > < span class = "px-1 text-primary-500" > /< / span >
2021-08-18 08:05:12 +00:00
< / li >
< / ol >
2021-08-22 07:24:36 +00:00
< h1 class = "mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral" >
Advanced Customisation
< / h1 >
< div class = "mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500" >
< div class = "flex flex-row items-center" >
< span title = "Reading time" > 3 mins< / span > < span class = "px-2 text-primary-500" > · < / span >
< span class = mb-[2px] >
2021-11-10 01:57:05 +00:00
< a href = https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/advanced-customisation.md class = "text-lg hover:text-primary-500" rel = "noopener noreferrer" target = _blank title = "Edit content" >
< span class = "relative inline-block align-text-bottom icon" > < svg aria-hidden = "true" focusable = "false" data-prefix = "far" data-icon = "edit" class = "svg-inline--fa fa-edit fa-w-18" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 576 512" > < path fill = "currentcolor" d = "M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5.0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1.0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7.0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174 402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7-43.2-43.2c-4.1-4.1-10.8-4.1-14.8.0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" / > < / svg >
2021-08-16 07:33:06 +00:00
< / span >
2021-08-22 07:24:36 +00:00
< / a >
< / span >
< / div >
2021-08-16 07:33:06 +00:00
< / div >
< / header >
< section class = "prose dark:prose-light" >
2021-08-22 07:24:36 +00:00
< p > There are a few ways you can make style changes to Congo.< / p >
< h2 id = colour-schemes > Colour schemes < a class = heading-anchor href = #colour-schemes aria-label = Anchor > #< / a > < / h2 >
2021-10-20 03:57:06 +00:00
< p > Congo ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the < code > colorScheme< / code > theme parameter. Refer to the < a href = https://jpanther.github.io/congo/docs/getting-started/#colour-schemes > Getting Started< / a > section to learn more about the built-in schemes.< / p >
< p > In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a < code > < scheme-name>.css< / code > file in the < code > assets/css/schemes/< / code > folder. Once the file is created, simply refer to it by name in the theme configuration.< / p >
2021-08-22 07:24:36 +00:00
< p > Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as < code > neutral< / code > , < code > primary< / code > and < code > secondary< / code > variants, each containing ten shades of colour.< / p >
< p > Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official < a href = https://tailwindcss.com/docs/customizing-colors#color-palette-reference > Tailwind colour palette reference< / a > .< / p >
< h2 id = overriding-the-stylesheet > Overriding the stylesheet < a class = heading-anchor href = #overriding-the-stylesheet aria-label = Anchor > #< / a > < / h2 >
2021-09-29 00:56:46 +00:00
< p > Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a < code > custom.css< / code > file in your project’ s < code > assets/css/< / code > folder.< / p >
2021-08-22 07:24:36 +00:00
< p > The < code > custom.css< / code > file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.< / p >
< h2 id = building-from-source > Building from source < a class = heading-anchor href = #building-from-source aria-label = Anchor > #< / a > < / h2 >
< p > 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 >
2021-08-16 07:33:06 +00:00
< div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" >
< span class = "pr-3 text-primary-400" >
< span class = "relative inline-block align-text-bottom icon" > < svg aria-hidden = "true" focusable = "false" data-prefix = "fas" data-icon = "exclamation-triangle" class = "svg-inline--fa fa-exclamation-triangle fa-w-18" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 576 512" > < path fill = "currentcolor" d = "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z" / > < / svg >
< / span >
< / span >
2021-08-22 07:24:36 +00:00
< span class = "no-prose dark:text-neutral-300" > < strong > Note:< / strong > Building the theme manually is intended for advanced users.< / span >
2021-08-16 07:33:06 +00:00
< / div >
< p > Change into the < code > themes/congo/< / code > folder and install the project dependencies.< / p >
< div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-bash data-lang = bash > npm install
< / 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 >
2021-08-22 07:24:36 +00:00
< p > To allow for easy theme colour changes, Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as < code > neutral< / code > , < code > primary< / code > and < code > secondary< / code > variants, each containing ten shades of colour. In order to change the colour across the entire theme, simply edit the < code > tailwind.config.js< / code > file accordingly.< / p >
< p > For a full list of colours available, and their corresponding configuration values, see the official < a href = 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. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes.< / p >
2021-08-16 07:33:06 +00:00
< div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-bash data-lang = bash > npm run dev
2021-08-22 07:24:36 +00:00
< / code > < / pre > < / div > < p > This will automatically output a CSS file to < code > /themes/congo/assets/css/compiled/main.css< / code > .< / p >
< div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" >
< span class = "pr-3 text-primary-400" >
< span class = "relative inline-block align-text-bottom icon" > < svg aria-hidden = "true" focusable = "false" data-prefix = "fas" data-icon = "exclamation-triangle" class = "svg-inline--fa fa-exclamation-triangle fa-w-18" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 576 512" > < path fill = "currentcolor" d = "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z" / > < / svg >
< / span >
< / span >
2021-09-29 00:56:46 +00:00
< span class = "no-prose dark:text-neutral-300" > < strong > Note:< / strong > You should not make manual edits to the compiled CSS file.< / span >
2021-08-22 07:24:36 +00:00
< / div >
< p > Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using < code > hugo server< / code > to preview your site during development. Asset files will be minified by Hugo at site build time.< / p >
2021-08-16 07:33:06 +00:00
< / section >
< footer class = pt-8 >
2021-08-18 08:05:12 +00:00
< div class = "pt-8 article-pagination" >
2021-08-22 07:24:36 +00:00
< hr class = "border-dotted border-neutral-300 dark:border-neutral-600" >
2021-08-16 07:33:06 +00:00
< div class = "flex justify-between pt-3" >
< span >
2021-08-26 00:19:03 +00:00
< a class = flex href = /congo/docs/partials/ >
2021-08-18 08:05:12 +00:00
< span class = "mr-3 article-pagination-direction" > ← < / span >
2021-08-16 07:33:06 +00:00
< span class = "flex flex-col" >
2021-11-10 01:57:05 +00:00
< span class = "article-pagination-title mt-[0.1rem] leading-6" > Partials< / span >
< span class = "mt-[0.1rem] text-xs text-neutral-400 dark:text-neutral-500" >
2021-08-22 07:24:36 +00:00
< / span >
2021-08-16 07:33:06 +00:00
< / span >
< / a >
< / span >
< span >
2021-11-04 00:06:52 +00:00
< a class = "flex text-right" href = /congo/docs/hosting-deployment/ >
< span class = "flex flex-col" >
2021-11-10 01:57:05 +00:00
< span class = "article-pagination-title mt-[0.1rem] leading-6" > Hosting & Deployment< / span >
< span class = "mt-[0.1rem] text-xs text-neutral-400 dark:text-neutral-500" >
2021-11-04 00:06:52 +00:00
< / span >
< / span >
< span class = "ml-3 article-pagination-direction" > → < / span >
< / a >
2021-08-16 07:33:06 +00:00
< / span >
< / div >
< / div >
< / footer >
< / article >
2021-10-20 03:57:06 +00:00
< / main > < footer class = py-10 >
2021-11-04 00:06:52 +00:00
< div class = "flex justify-between" >
< div >
2021-10-20 03:57:06 +00:00
< p class = "text-sm text-neutral-400 dark:text-neutral-500" >
2021-08-16 07:33:06 +00:00
©
2021
Congo
< / p >
2021-08-22 07:24:36 +00:00
< p class = "text-xs text-neutral-300 dark:text-neutral-600" >
2021-10-20 03:57:06 +00:00
Powered by < a class = "hover:underline hover:underline-primary-300 hover:text-primary-400" href = https://gohugo.io/ target = _blank rel = "noopener noreferrer" > Hugo< / a > & < a class = "hover:underline hover:underline-primary-300 hover:text-primary-400" href = https://git.io/hugo-congo target = _blank rel = "noopener noreferrer" > Congo< / a >
2021-08-16 07:33:06 +00:00
< / p >
2021-11-04 00:06:52 +00:00
< / div >
< / div >
2021-08-16 07:33:06 +00:00
< / footer >
< / body >
< / html >
