Changing the Page Title Color in CSS in the Beautiful-Jekyll Theme

I've recently launched a "stunning Jekyll" blog/GitHub page, and now I want to tweak the font color of the page title and subtitle.

Specifically, I'm trying to update the text color:

Stunning Jekyll
Create an elegant and straightforward website in just minutes

Despite my efforts, I can't seem to locate the proper section in the main.css. I've checked the index.html, the config.yml, and the css folder, but I'm unable to pinpoint where I can modify the color.

In the main.css file, around line 24 to 35, 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;
}

Within the index.html file on line 28, there is:

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

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

Answer №1

Within the header.html, there is an <h1> element for the page.title.

Issue: The parent div has a class

<div class="{{ include.type }}-heading">
but the actual element lacks a class or id that can be targeted with CSS.

Resolution: To style only the colored page.title, you must add another class to the HTML and create corresponding styles in the CSS.

If you simply apply color styling to the existing <h1> in your CSS, all document titles will inherit the color as styles are shared from <h1> to <h6>.

Refer to this guide on using classes in HTML/CSS: how to use classes in HTML/CSS.

Testing Modifications in HTML and CSS

Experiment with changes by utilizing the browser inspector (F12) to inspect page elements and test adjustments to CSS attributes. Understand more about this process: inspector tool tutorial.

To test, I've added color: red to the <h1> tag:

https://i.sstatic.net/wmoVK.png

Incorporate a New Class in HTML and Update CSS

  1. Navigate to line 28 in header.html and change <h1> to
     <h1 class="your-test-class">
  2. Edit the main.css file and insert the following beneath the definition for <h1,...>:
.your-test-class {
  color: red;
}

Note: This example using the h1 tag can also be applied to subtitles.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

flash file underneath a dropdown menu

Currently, I am utilizing a drop-down menu with its code written in a .js file on my website. However, an issue has arisen where the drop-down menu's additional content is being hidden behind a flash file that overlaps it when hovering over any catego ...

A small space underneath the <a> element nested within a <li> tag within a navigation bar

As a new programmer, I am currently working on creating a navbar. However, I have encountered an issue where there are small gaps underneath the user when my cursor hovers over it. There is a white gap under the user element. I expect that the hover back ...

What is the best method for comparing an image element on an HTML5 canvas with a separate image stored on a Hard Drive using Selenium WebDriver

As a novice in Automation testing, I am utilizing Java for Selenium WebDriver. The web application I am working on features an HTML5 canvas similar to Paint. While I have successfully managed to move an element on the canvas, my current challenge is compar ...

list of key combinations in a ul element

I programmed a list of world states in PHP using an unordered list (<ul>): $WORLD_STATES = array( "France", "Germany", "Greece", "Greenland", "United Kingdom", "United States", "Uruguay" ...

Converting forms into both HTML and PDF formats

My goal is to create multiple forms with different outputs, but I want to design the form only once. Initially - HTML: The form should be visible in Internet Explorer The data entered by the user must be stored in a database The form should be displayed ...

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

As I navigate through new tabs and existing tabs, I am curious about the criteria that determines whether a new tab is opened or if the browser simply reopens an existing tab with the same name. Could someone shed light on the specific parameters being co ...

Press the "Print All" button to instantly print out all of the images in one go

I have successfully implemented a feature where multiple images are displayed as thumbnails from a specified folder. Now, I am looking to add a "Print All" button that will allow users to print all the images in one go. Is it possible to print all images ...

The Bootstrap button is experiencing difficulties with resizing

When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...

How to use jQuery to set a background image using CSS

I've been working on setting backgrounds dynamically with a jQuery script, but it seems like the .css function is not working as expected. Here's the code snippet: $(document).ready(function () { $(".VociMenuSportG").each(function () { ...

Determine the sequence of a div based on its class

Here is the code snippet I am working with: <div class="test"></div> <div class="test"></div> <div class="test"></div> <input type="button" class="button" value="get number"> <div class="test"></div> & ...

Creating a curved upper margin in the footer with Bootstrap: techniques and tips

I'm currently trying to create a footer with rounded corners at the top left and right. I've been using inline styles to test it out, but I can't seem to get it looking right. I'm working with Bootstrap 5 and applying custom inline styl ...

I am attempting to increase the date retrieved from my database by three years

I need assistance with updating dates in my PHP script. I want to add 3 years to the date stored in the database for each record. Specifically, I need to retrieve the date when a certain class was first taken (date_aerial) and then return a new date by add ...

Enable text selection within a textarea that is contained in a parent element using jQuery Sortable

I have implemented a sortable table using jQuery UI's Sortable function. Within this table, there is a textarea that allows users to input comments about specific entries. <table id="status"> <thead> <tr> < ...

Enhance your website with footer animations using jQuery!

I am implementing a sticky footer on my website to keep the footer at the bottom using CSS. I want the footer to initially be collapsed and expand when the user clicks on a button, swapping the "expand" link with a different container div inside the footer ...

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

Integrating an HTML file into reStructuredText

I am in the process of developing a website using Sphinx and I have certain pages where I want to incorporate predefined HTML files stored in a specific directory like _static. In Django, it's easy to reference such files directly from the template us ...

Using Javascript to dynamically add variables to a form submission process

Looking to enhance my javascript skills, I've created a script that locates an existing id and exchanges it with a form. Inside this form, I'm aiming to incorporate javascript variables into the submit url. Unsure if this is feasible or if I&apo ...

What is the best way to save personalized CSS styles into a database?

Appreciation for assisting others and contributing to open source projects. I have developed a Vue.js to-do application that stores data in Firebase using vue-fire and Firestore. One issue I am experiencing is that the styling, such as "line-through" for ...

How to design a custom <md-switch> with an icon in Angular Material

Is it possible to incorporate an icon into the md-switch component? I drew inspiration from a demonstration on www.inbox.google.com https://i.sstatic.net/qjw40.png Appreciate any advice or suggestions! ...

Encountered an issue while attempting to verify email through ajax with the database

After reviewing responses from multiple users here, I am aiming to verify if an email is already in the database. Below is the code snippet I am using: **HTML CODE** <div class="form-group"> <div class="col-sm-12"> ...