Changing the colour of header text

[jayhorton]

Hi Huabing, Your cleanwhite template is awesome. I would like to change the colour of all text that appears in the header from white to hex color #f8ae00 - blog title, the menu text, and the post titles, subtitles and date. Please advise on how I should do this; perhaps with an additional css file in /static/css/ ? Best regards, Jay

[zhaohuabing]

Hi Jay,

This theme does support customized css. For example, you can change the color of menu text as follows:

1. Create file "static/css/custom.css" in the directory of your blog source.

2. Specify this custom css file in the config.toml

   [params]
   custom_css = ["css/custom.css"]

3. Paste the below css into the custom.css file.

@media only screen and (min-width:768px) {
    .navbar-custom .nav li a {
        color: #f8ae00;
    }
}
.navbar-default .navbar-nav>li>a {
    color: #f8ae00;
}

By this way, you can also change the style of other page elements as you want.

[jayhorton]

Hi Huabing, Thank you for your fast reply.

Three quick questions: What happens to the original custom file: /themes/hugo-theme-cleanwhite/static/css custom.css? Retain it or copy it into the /static/css/ folder and add the new code? Do I need to add a file head.html into a new folder: site_root/layouts/partials/ ? And reference the new custom.css file? Can you please suggest a general reference website where I can learn more about customising themes? Thanks and best regards, Jay

Jay Horton horton@bigpond.net.au

On 27 Oct 2020, at 5:52 pm, zhaohuabing notifications@github.com wrote:

Hi Jay,

This theme does support customized css. For example, you can change the color of menu text as follows:

Create file "static/css/custom.css" in the directory of your blog source. Past the below css into the custom.css file. @media only screen and (min-width:768px) { .navbar-custom .nav li a { color: #f8ae00; } } .navbar-default .navbar-nav>li>a { color: #f8ae00; } By this way, you can also change the style of other page elements as you want.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zhaohuabing/hugo-theme-cleanwhite/issues/89#issuecomment-717027622, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUR7KEL4LR2TGXFPQURMDTSMZU3FANCNFSM4TAKVFNA.

[zhaohuabing]

What happens to the original custom file: /themes/hugo-theme-cleanwhite/static/css custom.css? Retain it or copy it into the /static/css/ folder and add the new code?

huabing: Just create a blank file /static/css/custom.css and put the css elements that you want to override in it.

Do I need to add a file head.html into a new folder: site_root/layouts/partials/ ? And reference the new custom.css file?

huabing: No you don't need to do that. These three steps are enough to make the change that you want.

Can you please suggest a general reference website where I can learn more about customising themes?

huabing: Basically, css is the style, font, color, size, etc. of your web pages. And the style in the config.toml files can override the default one in the theme. You can find more about cc at here: https://www.w3schools.com/css/css_intro.asp

You can find the css element that you want to override by inspecting the web page in the Chrome browser.

[jayhorton]

Hi Huabing, Thank you for your explanations. The color change to the menu text worked, so thanks very much.

One more change needed: How to change the colour of the site title in the top left-hand corner of each page ("Huabing Blog”)?

Best regards, Jay

Jay Horton horton@bigpond.net.au

On 27 Oct 2020, at 9:47 pm, zhaohuabing notifications@github.com wrote:

What happens to the original custom file: /themes/hugo-theme-cleanwhite/static/css custom.css? Retain it or copy it into the /static/css/ folder and add the new code?

huabing: Jus retain it.

Do I need to add a file head.html into a new folder: site_root/layouts/partials/ ? And reference the new custom.css file?

huabing: No you don't need to do that. These three steps are enough to make the change that you want.

Can you please suggest a general reference website where I can learn more about customising themes?

huabing: Basically, css is the style, font, color, size, etc. of your web pages. And the style in the config.toml files can override the default one in the theme. You can find more about cc at here: https://www.w3schools.com/css/css_intro.asp https://www.w3schools.com/css/css_intro.asp You can find the css element that you want to override by inspecting the web page in the Chrome browser.

https://user-images.githubusercontent.com/1321762/97291255-a7820d80-1884-11eb-9eba-265f8ceefb74.png — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zhaohuabing/hugo-theme-cleanwhite/issues/89#issuecomment-717154339, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUR7KAV32YNXIKY6ENZB33SM2QLJANCNFSM4TAKVFNA.

[zhaohuabing]

Try this:

@media only screen and (min-width: 768px)
.navbar-custom .navbar-brand {
    color: #f8ae00;
}
.navbar-custom .navbar-brand {
    color: #f8ae00;
}

[jayhorton]

Hi Huabing, Thank you for your advice. It works perfectly. How can I express my appreciation for your help? Best regards, Jay

Jay Horton horton@bigpond.net.au

On 28 Oct 2020, at 6:58 pm, zhaohuabing notifications@github.com wrote:

Try this:

@media only screen and (min-width: 768px) .navbar-custom .navbar-brand { color: #f8ae00; } .navbar-custom .navbar-brand { color: #f8ae00; } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zhaohuabing/hugo-theme-cleanwhite/issues/89#issuecomment-717765104, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUR7KCGY72E75HN2LQOOILSM7FMDANCNFSM4TAKVFNA.

[zhaohuabing]

No problem.

Give this repo a star if you think it's helpful. Happy blogging!

[jayhorton]

Thanks Huabing. A star is born! Best regards, Jay

Jay Horton horton@bigpond.net.au

On 29 Oct 2020, at 1:57 pm, zhaohuabing notifications@github.com wrote:

No problem.

Give this repo a star if you think it's helpful. Happy blogging!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zhaohuabing/hugo-theme-cleanwhite/issues/89#issuecomment-718327335, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUR7KE6Q7JIAKNHKS3UFNDSNDKYTANCNFSM4TAKVFNA.

[mayuresh82]

Hello Huabing Is it possible to customize CSS on a per post basis ?

[zhaohuabing]

No,we can't customize css per post because all posts share the same css.