Search code examples
htmlcssjekylljekyll-theme

Background color doesn’t change after modifying its CSS color value

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?

Solution

  • 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"