search

curtiscde / hugo-theme-massively

Massively theme for Hugo static site generator
https://hugo-theme-massively.netlify.app
Other
155 stars 138 forks source link

Change palette colours? #116

Closed DragonsNotIncluded closed 2 years ago

DragonsNotIncluded commented 2 years ago

I've been very impressed with how well this theme works for my podcast blog dragonsnotincluded.github.io, but I can't figure out how to change the button hover palette colour. I've found references in header.scss to .logo CSS which look like it could maybe be manually edited to change the blue hover colour to, say, red. Is there a better way of changing palette colours, or something undocumented I could put in the config.toml? I'd rather avoid manually editing the generated main.min.css to change # 18bfef

curtiscde commented 2 years ago

Hi @DragonsNotIncluded, thanks for raising this question.

Rather than editing the existing CSS files, it is possible to add an overriding CSS file to the theme. That way you will still be able to benefit from updates to the theme in the future 🙂

There is a bit of documentation on how to do this here:

https://github.com/curtiscde/hugo-theme-massively#custom-head

Essentially you add a copy of the htmlhead.custom.html file to your folder structure (/layout/partials/htmlhead.custom.html), and then any content added to that file is included in the <head>.

Therefore you could have:

/layout/partials/htmlhead.custom.html

<link src="/css/custom.css" />

And then add the CSS file with something like:

/static/css/custom.css

input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover, .button:hover {
    box-shadow: inset 0 0 0 2px #ff0000;
    color: #ff0000!important;
}

I hope this helps!