Create a gist now

Instantly share code, notes, and snippets.

@gcushen /green.css
Last active Feb 20, 2018

What would you like to do?
Green color scheme for Hugo Academic Theme
* An Example Green Theme for Hugo Academic
* Set `custom_css = ["green.css"] in `config.toml`.
* Then save this file as `/static/css/green.css` relative to your website root (i.e. not in `themes/academic` directory).
h3.article-title a:hover {
color: rgb(76,175,80);
a:hover {
color: rgb(0,230,118);
.navbar-default .navbar-nav li a:hover,
.btn-primary.btn-outline {
color: rgb(76,175,80);
/* Articles */
.article-title a {
color: #151515;
.article-metadata a {
color: #888;
.article-metadata a:hover {
color: rgb(76,175,80);
/* Standard buttons */
.btn-primary.btn-outline {
border-color: rgb(76,175,80);
/* Hover buttons */
.btn-primary.btn-outline:hover {
border-color: rgb(76,175,80);
.btn-primary.btn-outline:active {
background-color: rgb(76,175,80);

I had to put this in, otherwise the active button in the navbar remains blue.

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: rgb(76,175,80);
  font-weight: 700;
  background-color: transparent !important; /* Override Bootstrap. */

this doesn't seem to include the filter buttons for projects:


apreshill commented May 15, 2017

Just figured out how to to change these colors- you need to add the following to the green.css (in addition to the navbar code from @egri-nagy above):

/* Toolbar buttons */

.btn-toolbar .btn.btn-primary {
  background: rgb(0,230,118);

.btn-toolbar .btn.btn-primary:hover,
.btn-toolbar .btn.btn-primary:focus {
  background-color: rgba(0,230,118,0.6);

.btn-toolbar .btn.btn-primary:active,
.btn-toolbar {
  background-color: rgba(0,230,118,1);

A copy of the full .css is in my github repo:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment