Search code examples
htmlcssjekylljekyll-theme

beautiful-jekyll theme: How to modify the page title color in CSS?

I have set up a "beautiful Jekyll" blog/GitHub page and I would like to change the font color of the page title and subtitle.

I would like to change the text color:

Beautiful Jekyll
Build a beautiful and simple website in minutes

I cannot find the right place in the main.css. I have looked into the index.html, the config.yml, and the css folder but cannot find where to change the color.

Around line 24ish to line 35ish of the main.css file I have:

h1,h2,h3,h4,h5,h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

a {
  color: {{ site.link-col }};
}

.header_class {
  color: red;
}

On line 28 of the index.html file I have:

<h1 class="header_class">{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>

Current website: https://deanattali.com/beautiful-jekyll/
GitHub page: https://github.com/daattali/beautiful-jekyll

Solution

  • There is an <h1> for page.title in the header.html.

    Problem: The parent div has a class <div class="{{ include.type }}-heading"> but the element itself has no class or id which could be used in the CSS.

    Solution: You need to add another class to the HTML and define new styles in the CSS to get only the colored page.title.

    In case you only define the color on the existing <h1>in your CSS, each document's title would be colored, as the CSS defines the same styles for <h1> to <h6>.

    Check out this tutorial on how to use classes in HTML/CSS.

    Testing HTML and CSS changes

    Use the inspector (dev tools) in your browser (press F12) to see the elements of a page. You can even test what happens when you add or change specific CSS attributes. Learn what I mean and how to do it on your own.

    For testing, I have added color: red to the <h1> tag:

    inspector / dev tools

    Add a class to your HTML and update your CSS

    1. Go to line 28 in the header.html and add change <h1> to <h1 class="your-test-class">
    2. Go to the main.css and add the following below the <h1,...>definition:
    .your-test-class {
  color: red;
}

    Note: This h1 tag example would also work for the sub-title.