1

I am using this Jekyll theme and want to change the yellow color in the theme to another color (for example grey).

However after changing the following CSS color value the background color remains unchanged.

https://github.com/patdryburgh/hitchens/blob/master/_sass/_variables.scss#L1

$brand-color:         #fede00;

What am I doing wrong? I’m new to Jekyll. Are there other elements I should be modifying?

papof
  • 13
  • 3
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Dec 27 '22 at 05:38
  • Here's a hint of how to debug it. Hit F12. Look on the right panel and select the LAYOUT tab. Look for your class and see if another class overrides it. – Dale Dec 27 '22 at 23:43

1 Answers1

0

Welcome to Stackoverflow! You're in the right place. The $brand-color sass variable is used for the body background.

A local test showed the background color change

Simply changing the color value worked for me with no issue.

Here's what I did:

  1. Cloned the project

  2. Changed the color value from $brand-color: #fede00; to $brand-color: #6e6e6c; in the _sass_variables.scss file

  3. Stopped and restarted the Jekyll server

    enter image description here

A test using GitHub pages

After cloning your project, I had some issues building it locally. I removed the gemspec file and fixed your Gemfile. I saw the same color, which was working fine locally.

The fix: Change the URL and baseurl parameters

Finding the reason for the non-changing color on GitHub pages took some time. Finally, I found out that the URL for the CSS in the index.html file was the page from the original page author :

<link rel="stylesheet" href="https://patdryburgh.github.io/assets/css/main.css?1672179035996506134">

The reason was that the CSS URL in the default layout uses an absolute URL (see here).

I could fix the absolute URL issue by changing the baseurl and URL keys in the _config.yml file:

baseurl: "0xtetus.GitHub.io"
url: "https://cadamini.github.io"

In your case, reconfigure the _config.yml file as follows:

baseurl: ""
url: "https://0xtetus.github.io"
Christian
  • 4,902
  • 4
  • 24
  • 42
  • I’m unfortunately still seeing yellow which is extremely odd and I really cannot understand why it is happening. I `git clone` the repo, then I modify the $brand-color variable, then I push this modified code to a new GitHub repo, then I use Netlify to deploy. I still see yellow! I also tried GitHub Pages, but still see yellow. I have tried loading the website using different devices and browsers and oddly enough it’s yellow everywhere. I really cannot understand how this can happen. – papof Dec 27 '22 at 12:00
  • Where did you change the color exactly? Can you share your repo URL? – Christian Dec 27 '22 at 13:10
  • Here it is: https://github.com/0xtetus/0xtetus.GitHub.io/blob/main/_sass/_variables.scss#L1 – papof Dec 27 '22 at 14:31
  • I could find it. See my update above. – Christian Dec 27 '22 at 22:27