Difficulties styling colour in the hyde-hyde theme

Using Themes
1

Hi,

I am using hyde-hyde theme https://themes.gohugo.io/hyde-hyde/

I want to change the sidebar colour, but haven’t been able to. A few things I have found:

/themes/hyde-hyde/assets/scss/hyde-hyde/_variables.scss

// sidebar
$sidebar-color: #300030;

/themes/hyde-hyde/assets/scss/hyde-hyde/_sidebar.scss

    .sidebar {
  background-color: $sidebar-color;

Changing the $sidebar-color to my new color does nothing. Even changing the background-color: to a html color code does nothing.

I have tried refreshing the page, stopping and re-starting the server, starting the server and disabling fast render.

I found:
/themes/hyde-hyde/static/css/hyde-hyde.css

.sidebar {
  background-color: #300030;

Again, changing this doesn’t appear to do anything.

I tried changing these properties individually, and changed both these files to my new colour:
/themes/hyde-hyde/static/css/hyde-hyde.css
/themes/hyde-hyde/assets/scss/hyde-hyde/_variables.scss

I also found in:
/themes/hyde-hyde/static/css/hyde.css

/*
 * Themes
 *
 * As of v1.1, Hyde includes optional themes to color the sidebar and links
 * within blog posts. To use, add the class of your choosing to the `body`.
 */

/* Base16 (http://chriskempson.github.io/base16/#default) */

/* Red */
.theme-base-08 .sidebar {
  background-color: #ac4142;
}
.theme-base-08 .content a,
.theme-base-08 .related-posts li a:hover {
  color: #ac4142;
}

/* Orange */
.theme-base-09 .sidebar {
  background-color: #d28445;
}
.theme-base-09 .content a,
.theme-base-09 .related-posts li a:hover {
  color: #d28445;
}

More color 'profiles` followed, I cut them for brevity

But I don’t know what to do with this. I did visit the github page, but that wasn’t any help to me.

I have looked through all the .css and .scss files in the theme and nothing is ‘jumping out at me’.

Can anyone offer any suggestions?

Thanks.

2

Which version of hugo is installed? Type hugo version at the command line.

3

Hi,

The version output:
Hugo Static Site Generator v0.74.1-15163266 linux/amd64 BuildDate: 2020-07-13T18:52:46Z

Another interesting thing is if I go into Firefox, inspect element and change the .sidebar color to my new color, it works fine. But when I try to find that same code in the template source and change it there, it’s no good.

4

You need to install the extended version.

1 Like
5

@jmooring many thanks.

I Installed the extended version - didn’t even know it existed. Changed the bit of code I thought it should be, and its working as I expected now. :+1:

For anyone reading this in the future…

  • Hugo Extended Version supports .scss
  • the code I changed to change the sidebar color was:
    /themes/hyde-hyde/assets/scss/hyde-hyde/_variables.scss 
// sidebar
$sidebar-color: #300030;

Change the html color code to whatever you need.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.