Create a gist now

Instantly share code, notes, and snippets.

@gcushen /green.css
Last active May 15, 2017

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).
* https://github.com/gcushen/hugo-academic
**************************************************/
a,
a:visited,
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-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-primary.btn-outline {
border-color: rgb(76,175,80);
}
/* Hover buttons */
.btn-primary.btn-outline:hover {
border-color: rgb(76,175,80);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:visited,
.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:

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 .btn.btn-primary.active {
  background-color: rgba(0,230,118,1);
}

A copy of the full .css is in my github repo:
https://github.com/apreshill/apreshill/blob/master/static/css/green.css

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